@layer base, page_style, theme;

@import url("../font/RoundedMgen+1pp.css") layer(base);
@import url("../font/RoundedMgen+1m.css") layer(base);
@import url("../font/NotoSansCJKjp.css") layer(base);
@import url("../font/NotoSerifCJKjp.css") layer(base);

@import url("calc_theme.css");

@layer base {
  @media not print {
    :root {
      font-size: 18px;
    }
    body > div.contents {
      border: 1px solid var(--color-0-g2);
    }
  }

  @media print {
    :root {
      font-size: 12px;
    }

    body {
      & > div.contents {
        border: none;
      }
      #tools, #toc, .location, .app_ui, div.footer {
        display: none;
      }
    }
  }

  :root {
    --fonts-sans: "Noto Sans CJK", sans-serif;
    --fonts-serif: "Noto Serif CJK", serif;
    --fonts-maru: "Rounded Mgen+ 1pp", ui-rounded, monospace;
    --fonts-mono: "Rounded Mgen+ 1m", monospace;
    --fonts-aa: "Courier New", "Consolas", "MS Gothic", "Noto Sans CJK", system-ui, monospace;

    scrollbar-color: var(--color-0-t2) var(--color-0-t0);
    margin: 0px;
    line-height: calc(1em + 8px);
    letter-spacing: 0.05em;
  }

  .color-fg {
    color: var(--color-0-fg);
  }
  .color-a {
    color: var(--color-0-a1);
  }
  .color-b {
    color: var(--color-0-b1);
  }
  .color-c {
    color: var(--color-0-c1);
  }
  .color-bg {
    color: var(--color-0-bg);
  }

  :focus {
    outline-width: 1.5px;
    outline-color: var(--color-0-b2);
  }
  :focus:not(:focus-visible) {
    outline: none;
  }

  #style_config .theme_frm {
    div {
      display: inline-block;
      margin: 0px 3px;
    }
    span {
      margin: 0;
    }

    input.theme_in[type=radio] {
      margin: 0;
      padding: 0;
      display: none;

      & + label {
        display: inline-block;
        background-color: var(--color-0-g2);
        border-style: solid;
        border-width: 1px;
        border-color: var(--color-0-fg);
        border-radius: 3px;
        padding: 3px;
        margin: 0px 1px 2px;
        line-height: 0.8em;
        font-size: 0.8em;
        font-weight: bolder;
        vertical-align: middle;
        text-align: center;
      }

      &:checked + label {
        color: var(--color-0-bg);
        background-color: var(--color-0-fg);
      }
    }
  }

  .location {
    font-size: 0.8em;
  }

  body {
    position: relative;
    margin: 5px;
    padding: 0;

    font-family: var(--fonts-sans);
    font-weight: 400;
    color: var(--color-0-fg);
    background-color: var(--color-0-bg);
    overflow-y: auto;
    font-feature-settings: "plat" 1;

    & > div {
      overflow: hidden;
      &.contents {
        padding: 3px;
        & > :is(p, h1, h2, h3, h4, h5, h6):first-child {
          margin-top: 4px;
        }
      }
      &.footer {
        border-top-style: solid;
        border-top-width: 1px;
        border-top-color: var(--color-0-g1);
        margin-top: 0.5em;
        padding-top: 0.5em;
      }
    }
    & > .location {
      max-width: 50%;
      width: fit-content;
    }
  }

  h1, h2, h3, h4, h5, h6 {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 4px;
  }
  h1 {
    margin-top: 12px;
    font-size: 1.5em;
    font-weight: 700;
    border-bottom: 1px solid var(--color-0-g1);
    padding-bottom: 4px;
  }
  h2 {
    margin-top: 10px;
    font-size: 1.383em;
    font-weight: 700;
    border-bottom: 1px solid var(--color-0-g2);
    padding-bottom: 4px;
  }
  h3 {
    margin-top: 8px;
    font-size: 1.275em;
    font-weight: 700;
  }
  h4 {
    margin-top: 6px;
    font-size: 1.176em;
    font-weight: 500;
  }
  h5 {
    margin-top: 5px;
    font-size: 1.084em;
    font-weight: 500;
  }
  h6 {
    margin-top: 4px;
    font-size: inherit;
    font-weight: 500;
  }
  p {
    margin-top: 3px;
    font-size: inherit;
    line-height: inherit;
  }

  textarea {
    font-family: var(--fonts-mono);
    color: var(--color-1-fg);
    background-color: var(--color-1-bg);

    .color-fg {
      color: var(--color-1-fg);
    }
    .color-a {
      color: var(--color-1-a1);
    }
    .color-b {
      color: var(--color-1-b1);
    }
    .color-c {
      color: var(--color-1-c1);
    }
    .color-bg {
      color: var(--color-1-bg);
    }
  }

  input[type="button"],
  input[type="submit"],
  button {
    color: var(--color-0-fg);
    background-color: var(--color-0-g2);
    border-style: outset;
    border-radius: 3px;
    border-width: 1.5px;
    border-color: var(--color-0-g2);
    padding: 2px 4px;
    margin: 0px;
    -webkit-transform: translate(-1px,-1px);
    -moz-transform: translate(-1px,-1px);
    transform: translate(-1px,-1px);
  }
  input[type="button"]:hover,
  input[type="submit"]:hover,
  button:hover {
   color: var(--color-0-a1);
  }
  input[type="button"]:active,
  input[type="submit"]:active,
  button:active {
    -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    transform: translate(0,0);
    border-bottom-color: var(--color-0-t0);
    border-style: inset;
  }

  pre {
    word-break: break-all;
    overflow-wrap: anywhere;
    white-space: pre;

    & > :is(code, kbd, samp, var) {
      display: block;
      border-radius: 6px;
      padding: 4px 7px;
      margin: 0;
      border: 0;
    }
    & > code {
      font-family: var(--fonts-mono);
      overflow: auto;
      font-feature-settings: "plat" 0;
    }
  }

  code, kbd, samp, var, dfn, mark, i, dt {
    box-sizing: border-box;
    text-indent: 0;
    font-weight: inherit;
  }
  kbd, samp, var, dfn, dt {
    font-family: var(--fonts-maru);
  }
  code, kbd, samp, dfn, i, dt {
    font-style: normal;
  }
  code, var, mark {
    padding: 0px 3px;
  }
  code, samp, var {
    box-shadow: none;
  }
  code span.space {
    color: var(--color-1-g1);
  }
  kbd, samp, var {
    display: inline-block;
  }
  code, var {
    border-radius: 4px;
  }
  samp, var {
    padding: 1px 4px;
    line-height: calc(1em + 6px);
  }
  strong {
    font-weight: bolder;
  }
  em {
    font-style: italic;
  }
  i {
    font-weight: lighter;
  }
  s {
    text-decoration: line-through solid;
  }
  b {
    font-weight: inherit;
    background: top left / 1em .5em repeat-x radial-gradient(circle, var(--color-0-a1) 0.1em, rgba(0,0,0,0) 0.1em) ;
    padding-top: 0.175em;
  }

  cite {
    font-style: normal;
    font-family: var(--fonts-serif);
  }
  rt {
    font-weight: lighter;
    font-size: 0.5em;
    margin-bottom: -4px;
  }
  code {
    font-family: var(--fonts-mono);
  }

  var {
    font-style: oblique;
  }
  samp {
    border: 1px solid var(--color-1-g1);
    margin-right: 2px;
    margin-left: 2px;
  }
  kbd {
    line-height: calc(1em + 6px);
    font-size: calc(1em - 2px);
    padding: 0px 4px;

    border: 1px solid var(--color-1-g1);
    border-radius: 2px;
    box-shadow: 1px 1px 2px var(--color-1-g1);
    margin-right: 3px;
    margin-bottom: 3px;
  }

  dfn, dt {
    text-decoration: underline;
  }

  del {
    text-decoration: line-through double;
  }

  mark {
    color: var(--color-0-fg);
    background-color: var(--color-0-b2);
  }

  code, samp, var {
    color: var(--color-1-fg);
    background-color: var(--color-1-bg);

    .color-fg {
      color: var(--color-1-fg);
    }
    .color-a {
      color: var(--color-1-a1);
    }
    .color-b {
      color: var(--color-1-b1);
    }
    .color-c {
      color: var(--color-1-c1);
    }
    .color-bg {
      color: var(--color-1-bg);
    }

    mark {
      color: inherit;
      background-color: var(--color-1-b2);
    }
    a {
      color: var(--color-1-c1);
      &[href], &[save_href] {
        color: var(--color-1-c1);
      }
    }
  }

  a {
    color: var(--color-0-c1);
    text-decoration: none;

    &[href], &[save_href] {
      color: var(--color-0-c1);
      text-decoration: none;
    }
    &:hover {
      text-decoration: underline;
    }
  }

  img, audio, video, svg, iframe {
    max-width: 80vmax;
    vertical-align: text-bottom;

  }
  img, svg {
    &.icon, &.emoji {
      width: 1lh;
      height: 1lh;
    }
  }
  audio.audio {
    height: 1lh;
    border-radius: 0.5lh;
    background-color: var(--color-0-g2);
  }
  video.video {
    width: 50vw;
    border: 1px solid var(--color-0-g2);
  }
  iframe.video {
    width: 50vw;
    height: calc(50vw * 9 / 16);
    border: 1px solid var(--color-0-g2);
  }

  hr {
    height: 0px;
    width: 100%;
    border-color: var(--color-0-g1);
    border-width: 2px 0 0 0;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }

  table {
    display: block;
    max-width: max-content;
    overflow: auto;
    word-break: keep-all;

    color: var(--color-0-fg);

    border-radius: 3px;
    border-collapse: collapse;
    border-spacing: 0;
    border: 2px solid var(--color-0-g1);
  }

  tr {
    border-style: none;
  }
  :is(table, tbody) > tr:nth-child(2n+1) {
    background-color: var(--color-1-bg);

    .color-fg {
      color: var(--color-1-fg);
    }
    .color-a {
      color: var(--color-1-a1);
    }
    .color-b {
      color: var(--color-1-b1);
    }
    .color-c {
      color: var(--color-1-c1);
    }
    .color-bg {
      color: var(--color-1-bg);
    }

    code, samp, var {
      color: var(--color-0-fg);
      background-color: var(--color-0-bg);

      .color-fg {
        color: var(--color-0-fg);
      }
      .color-a {
        color: var(--color-0-a1);
      }
      .color-b {
        color: var(--color-0-b1);
      }
      .color-c {
        color: var(--color-0-c1);
      }
      .color-bg {
        color: var(--color-0-bg);
      }

      mark {
        background-color: var(--color-0-b2);
      }
      a {
        color: var(--color-1-c1);
        &[href], &[save_href] {
          color: var(--color-1-c1);
        }
      }
    }
    mark {
      color: var(--color-1-fg);
      background-color: var(--color-1-b2);

      .color-fg {
        color: var(--color-1-fg);
      }
      .color-a {
        color: var(--color-1-a1);
      }
      .color-b {
        color: var(--color-1-b1);
      }
      .color-c {
        color: var(--color-1-c1);
      }
      .color-bg {
        color: var(--color-1-bg);
      }
    }
  }

  th, td {
    border-width: 1px;
    border-top-style: solid;
    border-left-style: solid;
    border-right-style: none;
    border-bottom-style: none;
    padding: 6px 13px;
    border-color: var(--color-0-g2);
  }
  th {
    font-weight: 700;
  }
  td {
    font-weight: 500;
  }

  tr > :is(th, td):first-of-type {
    border-left-style: none;
  }
  :is(table, thead, tbody, tfoot:only-child) > tr:first-of-type > :is(th, td) {
    border-top-style: none;
  }
  thead:not(:only-child) > tr:last-of-type > :is(th, td) {
    border-bottom-style: solid;
  }

  :is(thead, tfoot) > tr > :is(th, td) {
    border-color: var(--color-0-g1);
  }

  li > p {
    margin-top: 0;
  }

  h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
    font-size: inherit;
  }

  p, ul, ol, dl, table, pre {
    margin: 0.5em 0 0.75em 0;
  }

  dl {
    padding: 0;
  }
  dt {
    padding: 0;
    margin: 0;
  }
  dd {
    padding: 0;
    margin: 0 0 0.5em 5ex;
  }

  ul, ol {
    ul, ol {
      margin-top: 0;
      margin-bottom: 0;
      ol {
        list-style-type: lower-alpha;
      }
    }
    ol {
      list-style-type: lower-roman;
    }
  }
  ul, :is(ol, ul, dl) ol {
    padding-left: calc(4px + 1em);
  }
  ol {
    padding-left: calc(4px + 4ex);
  }

  q::before, q::after {
    color: var(--color-0-a1);
  }
  q::before {
    content: "「";
  }
  q::after {
    content: "」";
  }

  blockquote, div.markdown-alert {
    margin: 0.5em 0 0.75em 2px;
    padding-left: calc(0.75em - 2px);
    border-left-width: 4px;
    border-left-style: solid;

    & > :first-child {
      margin-top: 0;
    }
    & > :last-child {
      margin-bottom: 0;
    }
  }
  blockquote {
    border-left-color: var(--color-0-a2);
  }
  div.markdown-alert {
    border-left-color: var(--color-0-g1);
  }
  p.markdown-alert_title {
    font-weight: bolder;
    color: var(--color-0-g1);
  }

  p.markdown-alert_title-NOTE {
    color: var(--color-0-g1);
  }

  div.markdown-alert-TIP {
    border-left-color: var(--color-0-b1);
  }
  p.markdown-alert_title-TIP {
    color: var(--color-0-b1);
  }

  div.markdown-alert-IMPORTANT {
    border-left-color: var(--color-0-c1);
  }
  p.markdown-alert_title-IMPORTANT {
    color: var(--color-0-c1);
  }

  div.markdown-alert-WARNING {
    border-left-color: var(--color-0-a2);
  }
  p.markdown-alert_title-WARNING {
    color: var(--color-0-a2);
  }

  div.markdown-alert-CAUTION {
    border-left-color: var(--color-0-a1);
  }
  p.markdown-alert_title-CAUTION {
    color: var(--color-0-a1);
  }

  .app_ui {
    margin: 0;
    padding: 0;
    width: fit-content;
  }

  #tools {
    position: absolute;
    right: 0;
    top: 0;
    overflow: visible;

    margin: 0;
    padding: 0;
  }
  #tools > * {
    margin: 0 2px;
  }
  #tools > *:first-child {
    margin-left: 0;
  }
  #tools > *:last-child {
    margin-right: 0;
  }

  #style_config {
    display: inline-block;
  }

  #top_menu {
    display: inline-block;
    font-size: 0.9em;
    padding: 0 3px 0 3px;
    position: relative;
    z-index: 2;
    border-radius: 3px;
  }
  #top_menu:not(:hover) {
    background-color: var(--color-0-g2);
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
  }
  #top_menu:hover {
    background-color: var(--color-1-t1);
  }

  #top_menu .menu-btn {
    font-size: 1lh;
    display: inline-block;
    width: 1lh;
    height: 100%:
    text-align: center;
    vertical-align: middle;
  }
  #top_menu .menu-btn::before {
    content: url('data:image/svg+xml,<svg fill="none" stroke-width="2.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M 4,5.75 H 20 M 4,12 H 20 M 4,18.25 h 16" stroke-linecap="round" stroke-linejoin="round" /></svg>');
    display: inline-block;
    height: 100%;
    width: 100%;
  }

  #top_menu .menu {
    position: absolute;
    top: 100%;
    max-width: 25vw;
    width: max-content;
    min-width: 5lh;
    white-space: pre;
    max-height: 90vh;
    overflow-x: hidden;
    overflow-y: auto;

    background-color: var(--color-1-t1);
    color: var(--color-1-fg);
    margin: 0;
    padding: 0;

    line-height: 1em;
    border-radius: 3px;
  }
  #top_menu:not(:last-child) .menu {
    border-top-left-radius: 0;
    left: 0;
  }
  #top_menu:last-child .menu {
    border-top-right-radius: 0;
    right: 0;
  }
  #top_menu:not(:hover) .menu {
    display: none;
  }

  #top_menu .menu ul {
    list-style: none;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
  }
  #top_menu .menu ul li {
    display: block;
    background-color: var(--color-0-g2);
    padding: 3px;
    border-radius: 6px;
  }
  #top_menu .menu ul li:first-child {
    margin: 3px 3px 3px;
  }
  #top_menu .menu ul li:not(:first-child) {
    margin: 0px 3px 3px;
  }
  #top_menu .menu ul li a {
    display: inline-block;

    text-align: center;

    width: 100%;
    margin: 0;
    padding: 0;
  }
  #top_menu .menu ul li a:not(:hover) {
    opacity: 0.666;
  }
  #top_menu .menu ul li a:hover {
  }

  nav#toc {
    position: fixed;
    top: calc(5px + 1lh + 5px);
    right: 5px;
    margin: 0;
    max-height: 50%;
    width: 25%;
    padding: 0 3px;
    overflow-y: auto;
    z-index: 1;

    font-family: var(--fonts-sans);
    font-size: 80%;
    color: var(--color-1-b1);
    background-color: var(--color-1-t0);
    border: 1px solid var(--color-0-g2);
    scrollbar-color: var(--color-0-g1) transparent;

    &:hover {
      background-color: var(--color-1-t1);
    }
    li {
      white-space: nowrap;
    }
    a {
      color: inherit;
    }
    ul {
      margin: 0;
      padding-left: 1em;
    }
    :is(&, details) > ul {
      margin: 0 0 0 1em;
    }
  }

  .subtitle {
    color: var(--color-0-b1);
    margin-bottom: 0;
  }
  code.language-aa {
    display: block;

    border-radius: 4px;
    font-family: var(--fonts-aa);
    font-feature-settings: "tnum";
    text-indent: 0;

    height: max-content;
  }
}
