@font-face {
  font-family: "JLPT Serif";
  font-display: swap;
  src: url("./fonts/HaranoAjiMincho-Regular.otf") format("opentype");
}

@font-face {
  font-family: "JLPT Sans";
  font-display: swap;
  src: url("./fonts/HaranoAjiGothic-Regular.otf") format("opentype");
}

@font-face {
  font-family: "JLPT Sans";
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/HaranoAjiGothic-Bold.otf") format("opentype");
}

@font-face {
  font-family: "JLPT Sans";
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/HaranoAjiGothic-Medium.otf") format("opentype");
}

@font-face {
  font-family: "JLPT Hand";
  font-display: swap;
  src: url("./fonts/KleeOne-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "JLPT Question Number";
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/JLPTQuestionNumber.ttf") format("truetype");
}

:root {
  color-scheme: light dark;

  --font-family-serif: "JLPT Serif", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS Mincho", "MS PMincho", "Noto Serif JP", serif;
  --font-family-sans: "JLPT Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --font-family-hand: "JLPT Hand", "JLPT Serif", "Yu Mincho", "YuMincho", serif;
  --font-family-question-number: "JLPT Question Number", Arial, Helvetica, sans-serif;
  --font-family-system: system-ui, sans-serif;

  /*
    Unit convention: px for fixed reproduction/chrome sizes, em for text-relative Japanese spacing, mm for print
    page measurements.
  */
  --font-size-root: 15px;
  --font-size-title: 23px;
  --font-size-mondai-number: 17px;
  --font-size-large: 16px;
  --font-size-small: 14px;
  --font-size-answer-reveal: 13px;
  --font-size-source: 13px;
  --font-size-topbar: 13px;
  --font-size-kind-badge: 12px;
  --font-size-vertical-source: 12px;
  --font-size-confidence: 11px;
  --font-size-question-number: 11px;

  --line-height-exam: 2.13;
  --line-height-passage: 1.7;
  --line-height-memo-box: 1.72;
  --line-height-notes: 2;

  --color-text: rgb(0 0 0);
  --color-background: rgb(255 255 255);
  --color-question-number: rgb(35 31 32);
  --color-link: rgb(9 105 218);
  --color-muted: rgb(87 96 106);
  --color-success: rgb(46 160 67);
  --color-warning: rgb(210 153 34);
  --color-danger: rgb(207 34 46);
  --color-purple: rgb(130 80 223);
  --color-subtle: rgb(102 102 102);
  --color-rule: rgb(204 204 204);
  --color-topbar-background: rgb(251 252 253);
  --color-topbar-border: rgb(216 222 228);
  --color-order-reveal: rgb(26 122 49);

  --border-exam: 1px solid var(--color-text);
  --border-rule: 1px solid var(--color-rule);
  --border-question-number: 1px solid var(--color-question-number);

  --main-width: 736px;
  --main-padding-block: 40px;
  --main-padding-inline: 60px;
  --topbar-width: 850px;
  --topbar-content-width: calc(var(--topbar-width) - 2 * var(--main-padding-inline));
  --scroll-offset: 60px;
  --underline-offset: 3px;

  /*
    According to measurements of the official 2016-12 PDF, we have a base margin (from A4 page size) of:
    - top = 22.6mm
    - bottom = 24.0mm
    - left/right = 22.6mm/27.9mm alternating odd/even pages
    Then, 問題7 eats 4.4mm into the left/right margins, and 問題13 eats 6.1mm into them.

    Our simplification is 23mm base for all sides, with 6mm for 問題7 and 問題13. We do this by having the `@page`
    left/right margins be 17mm, adding 6mm padding to `main`, and then adding -6mm negative margin to those passages.
  */
  --print-margin: 23mm;
  --print-large-passage-extra-inline-inset: 6mm;
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --color-text: rgb(238 235 226);
    --color-background: rgb(18 18 16);
    --color-question-number: rgb(238 235 226);
    --color-link: rgb(118 190 255);
    --color-muted: rgb(166 160 151);
    --color-success: rgb(74 196 101);
    --color-warning: rgb(239 184 74);
    --color-danger: rgb(255 116 112);
    --color-purple: rgb(205 157 255);
    --color-subtle: rgb(154 148 139);
    --color-rule: rgb(78 78 72);
    --color-topbar-background: rgb(28 29 27);
    --color-topbar-border: rgb(70 72 68);
    --color-order-reveal: rgb(111 219 135);
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--font-size-root);
}

body {
  accent-color: var(--color-link);
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-family-serif);
  line-height: var(--line-height-exam);
}

main {
  max-width: var(--main-width);
  margin: 0 auto;
  padding: var(--main-padding-block) var(--main-padding-inline);
}

u {
  text-underline-offset: var(--underline-offset);
}

.anchor-link {
  color: inherit;
  cursor: pointer;
  text-decoration: none;

  &:is(:visited, :hover, :active) {
    color: inherit;
    text-decoration: none;
  }
}

ruby {
  --ruby-text-size: 0.5em;

  ruby-align: center;

  rt {
    font-size: var(--ruby-text-size);
    font-weight: normal;
    /*
      `text-indent` inherits into `rt`; reset it so indented passage paragraphs don't widen ruby layout.
      See https://bugzilla.mozilla.org/show_bug.cgi?id=2053351.
    */
    text-indent: 0;
    white-space: nowrap;
  }

  rt.compressed-ruby > .compressed-ruby-text {
    display: inline-block;
    margin-inline: calc((var(--ruby-scale) - 1) * var(--ruby-length) * var(--ruby-text-size));
    transform: scaleX(var(--ruby-scale));
    transform-origin: center;
  }
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  padding: 9px max(var(--main-padding-inline), calc((100% - var(--topbar-content-width)) / 2));
  background: var(--color-topbar-background);
  border-bottom: 1px solid var(--color-topbar-border);
  font-family: var(--font-family-system);
  font-size: var(--font-size-topbar);

  .home {
    color: var(--color-link);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
  }
}

.topbar-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sitting-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  color: var(--color-muted);

  a {
    color: var(--color-link);
  }
}

.kind-badge {
  border-radius: 999px;
  padding: 1px 10px;
  font-size: var(--font-size-kind-badge);
}

.source-re-typeset {
  background: rgb(from var(--color-muted) r g b / 0.12);
  border: 1px solid rgb(from var(--color-muted) r g b / 0.35);
}

.source-recall-reconstruction {
  background: rgb(from var(--color-purple) r g b / 0.14);
  border: 1px solid rgb(from var(--color-purple) r g b / 0.42);
}

.source-booklet-scan {
  background: rgb(from var(--color-success) r g b / 0.16);
  border: 1px solid rgb(from var(--color-success) r g b / 0.45);
}

.source-official-publication {
  background: rgb(from var(--color-link) r g b / 0.14);
  border: 1px solid rgb(from var(--color-link) r g b / 0.42);
}

.exam-selector {
  padding: 8px 12px;
  border: var(--border-rule);
  border-radius: 4px;
  background: var(--color-background);
  color: var(--color-text);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--font-size-root);
}

.answer-toggle {
  cursor: pointer;
  font-size: var(--font-size-small);
  user-select: none;

  input {
    margin-right: 0.4em;
  }
}

.exam-title {
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: var(--border-rule);
  text-align: center;

  h1 {
    margin-bottom: 10px;
    font-size: var(--font-size-title);
  }

  .subtitle {
    color: var(--color-subtle);
    font-size: var(--font-size-small);
  }
}

:is(.mondai, .question, .passage-group) {
  scroll-margin-top: var(--scroll-offset);
}

.mondai {
  &:not(:first-of-type) {
    break-before: page;
  }

  &:first-of-type {
    .mondai-header {
      margin-top: 0;
    }
  }
}

.mondai-header {
  display: flex;
  align-items: baseline;
  margin: 55px 0 35px;
  font-family: var(--font-family-sans);
  font-feature-settings: "hwid"; /* seems to match the PDFs better */
  font-weight: 500;
  line-height: var(--line-height-exam);
  text-spacing-trim: trim-start;
}

.mondai-number {
  flex-shrink: 0;
  margin-right: 2px;
  font-size: var(--font-size-mondai-number);
}

.mondai-instruction {
  text-indent: 1em;
  word-break: auto-phrase;

  .blank {
    display: inline-block;
    width: 4em;
    margin: 0 0.1em;
    border-bottom: var(--border-exam);
  }
}

.question {
  margin: 30px 0;
  break-inside: avoid;

  > div:first-child {
    display: flex;
    align-items: baseline;
  }
}

.question-number {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 24px;
  block-size: 16px;
  border: var(--border-question-number);
  color: var(--color-question-number);
  font-family: var(--font-family-question-number);
  font-size: var(--font-size-question-number);
  font-weight: 700;
  font-synthesis: none;
  line-height: 1;
}

.question-text {
  flex: 1;
  text-indent: 1em;

  table {
    border-collapse: collapse;
    margin: 0.6em 0;
    font-size: var(--font-size-small);

    th,
    td {
      border: var(--border-exam);
      padding: 3px 8px;
    }

    &.memo-box {
      font-family: var(--font-family-hand);
      font-size: var(--font-size-large);
      line-height: var(--line-height-memo-box);
    }
  }
}

.answers {
  display: grid;
  margin: 6px 3.5em 12px 1.5em;

  &.grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  &.grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  &.grid-1 {
    grid-template-columns: 1fr;
    margin-right: 0;
  }
}

.answer {
  display: flex;
  align-items: baseline;
  gap: 18px;

  &.correct {
    border-radius: 4px;
  }
}

.answer-number {
  flex-shrink: 0;
  min-width: 1em;
}

.blank-slot {
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
  white-space: pre;
}

.cloze-box {
  display: inline-grid;
  place-items: center;
  inline-size: 46px;
  block-size: 23px;
  margin-inline: 7px;
  border: var(--border-exam);
  font-family: var(--font-family-question-number);
  font-size: var(--font-size-question-number);
  font-weight: 700;
  font-synthesis: none;
  line-height: 1;
  text-indent: 0;
  vertical-align: 0.15em;
}

.keep-together {
  white-space: nowrap;
}

.passage-group {
  &:not(#mondai11passage1, #mondai11passage2, :last-of-type) {
    break-after: page;
  }
}

.passage {
  display: block;
  margin: 18px 0 8px;

  p {
    text-indent: 1em;
  }

  table {
    border-collapse: collapse;
    margin: 0.8em auto;
    font-size: var(--font-size-small);

    th,
    td {
      padding: 4px 10px;
      border: var(--border-exam);
      text-align: left;
    }

    th {
      background: rgb(from var(--color-text) r g b / 0.05);
    }
  }

  .passage-title {
    display: block;
    margin: 0 0 1.2em;
    text-align: center;
  }
}

.passage-boxed {
  margin: 8px 0 25px;
  padding: 10px 8px;
  border: var(--border-exam);
}

.passage-vertical {
  height: 410px;
  margin-block: auto;
  padding: 14px 12px;
  writing-mode: vertical-rl;

  p {
    text-indent: 0;
  }

  .passage-source-in-box {
    margin: 0;
    font-size: var(--font-size-vertical-source);
    line-height: 1.75;
    text-align: end;
  }
}

.passage-lead-in {
  display: block;
  margin: 0 0 8px 1.7em;
}

.passage-source,
.passage-source-in-box {
  text-align: right;
  font-size: var(--font-size-source);
  line-height: var(--line-height-passage);
}

.passage-source {
  margin: 2px 0 22px;
}

.passage-source-in-box {
  margin-top: 1em;
}

.passage-notes {
  margin: 8px 0 22px;
  line-height: var(--line-height-notes);
}

.passage-label {
  display: block;
  margin: 28px 0 6px 0.2em;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-large);
  font-weight: bold;
}

.passage-counter {
  display: block;
  margin: 30px 0 0;
  font-family: var(--font-family-sans);
}

#mondai7 {
  .lead-in {
    display: block;
    margin: 0 0 0 1.7em;
  }

  .passage {
    margin-block: 12px 6px;
    margin-inline: -9px;
    padding: 30px 14px 24px;
    border: 2px solid var(--color-text);
    line-height: var(--line-height-passage);

    .title,
    .byline {
      text-align: center;
    }

    .title {
      display: block;
      margin: 0 0 1.8em;
    }

    .byline {
      margin: 0 0 1.8em;
      font-size: var(--font-size-small);
    }

    .title + .byline {
      margin-top: -1.4em;
    }
  }

  .source {
    margin: 2px 0 26px;
    text-align: right;
    font-size: var(--font-size-source);
    line-height: var(--line-height-passage);
  }

  .notes {
    margin: 26px 0;
    line-height: var(--line-height-notes);
  }

}

#mondai13 {
  .passage {
    margin-inline: max(-20px, calc(-1 * var(--main-padding-inline)));
    break-before: page;
    line-height: 1.8;

    table {
      th,
      td {
        text-align: center;
      }
    }
  }
}

.answer-only {
  display: none;
}

.order-reveal {
  margin: 4px 0 0 2.8em;
  color: var(--color-order-reveal);
  font-size: var(--font-size-answer-reveal);
}

.confidence-badge {
  display: none;
  margin-left: 0.6em;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: sans-serif;
  font-size: var(--font-size-confidence);
  vertical-align: middle;
}

.confidence-medium {
  background: rgb(from var(--color-warning) r g b / 0.25);
}

.confidence-low,
.confidence-unresolved {
  background: rgb(from var(--color-danger) r g b / 0.25);
}

body.show-answers {
  .answer.correct {
    background: rgb(from var(--color-success) r g b / 0.18);
    outline: 2px solid rgb(from var(--color-success) r g b / 0.55);
    outline-offset: 1px;
  }

  .answer-only {
    display: block;
  }

  .confidence-badge {
    display: inline-block;
  }
}

@media (max-width: 700px) {
  :root {
    --main-padding-block: 20px;
    --main-padding-inline: 15px;
  }

  main {
    padding: var(--main-padding-block) var(--main-padding-inline);
  }

  .topbar {
    padding: 9px var(--main-padding-inline);
  }

  .answers.grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .question-text {
    table.memo-box {
      font-size: 12px;
      line-height: 1.65;
    }
  }

  #mondai13 {
    .passage {
      table {
        inline-size: 100%;
        table-layout: fixed;
        font-size: 11px;
        line-height: 1.45;

        th,
        td {
          padding: 2px;
        }
      }
    }
  }
}

@page {
  size: A4;
  margin: var(--print-margin) calc(var(--print-margin) - var(--print-large-passage-extra-inline-inset));
}

@media print {
  .topbar {
    display: none;
  }

  main {
    max-width: none;
    padding: 0 var(--print-large-passage-extra-inline-inset);
  }

  #mondai7,
  #mondai13 {
    .passage {
      margin-inline: calc(-1 * var(--print-large-passage-extra-inline-inset));
    }
  }
}