/* jayahe.bhasha.net | Page layout stylesheet */
/* For @font-face references, see https://fonts.bhasha.net/default.css */

/* Copy-paste following into individual page's ‹head› element */

/* 
<style>
body { 
font-family: 'Quivira', 'Noto FONTNAME', 'Noto Emoji';
}

ruby, rb, rt, h1, label, input {
  margin: 0;
  padding: 0;
}

ruby {
  display: inline-flex;
  flex-direction: column-reverse; 
  padding-block-end: 0.3rem;
}

rb, rt {
  display: inline;
  line-height: 1.2;
}

rt { 
  font-family: 'Noto FONTNAME';
  font-size: 0.8rem; 
}

label [lang="zxx-Zyyy"] { 
    font-family: 'Noto FONTNAME' !important; 
    font-size: 0.5rem; 
  }

</style>
*/

:root {
width: 100vw;
font-size: 20pt;
line-height: 20pt; 
scroll-behavior: smooth;
overflow: auto;
overscroll-behavior: contain;
}

body { 
    white-space: nowrap;
    position: relative; 
    line-height: 20pt;
    
    & * { 
        white-space: nowrap;
        font-weight: 400;
        margin: 0 auto;
        padding: 0; 
        line-height: 20pt;
    }
}

header, main { 
    text-align: center;
    background-color: Canvas;
    color: CanvasText;
    opacity: 1;
}

header { 
    padding-block: 0.3rem 0.1rem;
    width: 100%; 
    border-bottom: 1px solid GrayText;
    box-shadow: 0 2px 5px GrayText;
    position: sticky;
    top: 0;
    z-index: 10;
    & * { 
        opacity: 1;
    }
}

b:has(>br), br { 
    display: block; 
    height: 0; 
    margin-inline: auto; 
}

main { 
    width: fit-content;
    max-width: 98%; 
    overflow-x: hidden; 
}

h1, h1 * {
    font-size: x-large;
    font-weight: 400;
}

h1 { 
    margin: 0 auto 0.5rem;
}

section { 
    margin: 0;
    padding-block: 0.7rem 0.3rem;
    width: fit-content;
    max-width: 100%; 
    overflow-x: auto;
    overflow-y: hidden;
}

p, div:has(>ruby) { 
    margin: 0;
    text-align: start;
  /*  padding-block-start: -5pt; */
}


/* _____ */

ruby { 
  display: ruby; 
  ruby-align: center;
  line-height: 40pt;
}

b, rb {
    display: ruby-base; 
    vertical-align: middle;
    line-height: 20pt;
    font-family: 'Quivira';
    font-size: 20pt;
    font-weight: 400;
    letter-spacing: 0; 
    margin: 0 auto;
    padding: 0;
    }


rt { 
    display: ruby-text; 
    line-height: 20pt;
    font-size: 20pt;
    text-align: center;
    ruby-align: center;
    font-weight: 400; 
    margin: 0 auto;
    padding: 0;
}

label { 
    & * {
        display: inline-block;
        vertical-align: middle; 
    } 
    & span { 
        white-space: pre-wrap;
    }
    & [lang*="-Zsye"] { 
        font-family: 'Noto Emoji'; 
        font-size: large; 
    } 
}

label + label {
  margin-inline-start: 10vw;
}

label:has(input:not([disabled])) {
    cursor: pointer; 
    }

label:has(input[disabled]) {
    cursor: not-allowed;
    color: GrayText;
}

/* Show ruby text on hover or tap */
:root:has(input[name="rt"]:not(:checked)) {
  & rt { 
    visibility: hidden;
  }
  & rb:hover {
    & + rt {
      visibility: visible;
    }
  }
}

/* Show ruby text when box ticked */
:root:has(input[name="rt"]:checked) {
  & rt { 
    visibility: visible;
  }
}

:root:has(input[name="daymode"]:not(:checked)) { 
    color-scheme: dark; 
    & label:has(input[name="daymode"]:not(:checked)) * { 
        color-scheme: dark;
        color: ActiveText;
    }
}

:root:has(input[name="daymode"]:checked) {
    color-scheme: light;
    & label:has(input[name="daymode"]:checked) * { 
        color-scheme: light;
        color: ActiveText; 
    }
}

/* _____ */