/* Squares */

@layer layout {
  .square {
    position: relative;
    width: 100%;
  }

  .square::after {
    content: "";
    display: block;
    padding-bottom: 100%;
  }

  .square-content {
    position: absolute;
    width: 100%;
    height: 100%;
  }
}

/* Utility spans */

@layer print {
  .nowrap {
    white-space: nowrap;
  }

  .blockwrap, .chunkwrap {
    display: inline-block;
  }

  p .current {
    font-weight: 800;
  }

  .js-hide,
  .js-show-once-data,
  .js-hide-once-data {
    display: none;
  }
}

/* Totally miscellaneous typography */

@layer layout {
  dl dt {
    padding-left: 40px;
  }

  dl dt {
    /* Heads up, this affects the measurement
     * for dl dt which are .content-heading!
     */
    margin-bottom: 2px;
  }

  dl dt[id]:not(.content-heading) {
    --custom-scroll-offset: calc(2.5em - 2px);
  }

  dl dd {
    margin-bottom: 1em;
  }

  dl ul,
  dl ol {
    margin-top: 0;
    margin-bottom: 0;
  }

  li .origin-details {
    display: block;
    margin-left: 2ch;
  }

  li > ul {
    margin-top: 5px;
  }
}

@layer print {
  center {
    margin-top: 1em;
    margin-bottom: 1em;
  }

  .flash-act-title {
    display: inline-block;
    text-decoration: inherit;
  }

  a .flash-act-title {
    color: var(--primary-color);
  }

  .other-group-accent,
  .rerelease-line {
    opacity: 0.7;
    font-style: oblique;
  }

  .other-group-accent {
    white-space: nowrap;
  }

  .other-group-accent a {
    color: var(--page-primary-color);
  }

  dt .by, li .by {
    font-style: oblique;
  }

  dt .by a, li .by a {
    display: inline-block;
  }

  p code {
    font-size: 0.95em;
    font-family: "courier new", monospace;
    font-weight: 800;
    line-height: 1.1;
  }

  /* "has-details" means a "has a <details> element" here. */
  ul > li.has-details {
    list-style-type: none;
    margin-left: -17px;
  }

  li .origin-details {
    font-size: 0.9em;
    font-style: oblique;
  }
}

/* Ordinary links */

@layer print {
  a {
    color: var(--primary-color);
    text-decoration: none;
  }

  a.current {
    font-weight: 800;
  }

  a.series {
    font-style: oblique;
  }

  a:not([href]) {
    cursor: default;
  }

  a:not([href]):hover {
    text-decoration: none;
  }
}

@Layer interaction {
  /* This is an !important rule because it's really applicable
   * pretty much anywhere, but the selector specificity is lower
   * than most selectors which, say, add a dotted underline to
   * begin with - those would take cascading priority.
   *
   * Similarly, this rule has to live in the interaction layer,
   * because that's where other underline hover cues are set.
   * If we set set it any higher (e.g. in print) the !important
   * takes universal priority over !important's set in deeper
   * layers - like interaction.
   */
  a:hover {
    text-decoration: underline;
    text-decoration-style: solid !important;
  }
}

/* Links with symbols */

@layer print {
  a .normal-content {
    color: white;
  }

  .external-link:not(.from-content) {
    white-space: nowrap;
  }

  .external-link.indicate-external::after {
    content: '\00a0➚';
    font-style: normal;
  }

  .external-link.indicate-external:hover::after {
    color: white;
  }

  .image-media-link::after {
    /* Thanks to Jay Freestone for being awesome:
     * https://www.jayfreestone.com/writing/wrapping-and-inline-pseudo-elements/
     */

    pointer-events: none;
    content: '\200b';
    padding-left: 22px;

    background-color: var(--primary-color);

    /* mask-image is set in content JavaScript,
     * because we can't identify the correct nor
     * absolute path to the file from CSS.
     */

    mask-repeat: no-repeat;
    mask-position: calc(100% - 2px);
  }

  .image-media-link:hover::after {
    background-color: white;
  }
}

/* Label elements */

@layer interaction {
  label:hover span {
    text-decoration: underline;
    text-decoration-style: solid;
  }

  label > input[type=checkbox]:not(:checked) + span {
    opacity: 0.8;
  }
}

/* Progress elements */

@layer material {
  progress {
    accent-color: var(--primary-color);
  }
}

/* Code blocks */

@layer print {
  pre.content-code {
    position: relative;
    white-space: nowrap;

    max-width: calc(100vw - 180px);

    /* Welcome to heck. */
    font-family: inherit;

    border: 1px dashed var(--primary-color);
  }

  pre.content-code span {
    display: block;
    overflow-x: scroll;
    padding: 5px 20px 5px 5px;
    background: black;
    color: white;
  }

  pre.content-code::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    box-shadow: -15px 0 24px -8px black inset;
    pointer-events: none;
  }

  pre.content-code code {
    font-family: "courier new", monospace;
    font-weight: 800;
    font-size: 0.8em;
  }
}

/* HR elements, of various flavors */

@layer print {
  #content hr {
    border: 1px inset #808080;
  }

  #content hr.split {
    color: #808080;
  }

  #content hr.split::before {
    content: "(split)";
  }

  #content hr.main-separator {
    color: var(--dim-color);
    clear: none;
    margin-top: -0.25em;
    margin-bottom: 1.75em;
  }

  #content hr.main-separator::before {
    content: "♦";
    font-size: 1.2em;
  }

  #content hr.split,
  #content hr.main-separator {
    position: relative;
    overflow: hidden;
    border: none;
  }

  #content hr.split::after,
  #content hr.main-separator::after {
    display: inline-block;
    content: "";
    width: calc(100% - min(calc(8vw - 35px), 45px));
    position: absolute;
    top: 50%;
    margin-left: 10px;
  }

  #content hr.split::after {
    border: 1px inset currentColor;
    margin-top: -2px;
  }

  #content hr.main-separator::after {
    border-bottom: 1px solid currentColor;
  }

  hr.cute,
  #content hr.cute,
  .sidebar hr.cute {
    border-color: var(--primary-color);
    border-style: none none dotted none;
  }
}

/* Images and media embedded right into content, effects */

@layer layout {
  a.align-center, img.align-center,
  audio.align-center, video.align-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  a.align-full, a.align-full img,
  img.align-full, video.align-full {
    width: 100%;
  }

  .content-image {
    display: inline-block !important;
  }
}

@layer material {
  img.pixelate, .pixelate img,
  video.pixelate, .pixelate video {
    image-rendering: crisp-edges;
  }
}

@layer print {
  p > img, li > img {
    max-width: 100%;
    object-fit: contain;
    height: auto;
    vertical-align: text-bottom;
  }
}

/* Paths and filenames */

@layer print {
  span.path, code.filename {
    font-size: 0.95em;
    font-family: "courier new", monospace;
    font-weight: 800;
    background: #ccc3;

    padding: 0.05em 0.5ch;
    border: 1px solid #ccce;
    border-radius: 2px;
    line-height: 1.4;
  }

  blockquote :is(span.path, code.filename) {
    font-size: 0.9em;
  }

  .image-details code.filename {
    margin-left: -0.4ch;
    opacity: 0.8;
  }

  .image-details code.filename:hover {
    opacity: 1;
    cursor: text;
  }

  span.path i {
    display: inline-block;
    font-style: normal;
  }

  span.path i::before {
    content: "\0020/\0020";
    color: #ccc;
  }
}

/* Spoiler elements */

@layer print {
  s.spoiler {
    display: inline-block;
    color: transparent;
    text-decoration: underline;
    text-decoration-color: white;
    text-decoration-style: dashed;
    text-decoration-skip: none;
    text-decoration-skip-ink: none;
  }

  s.spoiler::selection {
    color: black;
    background: white;
  }

  s.spoiler::-moz-selection {
    color: black;
    background: white;
  }
}

/* Summary elements */

@layer print {
  summary > span b {
    font-weight: normal;
    color: var(--primary-color);
  }

  summary > span:hover {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: var(--primary-color);
  }

  summary > span:hover a {
    text-decoration: none !important;
  }

  summary > span:hover:has(a:hover),
  summary > span:hover:has(a.nested-hover),
  summary.has-nested-hover > span {
    text-decoration: none !important;
  }

  summary > span:hover:has(a:hover) a,
  summary > span:hover:has(a.nested-hover) a,
  summary.has-nested-hover > span a {
    text-decoration: underline !important;
  }

  summary.underline-white > span:hover {
    text-decoration-color: white;
  }

  /* This link isn't supposed to be underlined *at all*
   * when the summary (and not link) is hovered, but
   * for some reason Safari is still applying its colored
   * and dotted(!) underline. Get around the apparent
   * effect by just making it white.
   */
  summary.underline-white > span:hover a:not(:hover) {
    text-decoration-color: white;
  }
}

/* "Drops" */

@layer layout {
  .drop {
    padding: 15px 20px;
    width: max-content;
    max-width: min(60vw, 600px);
  }

  .commentary-drop {
    margin-top: 25px;
    margin-bottom: 15px;
    margin-left: 20px;
    padding: 10px 20px;
    max-width: min(60vw, 300px);
  }
}

@layer material {
  .drop {
    border: 1px dotted var(--primary-color);
    border-radius: 6px;

    background:
      linear-gradient(var(--bg-color), var(--bg-color)),
      linear-gradient(#000000bb, #000000bb),
      var(--primary-color);

    --drop-shadow: 0 -2px 6px -1px var(--dim-color) inset;
    box-shadow: var(--drop-shadow);
  }
}

@layer interaction {
  .drop.shiny {
    cursor: default;
  }

  @supports (box-shadow: 1px 1px 1px color-mix(in srgb, blue, 40% red)) {
    @property --drop-shine {
      syntax: '<percentage>';
      initial-value: 0%;
      inherits: false;
    }

    .drop.shiny {
      cursor: default;
      transition: --drop-shine 0.2s;
    }

    .drop.shiny:hover {
      --drop-shine: 100%;

      box-shadow:
        var(--drop-shadow),
        0 2px 4px -0.5px color-mix(in srgb, var(--primary-color), calc(100% - var(--drop-shine)) transparent);
    }
  }
}

/* Track sections, and similar */

@layer layout {
  .album-group-list dt,
  .group-series-list dt {
    padding-left: 0;
  }

  .album-group-list dd,
  .group-series-list dd {
    margin-left: 0;
  }

  .album-group-list li {
    padding-left: 1.5ch;
    text-indent: -1.5ch;
  }

  .album-group-list li > * {
    text-indent: 0;
  }

  .album-group-list blockquote,
  .group-series-list blockquote {
    max-width: 540px;
    margin-bottom: 9px;
    margin-top: 3px;
  }

  .album-group-list blockquote p:first-child,
  .group-series-list blockquote p:first-child {
    margin-top: 0;
  }

  .album-group-list blockquote p:last-child,
  .group-series-list blockquote p:last-child {
    margin-bottom: 0;
  }
}

@layer print {
  .album-group-list dt,
  .group-series-list dt {
    font-style: oblique;
  }
}