@font-face {
    font-family: Play;
    src: url('../fonts/Play-Regular.ttf');
}

html, body {
    background: #39576f;
    margin: 0;
    -webkit-tap-highlight-color: transparent; /* no box flashed over a button touched */
    }

/* text picked out with the mouse in grey, not the system's blue; on the options and
   the guide only, as on the website the calculator's boxes keep their own light shade and dark text */
.wrapper ::selection {
    color: #fff;
    background: #6b7580;
}

.wrapper{
    font-size: 17px; /* the page is in em, so this scales it all */
    text-align: center;
    max-width: 800px;
    margin: 7em auto;
    padding: 0 16px;
}

.features{
    color: #fff;
    text-align: left;
    font-size: 1.1em;
    line-height: 1.7; /* room for the key chips inside the lines */
}

.features ul {
    padding: 0 1.3em 1.3em;
}

.features a {
    color: #f0b8be;
}

.features li {
    padding: 0.15em 0.1em;
    
}

:where(.wrapper) .calc-main{
    margin: 0;
}

:where(.wrapper) .calc-sci{
    margin: 0;
}

.info {
    text-align: left;
    margin: .8em auto 1.4em;
    display: flex;
}

.des{
    color: #fff;
    display: inline-block;
    margin: 3px 5px;
    padding: 0 10px 0;
    flex: 1;

}

:where(.wrapper) .logo {
    margin-top: 10px;
    margin-left: 15px;
    margin-bottom: 5px;
    font-style: bold;
    font-weight: 700;
    font-family: 'Play', 'Russo One', sans-serif;
    font-size: 2.7em;
    color: #fff;
    -webkit-user-select: none;
    user-select: none;
}

.title{
    color:#acb4c1 ;
    font-size: 22px;
    text-align: center;
    margin: 2em 0 0.6em;
    -webkit-user-select: text; /* the section titles can be selected and copied, as the text under them */
    user-select: text;
}

/* the title of a part of the guide in white */
:where(.wrapper) .title:not(.sub) {
    color: #fff;
}

/* a section inside a part of the guide: smaller, under the part's title */
:where(.wrapper) .title.sub {
    margin: 2.6em 0 0.9em;
    font-size: 18px;
}


/* a line in the guide between its parts: what the calculator has, how to use it, its precision, and
   for schools; the title under it close, as the line's own */
.guide-rule {
    margin: 4em 0 2.4em;
    border: none;
    border-top: 1px solid #8a929c;
}

.guide-rule + .features > .title:first-child {
    margin-top: 0;
}

/* the options: one panel, one row for each option */
.options {
    text-align: left;
    color: #fff;
    font-family: 'Play', 'Russo One', sans-serif;
    background: #2b4753;
    border: 1px solid #1a2f38;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.option {
    display: flex;
    align-items: center;
    gap: 1.1em;
    padding: 1.2em 1.5em;
}

.option + .option {
    border-top: 1px solid #1a2f38;
}

.option-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #39576f;
    border-radius: 10px;
}

.option-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #fff;
    color: #fff; /* what is filled, as the lines: the i of the numbers */
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* the button as it looks on a page (page-icon.js): the grey of the browser's theme, and
   the logo with its thin line round it */
.page-button {
    --ring: #555555;
    background: #cfcfcf;
}

.page-button img {
    width: 27px;
    height: 27px;
    filter: drop-shadow(0.5px 0 0 var(--ring)) drop-shadow(-0.5px 0 0 var(--ring)) drop-shadow(0 0.5px 0 var(--ring)) drop-shadow(0 -0.5px 0 var(--ring));
}

@media (prefers-color-scheme: dark) {
    .page-button {
        --ring: #9a9a9a;
        background: #232323;
    }
}

.option-text {
    flex: 1;
}

.option h3 {
    margin: 0 0 0.25em;
    font-size: 1.2em;
    font-weight: 700;
}

.option p {
    margin: 0;
    font-size: 1.05em;
    line-height: 1.4em;
    color: #dde3ea;
}

.option .option-note {
    margin-top: 0.4em;
    font-size: 0.88em;
    color: #acb4c1;
}

.switch {
    flex: none;
    position: relative;
    width: 40px;
    height: 22px;
    cursor: pointer;
}

.switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.switch span {
    display: block;
    height: 100%;
    background: #1a2f38;
    border-radius: 11px;
    transition: background 0.2s;
}

.switch span::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    width: 16px;
    height: 16px;
    background: #8696a5;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: left 0.2s, background 0.2s;
}

.switch input:checked + span {
    background: #bf777f;
}

.switch input:checked + span::after {
    left: 21px;
    background: #fff;
}

/* turned off by an administrator: it cannot be used, and its note says why */
.option.managed .option-icon,
.option.managed h3,
.option.managed .switch,
.option.managed .choice {
    opacity: 0.45;
}

.option.managed .switch,
.option.managed .switch input {
    cursor: not-allowed;
}

.option .managed-note {
    color: #e3a5ac;
}

.switch input:focus-visible + span,
.launch:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.launch {
    flex: none;
    min-width: 7.5em;
    padding: 0.7em 1.6em;
    font-size: 1.05em;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    background: #bf777f;
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    font-family: 'Play', 'Russo One', sans-serif;
    transition: background 0.2s, transform 0.04s;
}

.launch:hover {
    background: #d1868f;
}

.launch:active {
    background: #b26b73;
    transform: translateY(2px); /* pressed, it moves down a little, as the keys do */
}

:where(.wrapper) .trigo-keys {
    text-align: center;
    width: 40px;
    height: 27px;
    font-size: 1em;
    color: #fff;
    margin: 3px;
    cursor: pointer;
    background: #2b4753;
    border: 1px solid #1a2f38;
    border-radius: 5px;
    display: inline-flex; /* the label sits in the middle of the key */
    align-items: center;
    justify-content: center;
    font-family: 'Play', 'Russo One', sans-serif;
    vertical-align: middle;
    position: relative;
    top: 2px; /* the key with its label, a bit down */
}


:where(.wrapper) .trigo-keys:hover {
    background: #345361;
    border: 1px solid #1a2f38;
    border-radius: 5px;
}

:where(.wrapper) .trigo-keys:active {
    font-size: 1em;
    color: #fff;
    background: #2b4753;
    border: 1px solid #000;
    border-radius: 5px;
}

:where(.wrapper) .keys {
    text-align: center;
    padding: 0px;
    color: #fff;
    font-family: 'Play', 'Russo One', sans-serif;
    font-size: 2em;
    cursor: pointer;
    margin: 1px;
    width: 62px;
    height: 50px;
    border: 2px solid #697394;
    border-top-left-radius: .6em;
    border-top-right-radius: .6em;
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
    background: #8696a5;
    display: inline-block;
    vertical-align: middle;
    line-height: 38px; /* the label as high in the key as on the calculator */
}

:where(.wrapper) .keys:hover {
    color: #fff;
    background: #91a4b5;
}

:where(.wrapper) .keys:active {
    color: #fff;
    background: #758492;
    border: 2px solid #3f4969;
}

:where(.wrapper) .keys2 {
    background: #4a5f73;
}

:where(.wrapper) .keys2:hover {
    background: #52687d;
}

:where(.wrapper) .keys2:active {
    background: #425669;
    border: 2px solid #3f4969;
}

:where(.wrapper) .del-ac {
    background: #bf777f;
    width: 62px;
    /* DEL and C: slightly smaller letters, like on the calculator */
    font-size: 1.7em;
}

:where(.wrapper) .del-ac:hover {
    background: #d1868f;
}

:where(.wrapper) .del-ac:active {
    color: #fff;
    background: #b26b73;
    border: 2px solid #3f4969;
}

/* a key moves down 1px while it is pressed, as in the calculator; the small
   keys keep their own border: only the fill gets darker */
:where(.wrapper) .trigo-keys,
:where(.wrapper) .keys {
    transition: transform 0.04s;
}

:where(.wrapper) .keys:active {
    transform: translateY(1px);
}

:where(.wrapper) .trigo-keys:active {
    transform: translateY(1px);
    background: #223a45;
    border-color: #1a2f38;
}

:where(.wrapper) .equal {
    width: 62px;
}

:where(.wrapper) .calc-buttons {
    display: none;
}

:where(.wrapper) .calc-blank {
    position: absolute;
    z-index: -1;
    opacity: 0;
    width: 0px;
    height: 0px;
    padding: 0px;
    margin: 0px;
}

.v {
    font-size: 0.3em;
    color: #acb4c1;
    font-family: 'Play', 'Russo One', sans-serif;
    
}

.footer{
    text-align: center;
    max-width: 800px;
    margin: 2.5em auto;
    padding: 0 16px;
    color: #acb4c1;
}

.footer a{
    color: #fff;
    text-decoration: none;
}
.format-option {
    padding-bottom: 0.7em;
}

/* the number format: notation, decimal places and separators on one line, in the middle of
   the option, as the rows of choices */
.format-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.8em;
    margin: 0.6em 0 0.6em;
}

/* the icon shows 1,500 as the chosen format writes it */
.format-icon {
    box-sizing: border-box;
    width: auto;
    min-width: 40px; /* as wide as the other option icons, until the number needs more */
    padding: 0 6px;
    background: #b6d1c2; /* a piece of the calculator's screen */
    border-radius: 5px;
    color: #000;
    font-family: 'Play', 'Russo One', sans-serif;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
}

.format-row select {
    appearance: none;
    padding: 0.45em 1.9em 0.45em 0.6em;
    color: #fff;
    background: #1a2f38 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.7em center / 8px 5px;
    border: 1px solid #4d6b80;
    border-radius: 6px;
    font: inherit;
    font-size: 0.95em;
    cursor: pointer;
}

.format-row select:focus {
    outline: none; /* no ring around the box while its list is open */
}

.format-row select:disabled {
    opacity: 0.45;
    cursor: default;
}

/* a row of choices, drawn as the tabs: Before or After, Fixed or Detached */
.choice {
    display: inline-flex;
    flex-wrap: wrap;
    min-width: 0;
    margin: 0;
    padding: 3px;
    gap: 3px;
    background: #1a2f38;
    border: 1px solid #4d6b80;
    border-radius: 8px;
}

.choice label {
    position: relative;
}

/* the radio itself is hidden; its label is the button */
.choice input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.choice span {
    display: block;
    padding: 0.4em 0.9em;
    color: #acb4c1;
    border-radius: 5px;
    font-size: 0.95em;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.choice label:hover span {
    color: #fff;
}

.choice input:checked + span {
    color: #fff;
    background: #39576f;
}

.choice input:focus-visible + span {
    outline: 2px solid #fff;
    outline-offset: 1px;
}

.choice:disabled span {
    cursor: not-allowed;
}

/* phones: less space around the page, and the options stack where they don't fit */
@media (max-width: 600px) {
    .wrapper {
        margin: 2.5em auto;
    }

    :where(.wrapper) .logo {
        margin-left: 0;
        font-size: 2em;
    }

    .title {
        font-size: 20px;
        margin-top: 1.6em;
    }

    .features {
        font-size: 1em;
    }

    .features ul {
        padding: 0 0 1em 1.2em;
    }

    .option {
        flex-wrap: wrap;
        gap: 0.9em;
        padding: 1em;
    }

    .option-text {
        flex: 1 1 0;
        min-width: 0;
    }

    .format-option {
        padding-bottom: 0.6em;
    }

    .launch {
        width: 100%;
    }

    .des {
        margin: 3px 0;
        padding: 0 0 0 10px;
        min-width: 0;
        overflow-wrap: anywhere;
    }
}

/* the ◀ ▶ keys in the text: the same chevrons as on the calculator */
.arrow {
    width: 0.8em;
    height: 0.8em;
    margin: 0 0.1em;
    vertical-align: -0.05em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

:where(.wrapper) .trigo-keys .arrow {
    width: 13px;
    height: 13px;
    margin: 0;
    vertical-align: middle;
}

/* a key named in the text looks like the key on the calculator */
.k {
    display: inline-block;
    min-width: 1.3em;
    padding: 0 0.4em;
    margin: 0 0.05em;
    color: #fff;
    font-family: 'Play', 'Russo One', sans-serif;
    font-size: 0.92em;
    font-style: normal;
    line-height: 1.35;
    text-align: center;
    white-space: nowrap;
    background: #2b4753;
    border: 1px solid #1a2f38;
    border-radius: 5px;
    vertical-align: baseline;
}

.k-red {
    background: #bf777f;
    border-color: #8e4a52;
}

.k .arrow {
    margin: 0;
    vertical-align: -0.1em;
}

.k sup,
.k sub {
    font-size: 0.7em;
    line-height: 0;
}

/* the ? at the top of the calculator: a small outlined square, not a key */
.k-help {
    min-width: 0;
    width: 1.25em;
    height: 1.25em;
    padding: 0;
    margin: 0 0.15em;
    color: #acb4c1;
    font-weight: 700;
    font-size: 0.85em;
    line-height: 1.2em;
    background: none;
    border: 1px solid #acb4c1;
    border-radius: 4px;
    vertical-align: 0.05em;
}

/* the key pictures that start each description cannot be selected;
   the keys named inside the text can, except the < > arrows */
:where(.wrapper) .keys,
:where(.wrapper) .trigo-keys,
:where(.wrapper) .calc-down,
.k-arrow {
    -webkit-user-select: none;
    user-select: none;
}

/* The extension's options page, as the website shows it: the calculator's font, the
   text a little smaller, and the footer at the bottom. The website has its own
   layout (css/site.css), so this is for body.page only. */
.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'Play', 'Russo One', sans-serif;
}

.page .wrapper {
    flex: 1 0 auto;
    box-sizing: border-box;
    width: 100%;
    margin: 2em auto 0;
    font-size: 12.5px;
}

.page .footer {
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
    padding: 3em 16px 2em;
    font-size: 12.5px;
}

.page .footer p {
    margin: 0;
}

.des {
    line-height: 1.7;
}

.option p {
    line-height: 1.55;
}

/* every section title sits the same distance below the text above it: the title's own
   margin sets the gap, so nothing at the end of a section adds to it */
.wrapper > :not(.options, .tabs) > :last-child,
.wrapper > :not(.options, .tabs) > div > :last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

.wrapper > .logo:not(.title) {
    margin-bottom: 0;
}

/* the statistics and the formulas open on a piece of the screen, so their icons are one */
.screen-icon {
    background: #b6d1c2;
    border-radius: 5px;
}

.screen-icon svg {
    stroke: #1f333c;
    color: #1f333c;
}

/* two tabs at the top: the options, and the guide to the calculator */
.tabs {
    display: flex;
    width: max-content;
    margin: 2em auto 3em;
    padding: 4px;
    gap: 4px;
    background: #2b4753;
    border: 1px solid #1a2f38;
    border-radius: 10px;
}

.tab {
    min-width: 7em;
    padding: 0.5em 1.2em;
    color: #acb4c1;
    background: none;
    border: none;
    border-radius: 7px;
    font: 700 1.1em 'Play', 'Russo One', sans-serif;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.tab:hover {
    color: #fff;
}

.tab[aria-selected="true"] {
    color: #fff;
    background: #39576f;
}

.tab:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 1px;
}

.wrapper[data-show="options"] > [data-tab="guide"],
.wrapper[data-show="guide"] > [data-tab="options"] {
    display: none;
}

/* the last section of the guide, For Schools and Organizations, has room under it before the footer */
.wrapper > .features:last-child {
    margin-bottom: 3em;
}

/* the guide starts under the tabs, as the options do */
.tabs + .options + .features > .title:first-child {
    margin-top: 0;
}