/* =========================================================================
   Inbox Keys — the forum's theme.
   -------------------------------------------------------------------------
   MyBB ships a light theme: a white page, blue links, and its "depth" drawn
   with sprite images of gradients. This file is the dark restyle that puts the
   forum in the same room as the rest of the site.

   It does not replace MyBB's stylesheets, it follows them. The theme is a child
   of the board's own theme and carries this one stylesheet at disporder 99,
   after global.css and after css3.css, so it wins where it overlaps and MyBB
   keeps doing the layout, the floats, the widths and the tables. Nothing here
   needs a template change.

   The tokens below are the storefront's own, copied from
   Website/assets/catalogue.css rather than invented, so the forum cannot drift
   into a palette of its own. app/tests/cases/25-forum-theme.php holds them to
   that: every token this file declares must exist in the storefront's :root
   with the same value. Adding a colour here that the storefront does not have
   fails the suite.

   Three things MyBB's stylesheets do that a dark theme has to answer for:
     1. backgrounds are near-white and text is #333, so almost every component
        in the stock CSS needs a rule here;
     2. its icons are sprite images of dark glyphs on transparent, which on a
        dark page are invisible. Where the element carries text, the sprite is
        dropped and the text left to speak. Where it is a pure icon - a forum's
        unread dot, a thread's folder, a poll bar - it is replaced with a shape
        drawn in CSS, so there is no image to go looking for;
     3. the editor is SCEditor's, skinned by the theme's `Editor Theme`
        property, which the generated theme sets to MyBB's own defaultdark.css.
   ========================================================================= */

/* 1. The storefront's tokens, copied --------------------------------------- */
:root {
  --bg:        #0b1016;
  --bg-soft:   #0f1620;
  --surface:   #141c26;
  --surface-2: #1a2431;
  --line:      rgba(255, 255, 255, .09);
  --line-soft: rgba(255, 255, 255, .055);

  --text:      #e9eff5;
  --text-dim:  #a3b1c0;
  --text-mute: #7b8998;

  --lime:      #b8f04a;
  --lime-deep: #8fce23;
  --cyan:      #4fd6e0;
  --violet:    #8b7cf6;
  --amber:     #f5b95c;

  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 20px;

  --shadow:    0 18px 40px -24px rgba(0, 0, 0, .9);
  --shadow-lg: 0 30px 70px -30px rgba(0, 0, 0, .95);

  --wrap: 1320px;
  --gutter: clamp(1rem, 3.5vw, 2.5rem);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --ease: cubic-bezier(.2, .7, .3, 1);

  /* No token of its own is invented below this line. The one thing this file
     needed and the storefront does not name - the ink that sits on a lime
     button - is the page's own background, and is used as var(--bg) rather
     than declared again under another name. */
}

/* 2. The page -------------------------------------------------------------- */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.5;
}

#container { color: var(--text); min-width: 0; }

/* The board's own slab. global.css paints #content #fff and it wraps the whole
   page, so leaving it alone leaves the dark restyle as a dark frame around a
   white board - which is what the first render of this theme looked like. The
   page's background is what should show through it. */
#content { background: none; }

/* MyBB fixes the board at 990px. The rest of the site is fluid, so this is
   too - the tables inside are percentage-width and follow along. */
.wrapper {
  width: min(var(--wrap), calc(100% - 2rem));
  min-width: 0;
  margin: 0 auto;
}

a:link, a:visited { color: var(--lime); text-decoration: none; }
a:hover, a:active { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }

:where(a, button, input, select, label, [tabindex]):focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: rgba(184, 240, 74, .28); color: var(--text); }

/* A forum is read for a long time in a dark room; the scrollbar is part of it. */
html { scrollbar-color: var(--surface-2) var(--bg); }

/* 3. Header, panel, search ------------------------------------------------- */
#logo {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
}

/* The stock theme points #logo at MyBB's own logo.png. The generated theme
   points it at the Inbox Keys mark instead (see forum/theme/README.md), which
   is an SVG and so needs its height set rather than its size baked in. */
#logo img { height: 42px; width: auto; display: block; }

#logo ul.top_links { margin: -2px 0 0 0; font-weight: 600; }

/* Icon-bearing links: the sprites are dark glyphs on transparent and vanish
   here, so the sprite goes and the label stays. */
#header ul.menu li a,
#logo ul.top_links a,
#panel .upper a.login,
#panel .upper a.lost_password,
#panel .upper a.register,
#panel .upper a.logout,
#panel .lower ul.panel_links a,
.quick_jump {
  background-image: none;
  padding-left: 0;
  padding-right: 0;
}

#panel .upper {
  background: var(--surface-2);
  color: var(--text-dim);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

#panel .upper a:link, #panel .upper a:visited, #panel .upper a:hover, #panel .upper a:active { color: var(--lime); }

#panel .lower {
  background: var(--bg-soft);
  color: var(--text-mute);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

#panel .lower a:link, #panel .lower a:visited, #panel .lower a:hover, #panel .lower a:active { color: var(--text-dim); }

#search input.textbox, #search input.button { border-color: var(--line); }

/* 4. Tables: the board's own structure ------------------------------------- */
table { color: var(--text); }

.tborder {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.thead {
  background: var(--surface-2);
  color: var(--text);
  border-bottom: 1px solid var(--line);
}

.thead a:link, .thead a:visited, .thead a:hover, .thead a:active { color: var(--lime); }

/* Category headers and separators take the landing page's small-caps mono
   treatment, which is how it marks a label rather than a sentence. */
.tcat {
  background: var(--surface);
  color: var(--text);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line);
}

.tcat a:link, .tcat a:visited, .tcat a:hover, .tcat a:active { color: var(--lime); }

.trow_sep {
  background: var(--surface-2);
  color: var(--text-dim);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.trow1 { background: var(--surface); border-color: var(--line-soft); }
.trow2 { background: var(--bg-soft); border-color: var(--line-soft); }

.trow_shaded { background: rgba(245, 185, 92, .10); border-color: rgba(245, 185, 92, .22); }
.post.unapproved_post { background: rgba(245, 185, 92, .10); }
.post.unapproved_post .post_author { border-bottom-color: rgba(245, 185, 92, .28); }
.post.classic.unapproved_post .post_author { border-color: rgba(245, 185, 92, .28); }
.post.unapproved_post .post_controls { border-top-color: rgba(245, 185, 92, .28); }

/* Deleted threads take the violet the storefront already keeps for it. */
.trow_deleted, .post.deleted_post { background: rgba(139, 124, 246, .12); }

.trow_selected, tr.trow_selected td {
  background: rgba(184, 240, 74, .10);
  color: var(--text);
  border-right-color: rgba(184, 240, 74, .22);
  border-bottom-color: rgba(184, 240, 74, .22);
}

.trow_selected a:link, .trow_selected a:visited, .trow_selected a:hover, .trow_selected a:active { color: var(--lime); }

/* The footer's own text was --text-mute, and on this surface that is 4.38:1 -
   under the 4.5 the render case holds 13px text to. It went unnoticed because
   every other footer row on the board carries links and nothing to read: the
   private message box is the one table whose last row is a sentence. There is
   no token between mute and dim to step to, so the text takes --text-dim and
   the links take the lime the other table headers already use - the hierarchy
   the theme had, the right way round. */
.tfoot {
  background: var(--surface-2);
  color: var(--text-dim);
  border-top: 1px solid var(--line);
}

.tfoot a:link, .tfoot a:visited, .tfoot a:hover, .tfoot a:active { color: var(--lime); }

.thead input.textbox, .thead select { border: 1px solid var(--line); }

.bottommenu { background: var(--surface); color: var(--text-dim); border: 1px solid var(--line); }

.navigation { color: var(--text-mute); }
.navigation .active { color: var(--text); }

.tcat_menu > .expcolimage { opacity: .55; }

/* 5. Forms, buttons, menus ------------------------------------------------- */
fieldset { border: 1px solid var(--line); }
fieldset.trow1, fieldset.trow2 { border-color: var(--line); }

input.textbox, textarea, select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

input.textbox::placeholder, textarea::placeholder { color: var(--text-mute); }

select option { background: var(--bg-soft); color: var(--text); }

/* MyBB's buttons are its calls to action, so they take the storefront's
   primary button outright: the lime ramp, the dark ink, the lift on hover. */
button, input.button,
a.button:link, a.button:hover, a.button:visited, a.button:active {
  background: linear-gradient(180deg, var(--lime), var(--lime-deep));
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--bg);
  font-family: var(--font);
  font-weight: 600;
  padding: 5px 14px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 12px 28px -16px rgba(184, 240, 74, .8);
  transition: transform .18s var(--ease), filter .18s var(--ease);
}

button:hover, input.button:hover,
a.button:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  border-color: transparent;
}

a.button.small_button { padding: 4px 12px; }

/* The buttons' sprites are gone with the rest, but the padding that made room
   for them has to go too or the labels sit in from the left edge. */
a.button span,
.postbit_buttons a span {
  background-image: none;
  padding-left: 0;
}

/* Post controls are secondary: they read as quiet chips, not as CTAs. */
.postbit_buttons > a:link, .postbit_buttons > a:hover, .postbit_buttons > a:visited, .postbit_buttons > a:active {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-dim);
  padding: 2px 10px;
}

.postbit_buttons > a:hover { border-color: rgba(184, 240, 74, .5); color: var(--lime); }

.editor { background: var(--bg-soft); border: 1px solid var(--line); }
.editor_control_bar { background: var(--surface-2); border: 1px solid var(--line); }
.post .editor_control_bar { background: var(--surface-2); }

.popup_menu { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.popup_menu .popup_item { background: var(--surface); color: var(--text-dim); }
.popup_menu .popup_item:hover, .popup_menu a.popup_item:hover { background: var(--lime); color: var(--bg); }

.modal { background: var(--surface); box-shadow: var(--shadow-lg); border: 1px solid var(--line); }

.modal a.close-modal {
  background-image: none;
  text-indent: 0;
  color: var(--text-mute);
  font-size: 20px;
  line-height: 30px;
  text-align: center;
}

.modal a.close-modal::before { content: "\2715"; }
.modal a.close-modal:hover { color: var(--lime); }

.blocker { background-color: rgba(4, 6, 9, .78); }

div.jqi { background-color: var(--surface); border: solid 1px var(--line); }
div.jqi .jqistate { background-color: var(--surface); }
div.jqi .jqititle { border-bottom: solid 1px var(--line); color: var(--text); }
div.jqi .jqimessage { color: var(--text-dim); }
div.jqi .jqibuttons { border-top: solid 1px var(--line); background-color: var(--surface-2); }
div.jqi .jqibuttons button { color: var(--text-dim); border-left: solid 1px var(--line); }
div.jqi .jqibuttons button.jqidefaultbutton { color: var(--lime); }
div.jqi .jqibuttons button:hover, div.jqi .jqibuttons button:focus { color: var(--lime); }
div.jqi .jqibuttons button[disabled] { color: var(--text-mute); }
div.jqi .jqiclose { color: var(--text-mute); }
div.jqisubstate { border: solid 1px var(--line); border-top: none; }
.jqi .jqiarrowtl, .jqi .jqiarrowtc, .jqi .jqiarrowtr { border-bottom-color: var(--surface); }
.jqi .jqiarrowbl, .jqi .jqiarrowbc, .jqi .jqiarrowbr { border-top-color: var(--surface); }
.jqi .jqiarrowlt, .jqi .jqiarrowlm, .jqi .jqiarrowlb { border-right-color: var(--surface); }
.jqi .jqiarrowrt, .jqi .jqiarrowrm, .jqi .jqiarrowrb { border-left-color: var(--surface); }

/* 6. Notices, and the states that have to shout ------------------------------
   The storefront has no danger colour, so amber does that work here rather
   than a red invented for the forum. Add a --danger token to the storefront
   and there is one obvious place to pick it up. */
.pm_alert { background: rgba(245, 185, 92, .12); border: 1px solid rgba(245, 185, 92, .35); color: var(--amber); }

.red_alert, div.error {
  background: rgba(245, 185, 92, .12);
  border: 1px solid rgba(245, 185, 92, .45);
  color: var(--amber);
}

.red_alert a:link, .red_alert a:visited, .red_alert a:hover, .red_alert a:active { color: var(--amber); }

div.error p { color: var(--text-dim); }
div.error p em { color: var(--amber); background-image: none; padding-left: 0; }

.success_message, .error_message { color: var(--text-mute); }
.success_message { color: var(--lime); }
.error_message { color: var(--amber); }

.highlight { background: rgba(184, 240, 74, .16); color: var(--text); }

/* Warning and ban levels keep MyBB's own severity ramp: it is a traffic light,
   and a palette that only has amber in it cannot say "urgent". */
.online { color: var(--lime); }
.offline { color: var(--text-mute); }

h1, h2, h3, h4, h5, h6 { color: var(--text); }

hr { background-color: var(--line); color: var(--line); }

/* 7. Posts ----------------------------------------------------------------- */
.post .post_author {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  border-top: 2px solid var(--line);
}

.post.classic .post_author { border: 1px solid var(--line); border-left: 0; }
.post .post_author div.author_avatar img { border: 1px solid var(--line); background: var(--surface-2); }
.post .post_author div.author_statistics { color: var(--text-mute); }
.post.classic .post_author div.author_statistics { border-top: 1px dotted var(--line); }

.post .post_head { border-bottom: 1px dotted var(--line); }
.post .post_head span.post_date { color: var(--text-mute); }
.post .post_head span.edited_post { color: var(--text-mute); }
.post .post_head span.edited_post a { color: var(--text-dim); }

.post_content .signature { border-top: 1px dotted var(--line); color: var(--text-mute); }

.post .post_meta { color: var(--text-mute); }
.post .post_meta a:link, .post .post_meta a:visited,
.post .post_meta a:hover, .post .post_meta a:active { color: var(--text-dim); }

.post_controls { background: var(--surface); border-bottom: 1px solid var(--line); }

.thread_start_datetime { color: var(--text-mute); }

.ignored_post { border-top: 3px solid var(--line); }
.deleted_post_hidden { border-top: 2px solid var(--line); }
.deleted_post_collapsed { border-top: 3px solid var(--violet); }

img.attachment { border: 1px solid var(--line); padding: 3px; background: var(--bg-soft); }

blockquote { border: 1px solid var(--line); background: var(--surface-2); color: var(--text-dim); }
blockquote cite { border-bottom: 1px solid var(--line); color: var(--text); }
blockquote cite > span { color: var(--text-mute); }

.codeblock { background: var(--bg); border: 1px solid var(--line); }
.codeblock .title { border-bottom: 1px solid var(--line); color: var(--text-dim); font-family: var(--mono); }
.codeblock code { font-family: var(--mono); color: var(--text); }

/* 8. Pagination, reputation, moderation ------------------------------------- */
.pagination { color: var(--text-mute); }

.pagination a { background: var(--surface); border: 1px solid var(--line); color: var(--text-dim); }
.pagination .pagination_current { background: none; color: var(--text); }
.pagination a:hover { background: var(--lime); color: var(--bg); border-color: var(--lime); }

.drop_go_page { background: var(--surface); }

.pagination_breadcrumb { background-color: var(--surface); border: 1px solid var(--line); outline: none; color: var(--text-dim); }

.selectall { background: rgba(184, 240, 74, .10); border-bottom: 1px solid rgba(184, 240, 74, .22); color: var(--text); }

.trow_reputation_positive { background: rgba(184, 240, 74, .10); }
.trow_reputation_negative { background: rgba(245, 185, 92, .12); }
.reputation_neutral { color: var(--text-dim); }
.reputation_positive { color: var(--lime); }
.reputation_negative { color: var(--amber); }

._neutral { background-color: var(--surface-2); color: var(--text-mute); border: 1px solid var(--line); }
._plus { background-color: rgba(184, 240, 74, .14); color: var(--lime); border: 1px solid rgba(184, 240, 74, .4); }
._minus { background-color: rgba(245, 185, 92, .14); color: var(--amber); border: 1px solid rgba(245, 185, 92, .4); }

input.error, textarea.error, select.error { border: 1px solid var(--amber); color: var(--amber); }
input.valid, textarea.valid, select.valid { border: 1px solid rgba(184, 240, 74, .5); }
label.error { color: var(--amber); }

/* 9. Footer ----------------------------------------------------------------- */
#footer .upper { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
#footer a:link, #footer a:visited, #footer a:hover, #footer a:active { color: var(--text-dim); }
#footer .upper .language select, #footer .upper .theme select { border-color: var(--line); }
#footer .lower { color: var(--text-mute); }
#footer .lower a:link, #footer .lower a:visited { color: var(--text-dim); font-weight: 600; }
#footer .lower a:hover, #footer .lower a:active { color: var(--lime); }
#footer .lower #current_time { color: var(--text-mute); }

/* 10. Menus that MyBB themes with a sprite, and that have no colour of their
       own in the stock stylesheets ------------------------------------------ */
.usercp_nav_item, .modcp_nav_item { background-image: none; padding-left: 0; }
.usercp_container { border: 1px solid var(--line); }

.pmspace_container { background: var(--bg); border: 1px solid var(--line); }
.pmspace_used { color: var(--bg); background: var(--lime-deep); }
.pmspace_used.low { border: 1px solid var(--lime-deep); background: var(--lime); }
/* No danger token to borrow: medium and high are separated by weight, not hue. */
.pmspace_used.medium { background: var(--amber); border: 1px solid var(--amber); }
.pmspace_used.high { background: var(--amber); border: 1px solid var(--amber); box-shadow: 0 0 0 1px rgba(245, 185, 92, .6); }

.modqueue_controls { border: 1px solid var(--line); background: var(--surface); }
.modqueue_meta { color: var(--text-mute); }
.modqueue_mass li a:hover { background: var(--surface-2); border: 1px solid var(--line); }

ul.thread_tools li { background-image: none; padding-left: 0; }

/* 11. The icons, redrawn -----------------------------------------------------
   MyBB draws an unread forum, an unread thread and a poll bar with sprite
   images of dark glyphs, which on this background are close to invisible. Each
   becomes a shape in the theme's own colours, so there is no glyph to be
   washed out and no image file to ship.

   The four forum states are the exception to "a shape and nothing else": as
   tinted squares they told new posts from no new posts by hue alone, and a
   closed forum from a redirect not at all. Each carries a glyph now - the
   mark's envelope and key, and an arrow for the one state the mark has no
   opinion about - so the states differ in shape as well as colour. The marks
   are drawn in tools/forum-icons.php and arrive as masks, which is why they
   still cost no image file: a mask reads alpha, and the ink is a token. */
.forum_status {
  background-image: none;
  background-color: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  position: relative;            /* the glyph is placed against this box */
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}

/* The glyph, as a mask over the tile. A mask reads alpha and nothing else, so
   the drawing carries no colour of its own and every state inks it with a
   token. Transparent until a state names one: a .forum_status that arrived
   with no state class shows nothing rather than a solid block. */
.forum_status::before {
  content: "";
  position: absolute;
  inset: 3px;
  background-color: transparent;
  -webkit-mask-image: var(--ik-glyph);
  mask-image: var(--ik-glyph);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.forum_status:hover { border-color: rgba(184, 240, 74, .5); }
.forum_status.forum_on { background-color: rgba(184, 240, 74, .22); border-color: var(--lime); }
.forum_status.forum_off, .forum_offclose, .forum_offlink { background-color: var(--surface-2); }
/* Closed is the one state that has to shout. The palette's answer to that is
   amber - it has no red, and nothing here needs one. */
.forum_status.forum_offclose { background-color: rgba(245, 185, 92, .16); border-color: rgba(245, 185, 92, .5); }

/* forum-icons:begin — generated by tools/forum-icons.php; --check verifies it */

/* the mark: something to open */
.forum_status.forum_on::before {
  --ik-glyph: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzMiAzMicgZmlsbD0nbm9uZScgc3Ryb2tlPSd3aGl0ZScgc3Ryb2tlLXdpZHRoPScyLjYnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PHJlY3QgeD0nMS44JyB5PScxNS4yJyB3aWR0aD0nMTYuNCcgaGVpZ2h0PScxMy40JyByeD0nMi40Jy8+PHBhdGggZD0nTTMuNiAxNy40IDEwIDIyLjIgMTYuNCAxNy40Jy8+PGNpcmNsZSBjeD0nMjQuNCcgY3k9JzkuNicgcj0nNS42Jy8+PHBhdGggZD0nTTI0LjQgMTUuMnY2Jy8+PHBhdGggZD0nTTI0LjQgMTguOGgyLjQnLz48L3N2Zz4=);
  background-color: var(--lime);
}

/* the envelope: nothing new */
.forum_status.forum_off::before {
  --ik-glyph: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzMiAzMicgZmlsbD0nbm9uZScgc3Ryb2tlPSd3aGl0ZScgc3Ryb2tlLXdpZHRoPScyLjYnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PHJlY3QgeD0nNCcgeT0nOC40JyB3aWR0aD0nMjQnIGhlaWdodD0nMTcuMicgcng9JzIuOCcvPjxwYXRoIGQ9J002LjIgMTAuOCAxNiAxOC40IDI1LjggMTAuOCcvPjwvc3ZnPg==);
  background-color: var(--text-mute);
}

/* the key: closed (amber, since the palette has no red to shout with) */
.forum_status.forum_offclose::before {
  --ik-glyph: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzMiAzMicgZmlsbD0nbm9uZScgc3Ryb2tlPSd3aGl0ZScgc3Ryb2tlLXdpZHRoPScyLjYnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PGNpcmNsZSBjeD0nMTYnIGN5PScxMC42JyByPSc1LjcnLz48cGF0aCBkPSdNMTYgMTYuM3YxMS4yJy8+PHBhdGggZD0nTTE2IDIxLjNoMy43Jy8+PHBhdGggZD0nTTE2IDI1LjZoMy43Jy8+PC9zdmc+);
  background-color: var(--amber);
}

/* the arrow: points somewhere else */
.forum_status.forum_offlink::before {
  --ik-glyph: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzMiAzMicgZmlsbD0nbm9uZScgc3Ryb2tlPSd3aGl0ZScgc3Ryb2tlLXdpZHRoPScyLjYnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PHBhdGggZD0nTTYuMiAxNmgxNi42Jy8+PHBhdGggZD0nTTE3LjQgOS44IDIzLjYgMTZsLTYuMiA2LjInLz48L3N2Zz4=);
  background-color: var(--cyan);
}

/* forum-icons:end */

.subforumicon {
  background-image: none;
  background-color: var(--text-mute);
  border-radius: 50%;
  width: 7px;
  height: 7px;
}

.subforumicon.subforum_minion { background-color: var(--lime); }

.thread_status {
  background-image: none;
  background-color: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 4px;
}

/* The state names are read off the class rather than listed: MyBB has
   seventeen of them, they carry the noun for the state, and a new one should
   not need this file edited. */
.thread_status[class*="new"] { background-color: rgba(184, 240, 74, .22); border-color: var(--lime); }
.thread_status[class*="hot"] { background-color: rgba(184, 240, 74, .38); border-color: var(--lime); }
.thread_status[class*="close"] { border-style: dashed; border-color: var(--text-mute); }

.quick_jump { background-image: none; padding-left: 0; }

.pollbar {
  background: linear-gradient(90deg, var(--lime-deep), var(--lime));
  border: 1px solid var(--line);
  border-radius: 999px;
  height: 10px;
}

.poll_votedfor { background: var(--surface-2); border-color: var(--line-soft); }

/* Three of MyBB's icons are files rather than sprites, so there is nothing to
   override and no shape to draw in their place: the collapse control in a
   category header, the little chevron between breadcrumb links, and the arrow
   that jumps to a first unread post. They are mid-grey glyphs on transparent,
   which is barely visible on white and invisible here. Flattening them to white
   and dimming them keeps the glyphs, and leaves the file where it is. */
.expander,
img[src$="nav_bit.png"],
img[src$="jump.png"] {
  filter: brightness(0) invert(1);
  opacity: .6;
}

/* The star sprite is gold on transparent and survives the dark well enough to
   leave alone; only the empty half of it is dim. */

/* 12. Interstitials MyBB draws itself ---------------------------------------- */
.jGrowl .jGrowl-notification.jgrowl_success { background: var(--surface); border: 1px solid var(--lime); color: var(--text); }
.jGrowl .jGrowl-notification.jgrowl_error { background: var(--surface); border: 1px solid var(--amber); color: var(--text); }
.jGrowl .jGrowl-notification.jgrowl_process, .jGrowl .jGrowl-closer { background: var(--surface-2); border: 1px solid var(--line); color: var(--text); }
.jGrowl-notification { box-shadow: var(--shadow-lg); }
.modal-spinner { background-color: var(--surface); }

/* 13. Small screens ----------------------------------------------------------
   The stock theme is a 990px board. The wrapper is fluid above; what is left
   is the two-column post layout, which does not fit a phone, and the padding
   that a wide board can afford and a narrow one cannot. */
@media (max-width: 760px) {
  .wrapper { width: calc(100% - 1.25rem); }
  #content { padding: 14px 6px; }
  #logo { padding: 10px 0; }
  #logo img { height: 34px; }
  .post.classic .post_author { float: none; width: auto; margin: 0 0 .6rem; border-left: 1px solid var(--line); }
  .post.classic .post_content { float: none; width: auto; }
  .post .post_author div.author_avatar { float: none; text-align: center; }
  .post_body { font-size: 13px; }
}

/* 14. Reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  button, input.button, a.button:link, .forum_status {
    transition: none !important;
    transform: none !important;
  }
  button:hover, input.button:hover, a.button:hover { transform: none !important; }
}