/* ==UserStyle==
@name         Better AO3 Tags and Fonts
@namespace    https://github.com/nyxmidnight
@description  A user stylesheet to make tags stand out more and enable better font choices on ArchiveOfOurOwn.org
@version      2.0.3
@author       Nyx Midnight (https://nyx.zone)
@homepageURL  https://github.com/nyxmidnight/ao3tagsfonts
@supportURL   https://github.com/nyxmidnight/ao3tagsfonts/issues
@license      CC0
@preprocessor default

@var select ui-font "Site interface font" ["system-ui", "Segoe UI*", "Arial", "Helvetica Neue", "Lato", "Noto Sans", "OpenDyslexic", "Open Sans", "Roboto", "Trebuchet", "Ubuntu", "Verdana", "sans-serif"]
@var select summary-font "Work summary font" ["Arial", "Helvetica Neue", "Lato", "Noto Sans", "OpenDyslexic", "Open Sans", "Roboto", "Trebuchet MS", "Ubuntu", "Verdana*", "sans-serif"]
@var select story-font "Story body font" ["Arial", "Helvetica Neue", "Lato", "Noto Sans", "OpenDyslexic", "Open Sans", "Roboto", "Trebuchet MS", "Ubuntu", "Verdana*", "sans-serif"]
@var select article-font "News and docs font" ["Arial", "Helvetica Neue", "Lato", "Noto Sans", "OpenDyslexic", "Open Sans", "Roboto", "Trebuchet MS", "Ubuntu", "Verdana*", "sans-serif"]
==/UserStyle== */
@-moz-document domain("archiveofourown.org")
{

  /* Dark theme compatibility to work with https://github.com/cicerakes/DarkNight-AO3 */
  /*:root {
    --ath-override-theme: "dark";
    --ath-override-box-border-color: #444;
    --ath-override-box-shadow-color: transparent;
    --ath-override-interface-font-color: #ccc;
    --ath-override-required-tag-font-color: #ccc;
    --ath-override-gray-text-color: #777;
    --ath-override-tag-font-color: #eee;
    --ath-override-tag-default-light: 25%;
    --ath-override-tag-default-border-light: 15%;
    --ath-override-tag-highlight-light: 45%;
    --ath-override-tag-highlight-border-light: 25%;
    --ath-override-tag-freeform-light: 35%;
  }*/
  :root
  {
    /* Light theme */
    --box-border-color: var(--ath-override-box-border-color, #bbb);
    --box-shadow-color: var(--ath-override-box-shadow-color, rgba(0, 0, 8, 0.2));
    /* Fonts */
    --normal-font-weight: 400;
    /* Interface: generic body font */
    --interface-font-size: 14px;
    --interface-font-color: var(--ath-override-interface-font-color, #222);
    /* Summary: Summary and notes on work page */
    --summary-font-size: 14px;
    --summary-title-font-size: 16px;
    /* Story: Fanfiction body text */
    --story-font-size: 16px;
    --story-width: 45em;
    /* Article: News, documentation and FAQ, admin area */
    --article-font-size: 14px;
    --article-width: 65em;
    /* Required Tags: the 4 squares */
    --required-tag-font-size: 10px;
    --required-tag-font-color: var(--ath-override-required-tag-font-color, #000);
    --required-tag-width: 80px;
    --required-tag-icon-width: 25px;
    /* Tag: work tags */
    --tag-font-size: 13px;
    --tag-width: 28em;
    /* idk */
    --gray-text-color: #888;
    /* Tags */
    --tag-font-color: var(--ath-override-tag-font-color, #000);
    /* Colours in HSL format */
    --tag-default-hue: 0;
    --tag-default-sat: 40%;
    --tag-default-light: var(--ath-override-tag-default-light, 85%);
    --tag-default-border-light: var(--ath-override-tag-default-border-light, 70%);
    --tag-highlight-sat: 50%;
    --tag-highlight-light: var(--ath-override-tag-highlight-light, 75%);
    --tag-highlight-border-light: var(--ath-override-tag-highlight-border-light, 60%);
    --tag-freeform-sat: 0%;
    --tag-freeform-light: var(--ath-override-tag-freeform-light, 92%);
    --tag-warning-hue: 0;
    --tag-relationship-hue: 180;
    --tag-character-hue: 60;
  }

  /* Fonts */
  .dropdown,
  .dynamic form,
  .secondary,
  .toggled form,
  body
  {
    font-family: var(--ui-font) !important;
    font-size: var(--interface-font-size) !important;
    font-weight: var(--normal-font-weight);
    color: var(--interface-font-color) !important;
  }

  blockquote,
  pre
  {
    font-family: var(--summary-font) !important;
    font-size: var(--summary-font-size) !important;
    font-weight: var(--normal-font-weight);
  }

  #main
  {
    font-size: inherit !important;
  }

  .admin,
  .docs,
  .news
  {
    font-size: var(--article-font-size) !important;
    font-family: var(--article-font) !important;
    font-weight: var(--normal-font-weight);
    max-width: var(--article-width);
  }

  #workskin
  {
    font-size: var(--story-font-size) !important;
    font-family: var(--story-font) !important;
    font-weight: var(--normal-font-weight);
    max-width: var(--story-width);
  }

  #workskin *
  {
    font-family: inherit !important;
  }

  form p.footnote
  {
    line-height: 1.5 !important;
  }

  /* FIX: Contrast of Last Viewed footer of Marked For Later works on the index page was too low */
  .reading h4.viewed
  {
    background-color: #bbb !important;
    color: #222;
  }

  /* Alphabet: proper columns */
  .alphabet .listbox .index
  {
    columns: calc(var(--tag-width) + 40px);
  }

  .alphabet .listbox .index li
  {
    display: block !important;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
  }

  /* Work block: border */
  .blurb
  {
    padding: 5px 10px !important;
    border: solid 1px var(--box-border-color) !important;
    border-radius: 10px;
    box-shadow: 2px 2px 4px 0 var(--box-shadow-color) !important;
  }

  .blurb blockquote
  {
    text-align: left !important;
  }

  .blurb .notice
  {
    box-shadow: none !important;
    display: inline-block;
  }

  /* Work block: hide accessibility labels */
  .blurb .landmark
  {
    display: none !important;
  }

  /* Work block: expand icons of required tags & bookmark symbols and show descriptions */
  .blurb .required-tags
  {
    display: flex !important;
    flex-direction: column;
    flex-wrap: wrap;
    height: 60px;
  }

  .blurb .required-tags li,
  .required-tags .text,
  .required-tags a
  {
    position: static !important;
    width: auto !important;
  }

  .blurb .required-tags li
  {
    width: calc(var(--required-tag-width) + var(--required-tag-icon-width)) !important;
  }

  .blurb .required-tags li a > span
  {
    position: relative !important;
  }

  .blurb .required-tags li a > span .text
  {
    position: absolute !important;
    left: 25px;
    top: 0;
  }

  .blurb .required-tags li a > span .text,
  .blurb .status a.symbol span .text,
  .blurb .status::after
  {
    display: table-cell !important;
    width: var(--required-tag-width) !important;
    padding: 0 3px;
    vertical-align: middle;
    font: inherit !important;
    font-weight: var(--normal-font-weight) !important;
    font-size: var(--required-tag-font-size) !important;
    line-height: calc(var(--required-tag-font-size) + 2px) !important;
    color: var(--required-tag-font-color) !important;
    overflow: hidden;
  }

  .blurb .status
  {
    display: flex !important;
    width: calc((var(--required-tag-width) + var(--required-tag-icon-width)) * 2) !important;
  }

  .blurb .status a.symbol
  {
    width: calc(var(--required-tag-width) + var(--required-tag-icon-width)) !important;
  }

  .blurb .status a.symbol span
  {
    position: relative;
  }

  .blurb .status a.symbol span .text
  {
    left: var(--required-tag-icon-width);
  }

  .blurb .status a.symbol span.rec .text::after
  {
    /*Rec*/
    content: "ommended bookmark";
  }

  .blurb .status .count
  {
    position: static !important;
  }

  .blurb .status::after
  {
    content: attr(title);
  }

  /* Work block: header */
  .blurb .heading
  {
    font-size: var(--summary-font-size) !important;
    font-family: inherit !important;
    color: var(--gray-text-color);
  }

  /* Move the title and the fandom away from the required tags block for: bookmarks, series, works, prompts */
  .blurb.bookmark .heading,
  .blurb.group .heading,
  .blurb.series .heading,
  .blurb.work .heading
  {
    margin-left: calc((var(--required-tag-width) + var(--required-tag-icon-width)) * 2 + 10px) !important;
  }

  .blurb h4.heading a
  {
    border: none !important;
  }

  .blurb h4.heading a:first-child
  {
    border: none !important;
    font-size: var(--summary-title-font-size) !important;
    padding: 0 10px 0 0;
  }

  .blurb h4.heading a:hover
  {
    text-decoration: underline;
  }

  /* FIXED: spacing for bookmark icons labels and the "Bookmarked by" text */
  .bookmark .short .header h5
  {
    margin-left: 120px !important;
  }

  .blurb h5.fandoms .tag
  {
    margin: 1px 3px 0 0 !important;
  }

  .blurb .datetime
  {
    font-size: var(--summary-font-size) !important;
    font-family: inherit !important;
  }

  /* Work block: footer */
  .blurb .stats dt
  {
    font: var(--interface-font-size) var(--ui-font) !important;
    color: var(--gray-text-color);
  }

  /* Work block: bookmark footer */
  .blurb .user
  {
    display: flex;
    flex-wrap: wrap;
    width: auto !important;
    margin: 0 -10px -5px -10px !important;
    padding: 5px 0;
    border: none !important;
    border-top: solid 1px var(--box-border-color) !important;
    border-radius: 0 0 10px 10px;
  }

  .blurb .user *:not(.notes),
  .blurb .user *:not(.notes)::before
  {
    line-height: 1.4 !important;
    font-size: var(--summary-font-size) !important;
    font-family: inherit !important;
    vertical-align: top !important;
  }

  .blurb .user .heading:not(.landmark)
  {
    margin: 2px 10px !important;
  }

  .blurb .user .datetime
  {
    right: 10px !important;
  }

  .blurb .user blockquote
  {
    flex: 100%;
    margin: 2px 10px !important;
  }

  .blurb .user .meta.heading
  {
    display: none !important;
  }

  .blurb .user .meta.commas.tags::before
  {
    content: "with ";
    color: var(--gray-text-color);
    vertical-align: middle !important;
    margin: 0 0 0 5px !important;
  }

  .blurb .user .meta.commas:not(.tags)::before
  {
    content: "to";
    color: var(--gray-text-color);
    margin: 0 0 0 5px !important;
  }

  .blurb .user .meta.commas:not(.tags)
  {
    margin: 2px 5px !important;
  }

  .blurb .user .actions
  {
    flex: 100%;
    text-align: right;
    margin: 0 10px 0 0;
  }

  /* Tags: no commas */
  .blurb .tags,
  .blurb h5.fandoms
  {
    font-size: 0 !important;
  }

  .blurb .tags *,
  .blurb h5.fandoms *
  {
    font-size: var(--tag-font-size) !important;
  }

  .warning,
  .warnings,
  .warnings strong
  {
    font-weight: normal;
  }

  .tags li::after
  {
    content: unset !important;
  }

  /* Tags: colored rounded rectangles */
  .tag:not(.index):not(.profile)
  {
    --tag-hue: var(--tag-default-hue);
    --tag-sat: var(--tag-freeform-sat);
    --tag-light: var(--tag-freeform-light);
    --tag-border-light: var(--tag-default-border-light);
    display: inline-block;
    color: var(--tag-font-color) !important;
    background: hsl(var(--tag-hue), var(--tag-sat), var(--tag-light)) !important;
    border: solid 1px hsl(var(--tag-hue), var(--tag-sat), var(--tag-border-light)) !important;
    border-radius: 4px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    max-width: var(--tag-width);
    margin: 2px 0 !important;
    padding: 0 4px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
  }

  .tag:not(.index):not(.profile):hover
  {
    --tag-light: var(--tag-highlight-light);
    --tag-border-light: var(--tag-highlight-border-light);
    color: var(--tag-font-color) !important;
  }

  .tags .warnings .tag,
  .tags.warning .tag
  {
    --tag-hue: var(--tag-warning-hue);
  }

  .tags .relationships .tag,
  .tags.relationship .tag
  {
    --tag-hue: var(--tag-relationship-hue);
  }

  .tags .characters .tag,
  .tags.character .tag
  {
    --tag-hue: var(--tag-character-hue);
  }

  .tags .characters .tag,
  .tags .relationships .tag,
  .tags .warnings .tag,
  .tags.character .tag,
  .tags.relationship .tag,
  .tags.warning .tag
  {
    --tag-sat: var(--tag-default-sat);
    --tag-light: var(--tag-default-light);
  }

  .tags .characters .tag:hover,
  .tags .relationships .tag:hover,
  .tags .warnings .tag:hover,
  .tags.character .tag:hover,
  .tags.relationship .tag:hover,
  .tags.warning .tag:hover
  {
    --tag-sat: var(--tag-highlight-sat);
  }
}