/* Vantablack: the label's own style for the board. The ground the records live on (the reels'
   vantablack), text in the light, links the colour of the wordmark. Loaded on every page as
   <link id="vantablackCss" media="not all">; the Style control turns its media to "all". The layout
   is main.css's. This file redefines main.css's ROLE tokens, plus a few rules where the dark style
   says something the blue style leaves to the browser or to the cascade: the browser's controls, the
   placeholder images, field grounds, the preview's copy of a post, a link inside a hovered spoiler,
   the archive's cell edges, the catalog's counters, the phone's board select.

   Where it reaches: everywhere. mobile.css and catalog.css load after this sheet and colour their
   surfaces with the same role tokens, so the phone layout and the catalog follow it. Switched on by
   the Style control (board.js) and before first paint by a line in each page's head, so a returning
   reader never sees the blue style flash first.
   */

:root{
  /* palette: vantablack */
  --void:#000;
  --smoke:#d6d6d6;
  --haze:#e6e6e6;
  --ash:#7a7a7a;
  --shade:#0c0c0e;
  --shade-edge:#262626;
  --charcoal:#2a2a2a;
  --wordmark:#a9b0e8;
  --flare:#ff3b3b;
  --night-violet:#1a1730;
  --pale-violet:#e0dcff;
  --violet-edge:#3a3660;
  --lavender:#c9c4ff;

  /* the roles, re-coloured */
  --ground:var(--void) none;
  --text:var(--smoke);
  --link:var(--wordmark);
  --link-hover:var(--flare);
  --rule:#232323;
  --chrome-ink:var(--ash);          /* the brackets, slashes and a disabled Previous/Next: 4.5:1 on the cards (measured) */
  --banner-ink:#8a1212;
  --title-ink:#b21818;
  --subtitle-ink:var(--ash);
  --banner-frame:#3a3a3a;
  --label-bg:var(--night-violet);
  --label-ink:var(--pale-violet);
  --label-edge:var(--violet-edge);
  --field-edge:#333;
  --focus-edge:#7a6fe6;
  --card:var(--shade);
  --card-edge:var(--shade-edge);
  --card-hover:#1a1a1e;
  --arrows:var(--charcoal);
  --name-ink:#3fa26b;
  --subject-ink:var(--lavender);
  --postno-ink:#c8c8c8;
  --greentext:#8bc34a;
  --quote-ink:#ff4b4b;
  --spoiler-ring:0 0 0 1px var(--charcoal);
  --omitted-ink:var(--ash);
  --target-bg:#1e1424;
  --target-edge:#4a2f55;
  --highlight-bg:#161a2e;
  --highlight-edge:#3a4270;
  --current-page:var(--haze);
  --footer-ink:var(--ash);
  --excerpt-ink:#bdbdbd;
  --highlight-phone:#2a1a1a;
}

/* the browser's own controls (buttons, the file picker, selects, scrollbars) in their dark form */
:root{color-scheme:dark}
/* the build's placeholder images are drawn in the blue style's card colour: the catalog's no-file tile
   shows the dark card instead of its image, and the "File deleted." strips are inverted (light on dark) */
#threads .thumb.nofile{object-position:-9999px 0;background:var(--card-hover)}
img[src$="filedeleted.png"],img[src$="filedeleted-res.png"]{filter:invert(1) hue-rotate(180deg)}
/* fields: the blue style leaves their ground and ink to the browser */
input[type=text],input[type=password],table.postForm>tbody textarea{background:#0c0c0c;color:var(--haze)}
/* the quote preview's copy of a post is a card of its own, whatever post it copies */
div.posthover{background:var(--card);border-color:var(--card-edge)!important}
/* a link inside a spoiler stays dark while the spoiler is hovered, until the link itself is */
s a:not(:hover){color:var(--ink)!important}
/* the archive's cells, every edge (its header cells are label cells with borders all round) */
#arc-list td{border-color:var(--card-edge)}
/* the catalog: the counters line, and the extended view's thread cards */
#info{color:var(--ash)}
#threads.extended .thread{background:var(--card);border-color:var(--card-edge)}

@media only screen and (max-width:480px){
/* the phone bar's board select */
div#boardNavMobile select{background:#0c0c0c;color:var(--haze)}
}