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

/* the real bold of Play, for the name of a card open: a bold made from the regular is too faint */
@font-face {
    font-family: 'Play Bold';
    src: url('../fonts/Play-Bold.ttf');
}

/* Every size in here is in em, from this font: set, and not the browser's, which is not the
   same in Chrome's popup, Firefox's and a web page, so the calculator looks the same in each */
#calculator {
    font-size: 12px;
    width: 376px;
    height: 576px;
    margin: auto;
    border: 1px solid #000000;
    background: #3a5872;
    background-clip: padding-box; /* the blue stops inside the border, or it shows round its rounded edge on a dark page */
    border: 2px solid #4d5368;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
    position: relative; /* the history is placed over the keys */
    -webkit-user-select: none;
    user-select: none; /* only the display can be selected */
    -webkit-tap-highlight-color: transparent; /* no box flashed over a key touched, as Tesla's browser does */
}

/* the strip above the display: the name and the ? box */
#calculator .calc-head {
    position: relative;
    display: flow-root; /* as tall as the name, which floats */
}

#calculator .logo {
    margin-top: 10px;
    margin-left: 15px;
    margin-bottom: 5px;
    float: left;
    font-style: bold;
    font-weight: 700;
    font-family: 'Play', 'Russo One', sans-serif;
    font-size: 1.4em;
    color: #acb4c1;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

/* the ? box beside the name: opens the options page. It sits in the middle
   between the top of the calculator and the display, 5px below the strip */
#calculator .calc-help {
    position: absolute;
    top: 0;
    bottom: -5px;
    right: 12px;
    width: 12px;
    height: 12px;
    margin: auto 0;
    border: 1px solid #acb4c1;
    border-radius: 4px;
    color: #acb4c1;
    opacity: 0.55; /* subtle until the pointer is over it */
    font: 700 9px/12px 'Play', 'Russo One', sans-serif;
    text-align: center;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

#calculator .calc-help:hover {
    opacity: 1;
}

#calculator .calc-help:active {
    opacity: 0.75;
}

/* the buttons at the top left of the display, in a row: the clock opens the
   history, f(x) the formulas, the arrows the converter, the bars the statistics,
   the curve the graph.
   A hidden one leaves no gap */
#calculator .calc-tools {
    position: absolute;
    z-index: 2;
    left: 6px;
    top: 4px;
    display: flex;
    gap: 3px;
}

#calculator .calc-hist,
#calculator .calc-stat-btn,
#calculator .calc-fx-btn,
#calculator .calc-conv-btn,
#calculator .calc-graph-btn,
#calculator .calc-solve-btn,
#calculator .calc-numbers-btn {
    padding: 2px;
    border-radius: 4px;
    color: #1f333c;
    opacity: 0.5;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

#calculator .calc-tools [hidden] {
    display: none;
}

#calculator .calc-tools svg {
    display: block;
}

#calculator .calc-hist:hover,
#calculator .calc-hist.calc-on,
#calculator .calc-stat-btn:hover,
#calculator .calc-stat-btn.calc-on,
#calculator .calc-fx-btn:hover,
#calculator .calc-fx-btn.calc-on,
#calculator .calc-conv-btn:hover,
#calculator .calc-conv-btn.calc-on,
#calculator .calc-graph-btn:hover,
#calculator .calc-graph-btn.calc-on,
#calculator .calc-solve-btn:hover,
#calculator .calc-solve-btn.calc-on,
#calculator .calc-numbers-btn:hover,
#calculator .calc-numbers-btn.calc-on {
    opacity: 0.9;
    background: #a3bdaf;
}

#calculator .calc-hist:active,
#calculator .calc-stat-btn:active,
#calculator .calc-fx-btn:active,
#calculator .calc-conv-btn:active,
#calculator .calc-graph-btn:active,
#calculator .calc-solve-btn:active,
#calculator .calc-numbers-btn:active {
    opacity: 0.75;
}

/* ---------- statistics ---------- */

/* the list, a box to type in like the search; the results under it scroll */
#calculator .calc-stats-input {
    flex: none;
    height: 84px;
    margin: 4px 8px 0; /* its ring of the focus takes 2px of it, and is bright: more room than under Converter */
    padding: 7px 9px;
    border: 0;
    border-radius: 5px;
    outline: none;
    background: #a9c4b5;
    box-shadow: 0 0 12px #36475a;
    color: #000;
    font: 15px/1.4 'Play', 'Russo One', sans-serif;
    resize: none;
}

/* the list a little lower, so its fifteen results fit under it without a scrollbar; pairs keep the room
   for their lines */
#calculator .calc-stats:not(.calc-stats-pairs) .calc-stats-input {
    height: 70px;
}

#calculator .calc-stats-input::placeholder {
    color: #5b7768;
}

#calculator .calc-stats-input:focus {
    background: #b3cdbf;
    box-shadow: 0 0 0 2px #c9e0d3, 0 0 12px #36475a;
}

/* what is between the numbers: a small list at the top, beside the name of the panel */
#calculator .calc-past-head .calc-stats-by {
    flex: none;
    margin-right: 4px;
    padding: 1px 17px 1px 6px;
    background-position: right 6px center;
    background-size: 8px 5px;
    box-shadow: none;
    font-size: 11px;
    line-height: 16px;
}

#calculator .calc-past-head .calc-stats-by .calc-conv-chosen {
    font-weight: 400;
}

/* its label, quiet beside it */
#calculator .calc-stats-by-label {
    font-size: 11px;
    opacity: 0.6;
    white-space: nowrap;
}

/* the list of them opens over the numbers, small as well */
#calculator .calc-stats-by .calc-conv-menu {
    left: auto;
    right: 0;
    width: max-content;
    padding: 2px;
}

#calculator .calc-stats-by .calc-conv-item {
    padding: 1px 7px;
    line-height: 17px;
}

/* the sign of each, after its name */
#calculator .calc-stats-by b {
    margin-left: 3px;
}

/* how many numbers, and what was left out */
#calculator .calc-stats-note {
    min-height: 15px;
    margin: 6px 12px 2px;
    overflow: hidden;
    color: #acb4c1;
    font-size: 12px;
    line-height: 15px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* the results and the chart under them, scrolling where they do not fit; room round them for their shadows */
#calculator .calc-stats-out {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 8px 6px;
}

#calculator .calc-stats-out::-webkit-scrollbar {
    width: 6px;
}

#calculator .calc-stats-out::-webkit-scrollbar-thumb {
    background: #6b8196;
    border-radius: 3px;
}

#calculator .calc-stats-out .calc-stats-grid {
    margin: 0;
}

/* a histogram and box plot of the list, or the pairs and their line, on the green of the tiles */
#calculator .calc-stats-chart {
    margin-top: 7px;
    border-radius: 5px;
    background: #b6d1c2;
    box-shadow: 0 0 12px #36475a;
}

#calculator .calc-stats-chart:empty {
    display: none;
}

#calculator .calc-stats-chart svg {
    display: block;
    width: 100%;
    height: auto;
    fill: #33443b;
    font: 10px 'Play', 'Russo One', sans-serif;
}

#calculator .calc-stats-bar {
    fill: #22476a;
    opacity: 0.8;
}

#calculator .calc-stats-axis,
#calculator .calc-stats-whisker,
#calculator .calc-stats-mid {
    stroke: #33443b;
    stroke-width: 1;
}

#calculator .calc-stats-mid {
    stroke-width: 2;
}

#calculator .calc-stats-box {
    fill: #d3e5da;
    stroke: #33443b;
    stroke-width: 1;
}

#calculator .calc-stats-dot {
    fill: #22476a;
}

#calculator .calc-stats-fit {
    stroke: #b0414d;
    stroke-width: 1.5;
}

/* the results: a click puts one into the calculation */
#calculator .calc-stats-grid,
#calculator .calc-sv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin: 4px 8px 0;
}

#calculator .calc-stats-tile,
#calculator .calc-sv-tile {
    min-width: 0;
    padding: 4px 8px 3px;
    border-radius: 5px;
    background: #b6d1c2;
    box-shadow: 0 0 12px #36475a;
    color: #000;
    cursor: pointer;
}

#calculator .calc-stats-tile:hover,
#calculator .calc-sv-tile:hover {
    background: #a3bdaf;
}

#calculator .calc-stats-tile:active,
#calculator .calc-sv-tile:active {
    background: #98b3a5;
}

/* no value yet: nothing to put in */
#calculator .calc-stats-tile.calc-none,
#calculator .calc-sv-tile.calc-none {
    cursor: default;
    background: #b6d1c2;
}

#calculator .calc-stats-label,
#calculator .calc-sv-label {
    display: block;
    color: #33443b;
    font-size: 12px;
    line-height: 15px;
}

#calculator .calc-stats-label sup,
#calculator .calc-stats-label sub,
#calculator .calc-sv-label sup {
    font-size: 9px;
    line-height: 0;
}

#calculator .calc-stats-value,
#calculator .calc-sv-value {
    display: block;
    overflow: hidden;
    font-size: 17px;
    line-height: 26px;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#calculator .calc-stats-value .calc-fr,
#calculator .calc-sv-value .calc-fr {
    font-size: 0.65em;
}

/* x̄, the mean */
#calculator .calc-x-bar {
    text-decoration: overline;
}

/* ---------- graph ---------- */

/* the functions: boxes like the search, each with the color of its curve and y = before what is typed */
#calculator .calc-graph-fns {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 4px 8px 0; /* the ring of the focus takes 2px of it, as the search's */
}

/* More than three boxes scroll, so the plot keeps its room: three show, and the ring of
   the focus has its 2px inside. Big, they have up to near half of the page */
#calculator .calc-graph-fns.calc-graph-many {
    flex: none;
    max-height: 86px;
    margin: 2px 6px 0;
    padding: 2px;
    overflow-y: auto;
}

#calculator.calc-big .calc-graph-fns.calc-graph-many {
    max-height: 45vh;
}

#calculator .calc-graph-fns::-webkit-scrollbar {
    width: 6px;
}

#calculator .calc-graph-fns::-webkit-scrollbar-thumb {
    background: #6b8196;
    border-radius: 3px;
}

#calculator .calc-graph-fn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 9px;
    border-radius: 5px;
    background: #a9c4b5;
    box-shadow: 0 0 12px #36475a;
    cursor: text;
}

#calculator .calc-graph-fn[hidden] {
    display: none;
}

#calculator .calc-graph-fn:focus-within {
    background: #b3cdbf;
    box-shadow: 0 0 0 2px #c9e0d3, 0 0 12px #36475a;
}

/* not a function the calculator can read, as in the converter */
#calculator .calc-graph-fn.calc-bad {
    box-shadow: 0 0 0 2px #d86672, 0 0 12px #36475a;
}

/* the color of a curve: in its box, and beside the point shown */
#calculator .calc-graph-swatch {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* in its box, a click hides the curve: then only a ring of its color */
#calculator .calc-graph-fn .calc-graph-swatch {
    position: relative;
    background: var(--c);
    box-shadow: 0 0 0 2px #b6d1c2;
    cursor: pointer;
}

#calculator .calc-graph-fn .calc-graph-swatch::after { /* easier to hit than the dot */
    content: '';
    position: absolute;
    inset: -6px;
}

#calculator .calc-graph-fn.calc-graph-empty .calc-graph-swatch {
    cursor: text;
}

#calculator .calc-graph-fn.calc-graph-off .calc-graph-swatch {
    background: none;
    box-shadow: inset 0 0 0 2px var(--c);
}

#calculator .calc-graph-fn.calc-graph-off .calc-graph-input {
    color: #5b7768;
}

/* The sliders: a box with the letter and its value, as the functions' boxes, then where it
   goes from, the slider, and where it goes to. More than two scroll in the small panel */
#calculator .calc-graph-sliders {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 5px;
    margin: 7px 8px 0;
}

#calculator .calc-graph-sliders[hidden] {
    display: none;
}

#calculator .calc-graph-sliders.calc-graph-many {
    max-height: 57px;
    margin: 5px 6px 0;
    padding: 2px;
    overflow-y: auto;
}

#calculator.calc-big .calc-graph-sliders.calc-graph-many {
    max-height: 30vh;
}

#calculator .calc-graph-sliders::-webkit-scrollbar {
    width: 6px;
}

#calculator .calc-graph-sliders::-webkit-scrollbar-thumb {
    background: #6b8196;
    border-radius: 3px;
}

#calculator .calc-graph-slider {
    display: flex;
    flex: none;
    align-items: center;
    gap: 6px;
    height: 24px;
}

/* ▶ at its left, quiet until pointed at: plays the slider, and pauses it while it plays */
#calculator .calc-graph-play {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: -2px;
    border-radius: 50%;
    color: #acb4c1;
    cursor: pointer;
}

#calculator .calc-graph-play:hover {
    background: #52687d;
    color: #e2e7ee;
}

#calculator .calc-graph-play.calc-on {
    color: #c9e0d3;
}

#calculator .calc-graph-play .calc-graph-stop,
#calculator .calc-graph-play.calc-on .calc-graph-go {
    display: none;
}

#calculator .calc-graph-play.calc-on .calc-graph-stop {
    display: inline;
}

#calculator .calc-graph-val {
    display: flex;
    flex: none;
    align-items: center;
    gap: 4px;
    width: 92px;
    box-sizing: border-box;
    padding: 0 8px;
    border-radius: 5px;
    background: #a9c4b5;
    box-shadow: 0 0 12px #36475a;
    cursor: text;
}

#calculator .calc-graph-val:focus-within {
    background: #b3cdbf;
    box-shadow: 0 0 0 2px #c9e0d3, 0 0 12px #36475a;
}

#calculator .calc-graph-val.calc-bad {
    box-shadow: 0 0 0 2px #d86672, 0 0 12px #36475a;
}

#calculator .calc-graph-val i,
#calculator .calc-graph-val span {
    flex: none;
    color: #33443b;
    font: italic 14px/18px 'Play', 'Russo One', sans-serif;
}

#calculator .calc-graph-val span {
    font-style: normal;
}

#calculator .calc-graph-val input,
#calculator .calc-graph-end {
    min-width: 0;
    padding: 3px 0;
    border: 0;
    outline: none;
    background: none;
    color: #000;
    font: 14px/18px 'Play', 'Russo One', sans-serif;
    -webkit-user-select: text;
    user-select: text;
}

#calculator .calc-graph-val input {
    flex: 1;
    text-align: right;
}

/* the ends: quiet numbers on the panel, a box while one is typed in */
#calculator .calc-graph-end {
    flex: none;
    width: 34px;
    border-radius: 4px;
    color: #acb4c1;
    font-size: 12px;
    text-align: center;
}

#calculator .calc-graph-end:hover {
    background: #52687d;
}

#calculator .calc-graph-end:focus {
    background: #b3cdbf;
    color: #000;
}

#calculator .calc-graph-end.calc-bad {
    box-shadow: 0 0 0 2px #d86672;
}

/* the slider: a line of the panel's light, its knob the paper with a navy ring */
#calculator .calc-graph-range {
    flex: 1;
    min-width: 40px;
    height: 18px;
    margin: 0;
    background: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

#calculator .calc-graph-range::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: #6c8297;
}

#calculator .calc-graph-range::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: #6c8297;
}

#calculator .calc-graph-range::-webkit-slider-thumb {
    width: 14px;
    height: 14px;
    margin-top: -5px;
    border: 2px solid #22476a;
    border-radius: 50%;
    background: #b6d1c2;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

#calculator .calc-graph-range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 2px solid #22476a;
    border-radius: 50%;
    background: #b6d1c2;
    box-sizing: border-box;
}

#calculator .calc-graph-range:focus-visible {
    outline: none;
}

#calculator .calc-graph-range:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px #c9e0d3;
}

/* its y′, to draw its slope as well: quiet until pointed at or on, and none while the box is empty */
#calculator .calc-graph-fn > .calc-graph-diff {
    padding: 0 4px;
    border-radius: 4px;
    font-size: 13px;
    opacity: 0.55;
    cursor: pointer;
}

/* the fit of points, lin, quad, exp, pow, log: about 10% smaller than y′ */
#calculator .calc-graph-fn.calc-graph-data > .calc-graph-diff {
    padding-right: 6px;
    font-size: 11.73px;
}

#calculator .calc-graph-fn > .calc-graph-diff:hover {
    opacity: 1;
    background: #97b3a4;
}

#calculator .calc-graph-fn > .calc-graph-diff.calc-on {
    opacity: 1;
    background: #1f333c;
    color: #d3d9e2;
}

#calculator .calc-graph-fn.calc-graph-empty > .calc-graph-diff,
#calculator .calc-graph-fn.calc-graph-rel > .calc-graph-diff {
    display: none;
}

/* a fit the points cannot have: struck through */
#calculator .calc-graph-fn > .calc-graph-diff.calc-bad {
    text-decoration: line-through;
}

/* an equation of x and y, x² + y² = 25, has no y = before it: it is written in the box; nor have
   points, nor a function named, f(x) = x^2 */
#calculator .calc-graph-fn.calc-graph-data > span:not([class]),
#calculator .calc-graph-fn.calc-graph-named > span:not([class]),
#calculator .calc-graph-fn.calc-graph-rel > span:not([class]) {
    display: none;
}

/* its table of points, as its y′: only for points, or an empty box to start them */
#calculator .calc-graph-fn > .calc-graph-points {
    display: none;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    opacity: 0.55;
    cursor: pointer;
}

#calculator .calc-graph-fn.calc-graph-data > .calc-graph-points,
#calculator .calc-graph-fn.calc-graph-empty > .calc-graph-points {
    display: flex;
}

#calculator .calc-graph-fn > .calc-graph-points:hover {
    opacity: 1;
    background: #97b3a4;
}

#calculator .calc-graph-fn > .calc-graph-points.calc-on {
    opacity: 1;
    background: #1f333c;
    color: #d3d9e2;
}

/* the table: x and y in two columns under the boxes, its edge of the color of its box; many rows scroll */
#calculator .calc-graph-cells {
    display: grid;
    flex: none;
    grid-template-columns: 1fr 1fr;
    gap: 3px 4px;
    max-height: 102px;
    margin: 5px 8px 0 22px;
    padding: 4px 6px 4px 8px;
    border-left: 3px solid var(--c);
    border-radius: 0 5px 5px 0;
    background: #a9c4b5;
    overflow-y: auto;
}

#calculator .calc-graph-cells[hidden] {
    display: none;
}

#calculator .calc-graph-cells::-webkit-scrollbar {
    width: 6px;
}

#calculator .calc-graph-cells::-webkit-scrollbar-thumb {
    background: #6b8196;
    border-radius: 3px;
}

#calculator .calc-graph-cells-head,
#calculator .calc-graph-pair {
    display: contents;
}

#calculator .calc-graph-cells-head > i {
    color: #33443b;
    font: italic 13px/16px 'Play', 'Russo One', sans-serif;
    text-align: center;
}

#calculator .calc-graph-pair > input {
    min-width: 0;
    padding: 2px 5px;
    border: 0;
    border-radius: 3px;
    outline: none;
    background: #b6d1c2;
    color: #000;
    font: 13px/16px 'Play', 'Russo One', sans-serif;
    -webkit-user-select: text;
    user-select: text;
}

#calculator .calc-graph-pair > input:focus {
    box-shadow: 0 0 0 2px #c9e0d3;
}

/* its × at the right, quiet until pointed at; none while it is the only box */
#calculator .calc-graph-fn > .calc-graph-del {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-right: -5px;
    border-radius: 4px;
    opacity: 0.55;
    cursor: pointer;
}

#calculator .calc-graph-fn > .calc-graph-del:hover {
    opacity: 1;
    background: #97b3a4;
}

#calculator .calc-graph-fns.calc-graph-single .calc-graph-del {
    display: none;
}

#calculator .calc-graph-fn > span {
    flex: none;
    color: #33443b;
    font: italic 14px/18px 'Play', 'Russo One', sans-serif;
}

#calculator .calc-graph-input {
    flex: 1;
    min-width: 0;
    padding: 3px 0; /* 24px high: the plot keeps the room */
    border: 0;
    outline: none;
    background: none;
    color: #000;
    font: 14px/18px 'Play', 'Russo One', sans-serif;
    -webkit-user-select: text;
    user-select: text;
}

#calculator .calc-graph-input::placeholder {
    color: #5b7768;
}

/* what to do, or the x and y of the point shown, with its y to insert */
#calculator .calc-graph-note {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 20px;
    margin: 4px 12px 3px;
    overflow: hidden;
    color: #acb4c1;
    font-size: 12px;
    line-height: 20px;
    white-space: nowrap;
}

#calculator .calc-graph-note > span {
    color: #d3d9e2;
    font-size: 13px;
}

/* the dots of two curves that cross, one over the other */
#calculator .calc-graph-note .calc-graph-swatch {
    box-shadow: 0 0 0 1.5px #4a5f73;
}

#calculator .calc-graph-note .calc-graph-swatch + .calc-graph-swatch {
    margin-left: -16px;
}

/* what the point is: a root, a high or low, a crossing */
#calculator .calc-graph-note em {
    color: #acb4c1;
    font-style: normal;
}

#calculator .calc-graph-note .calc-graph-swatch + em {
    margin-left: -6px; /* close to the dot of its curve */
}

#calculator .calc-graph-note .calc-fr {
    font-size: 0.75em;
}

/* the unit of its angles, quiet at the right */
/* the plot: a piece of the display, the rest of the panel */
#calculator .calc-graph-plot {
    position: relative;
    flex: 1;
    min-height: 0;
    margin: 0 8px;
    overflow: hidden;
    border-radius: 5px;
    background: #b6d1c2;
    box-shadow: 0 0 12px #36475a;
}

#calculator .calc-graph-plot canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    touch-action: none; /* a drag moves the curve and a pinch zooms it, not the page */
    cursor: crosshair; /* the system's cross while pointing; the plot draws its own only where it is clicked */
}

#calculator .calc-graph-plot canvas:active {
    cursor: grabbing;
}

/* the view typed, at the top left of the plot: a row for x and one for y, from and to */
#calculator .calc-graph-window {
    position: absolute;
    z-index: 3;
    top: 6px;
    left: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 5px;
    border: 1px solid #4d6b80;
    border-radius: 7px;
    background: #1f333c;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    color: #d3d9e2;
    font: 13px/1.3 'Play', 'Russo One', sans-serif;
}

#calculator .calc-graph-window[hidden] {
    display: none;
}

#calculator .calc-graph-window label {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 1px 3px;
    border-radius: 4px;
}

#calculator .calc-graph-window label.calc-bad {
    box-shadow: 0 0 0 2px #d86672;
}

#calculator .calc-graph-window i {
    width: 10px;
}

#calculator .calc-graph-window input {
    width: 62px;
    padding: 2px 5px;
    border: 0;
    border-radius: 4px;
    outline: none;
    background: #a9c4b5;
    color: #000;
    font: 13px/17px 'Play', 'Russo One', sans-serif;
    text-align: right;
    -webkit-user-select: text;
    user-select: text;
}

#calculator .calc-graph-window input:focus {
    background: #c9e0d3;
}

/* the ∫ button pressed: a drag shades an area, it does not move the view */
#calculator .calc-graph-shading canvas,
#calculator .calc-graph-shading canvas:active {
    cursor: col-resize;
}

/* the point clicked, over it like a tip of the keys: what it is, then its x and y,
   each a row to click to insert; main.js places it and its point (--arrow) */
#calculator .calc-graph-pop {
    position: absolute;
    z-index: 2;
    box-sizing: border-box;
    width: max-content; /* as wide as its longest line, no wider */
    max-width: calc(100% - 8px);
    padding: 5px 4px 4px;
    background: #1f333c;
    border: 1px solid #4d6b80;
    border-radius: 7px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    color: #d3d9e2;
    font: 13px/1.3 'Play', 'Russo One', sans-serif;
    text-align: left;
    animation: calc-tip-in 0.12s ease-out;
}

#calculator .calc-graph-pop[hidden] {
    display: none;
}

/* its point: as the tip's, a triangle of the border with one of the fill inset 1px */
#calculator .calc-graph-pop::before,
#calculator .calc-graph-pop::after {
    content: '';
    position: absolute;
    left: var(--arrow, 50%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

#calculator .calc-graph-pop::before {
    top: 100%;
    width: 14px;
    height: 7px;
    margin-left: -7px;
    background: #4d6b80;
}

#calculator .calc-graph-pop::after {
    top: calc(100% - 1px);
    width: 13.172px;
    height: 6.586px;
    margin-left: -6.586px;
    background: #1f333c;
}

#calculator .calc-graph-pop.calc-graph-pop-below::before,
#calculator .calc-graph-pop.calc-graph-pop-below::after {
    top: auto;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

#calculator .calc-graph-pop.calc-graph-pop-below::before {
    bottom: 100%;
}

#calculator .calc-graph-pop.calc-graph-pop-below::after {
    bottom: calc(100% - 1px);
}

#calculator .calc-graph-pop-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 6px 3px;
    color: #acb4c1;
    font-size: 12px;
    white-space: nowrap;
}

#calculator .calc-graph-pop-head .calc-graph-swatch {
    width: 9px;
    height: 9px;
    box-shadow: 0 0 0 1.5px #1f333c;
}

#calculator .calc-graph-pop-head .calc-graph-swatch + .calc-graph-swatch {
    margin-left: -10px;
}

#calculator .calc-graph-pop-head b {
    font-weight: 400;
}

#calculator .calc-graph-pop-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    cursor: pointer;
}

/* an area that is none, as of 1/x across 0: nothing to insert */
#calculator .calc-graph-pop-none {
    padding: 2px 6px;
    white-space: nowrap;
}

#calculator .calc-graph-pop-row:hover {
    background: #34505e;
}

#calculator .calc-graph-pop-row:active {
    background: #3d5c6b;
}

/* an end of an area, to be typed over */
#calculator .calc-graph-pop-end {
    width: 108px;
    padding: 0 4px;
    border: 0;
    border-radius: 3px;
    outline: none;
    background: #34505e;
    color: inherit;
    font: inherit;
    -webkit-user-select: text;
    user-select: text;
    cursor: text;
}

#calculator .calc-graph-pop-end:focus {
    background: #d3d9e2;
    color: #000;
}

#calculator .calc-graph-pop-end.calc-bad {
    box-shadow: 0 0 0 2px #d86672;
}

#calculator .calc-graph-pop-row .calc-fr {
    font-size: 0.75em;
}

/* the arrow of insert: from the value on its left, up into the display */
#calculator .calc-graph-pop-row svg {
    flex: none;
    opacity: 0.6;
    transform: scaleX(-1);
}

#calculator .calc-graph-pop-row:hover svg {
    opacity: 1;
}

/* the table: in place of the plot, the same size */
#calculator .calc-graph-table {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    margin: 0 8px;
}

/* the examples in place of the boxes, the sliders and the plot: a search and the list, as of the constants */
#calculator .calc-graph-examples {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

#calculator .calc-graph-examples[hidden],
#calculator .calc-graph.calc-graph-browse .calc-graph-fns,
#calculator .calc-graph.calc-graph-browse .calc-graph-cells,
#calculator .calc-graph.calc-graph-browse .calc-graph-sliders,
#calculator .calc-graph.calc-graph-browse .calc-graph-note,
#calculator .calc-graph.calc-graph-browse .calc-graph-plot {
    display: none;
}

/* between the boxes an example types */
#calculator .calc-graph-ex-gap {
    display: inline-block;
    width: 18px;
}

#calculator .calc-graph-table[hidden] {
    display: none;
}

/* the first x and the step: boxes as the functions are, side by side */
#calculator .calc-graph-step {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

#calculator .calc-graph-step label {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 0 9px;
    border-radius: 5px;
    background: #a9c4b5;
    box-shadow: 0 0 12px #36475a;
    cursor: text;
}

#calculator .calc-graph-step label:focus-within {
    background: #b3cdbf;
    box-shadow: 0 0 0 2px #c9e0d3, 0 0 12px #36475a;
}

#calculator .calc-graph-step label.calc-bad {
    box-shadow: 0 0 0 2px #d86672, 0 0 12px #36475a;
}

#calculator .calc-graph-step span {
    flex: none;
    color: #33443b;
    font-size: 12px;
}

#calculator .calc-graph-step input {
    flex: 1;
    min-width: 0;
    padding: 3px 0;
    border: 0;
    outline: none;
    background: none;
    color: #000;
    font: 14px/18px 'Play', 'Russo One', sans-serif;
    text-align: right;
    -webkit-user-select: text;
    user-select: text;
}

/* what an empty box goes by: the view of the graph */
#calculator .calc-graph-step input::placeholder {
    color: #5b7768;
}

/* the rows: x, then y of each curve; a click on a value puts it in */
#calculator .calc-graph-list {
    flex: 1;
    min-height: 0;
    overflow: auto; /* down, and across where the columns of many curves are wider than the panel */
    border-radius: 5px;
    background: #b6d1c2;
    box-shadow: 0 0 12px #36475a;
}

#calculator .calc-graph-list::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

#calculator .calc-graph-list::-webkit-scrollbar-thumb {
    background: #8eab9b;
    border-radius: 3px;
}

#calculator .calc-graph-line {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) repeat(calc(var(--cols, 2) - 1), minmax(0, 1fr)); /* x is short: less room */
    min-width: calc(52px + (var(--cols, 2) - 1) * 72px); /* a column has room for a value at least */
    border-bottom: 1px solid rgba(51, 68, 59, 0.12);
}

#calculator .calc-graph-line > span {
    overflow: hidden;
    padding: 3px 7px;
    color: #000;
    font-size: 13px;
    line-height: 18px;
    text-align: right;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* x, a little apart from the values */
#calculator .calc-graph-line > span:first-child {
    background: rgba(51, 68, 59, 0.07);
    color: #33443b;
}

/* the names, staying at the top as the rows scroll */
#calculator .calc-graph-names {
    position: sticky;
    z-index: 1;
    top: 0;
    background: #a9c4b5;
}

#calculator .calc-graph-names > span {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    color: #33443b;
    font-size: 12px;
}

#calculator .calc-graph-names .calc-graph-swatch {
    width: 9px;
    height: 9px;
}

#calculator .calc-graph-cell {
    cursor: pointer;
}

#calculator .calc-graph-line > .calc-graph-cell:hover {
    background: #a3bdaf;
}

#calculator .calc-graph-line > .calc-graph-cell:active {
    background: #98b3a5;
}

/* no value there, as 1/x at 0: nothing to put in */
#calculator .calc-graph-line > .calc-graph-cell.calc-none {
    color: #5b7768;
    cursor: default;
}

#calculator .calc-graph-line > .calc-graph-cell.calc-none:hover {
    background: none;
}

#calculator .calc-graph-cell .calc-fr {
    font-size: 0.75em;
}

/* The big graph: the calculator fills the page, or its window, and shows only the graph,
   which then has the room of it all */
#calculator.calc-big {
    position: fixed !important;
    inset: 0;
    z-index: 10;
    width: auto;
    height: auto;
    margin: 0 !important;
    border: 0;
    border-radius: 0;
    background: #4a5f73;
    transform: none !important;
}

#calculator.calc-big > :not(.calc-graph, .calc-tip, .calc-menu-box) {
    display: none !important;
}

#calculator.calc-big .calc-graph {
    top: 0 !important;
    left: 0 !important;
    right: 0;
    bottom: 0;
    width: auto !important;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) calc(10px + env(safe-area-inset-bottom)) env(safe-area-inset-left);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* its button: pop out, an arrow out of the box, and pop in once it is big, an arrow into it */
#calculator .calc-graph-shrink,
#calculator.calc-big .calc-graph-grow {
    display: none;
}

#calculator.calc-big .calc-graph-shrink {
    display: inline;
}

/* the graph's own window is always big, and closes as any window does: no pop in */
#calculator.calc-alone .calc-graph-size {
    display: none;
}

/* Big on a wide page, or in the graph's own window, the graph has two columns: at the left
   its head, the boxes, their points, the sliders and the examples; at the right the line
   about the point and the plot, or the table. The plot stays beside the examples */
@media (min-width: 640px) {
    #calculator.calc-big .calc-graph.calc-open {
        display: grid;
        /* the width dragged, or as at first: as narrow as keeps the head's words at their full size,
           some 320px, wider on a wide screen; never under 270px, as GRAPH_SIDE_MIN, nor over 0.7 of
           what leaves the plot 320px, as GRAPH_SIDE_MAX and GRAPH_PLOT_MIN */
        grid-template-columns: clamp(270px, var(--calc-graph-side, clamp(320px, 26vw, 380px)), max(270px, (100% - 320px) * 0.7)) minmax(0, 1fr);
        grid-template-rows: auto auto auto auto minmax(0, 1fr);
    }

    /* The head shrinks with the column: its words get smaller, down to 10.5px at the narrowest,
       and past that the tabs are cut short, never over the line between the columns. Measured:
       its words fit at 14px from 278px of it, at 10.75px in 235px, about in a line between */
    #calculator.calc-big .calc-graph > .calc-past-head {
        grid-area: 1 / 1;
        min-width: 0;
        overflow: hidden;
        container-type: inline-size;
    }

    #calculator.calc-big .calc-graph > .calc-past-head > * {
        font-size: clamp(10.5px, 7.5cqi - 7px, 14px);
    }

    #calculator.calc-big .calc-graph-tabs {
        min-width: 0;
        overflow: hidden;
    }

    #calculator.calc-big .calc-graph .calc-past-head .calc-graph-tab {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #calculator.calc-big .calc-graph-add,
    #calculator.calc-big .calc-past-clear {
        flex: none;
    }

    #calculator.calc-big .calc-graph-fns {
        grid-area: 2 / 1;
    }

    #calculator.calc-big .calc-graph-cells {
        grid-area: 3 / 1;
        max-height: 30vh;
    }

    #calculator.calc-big .calc-graph-sliders {
        grid-area: 4 / 1;
    }

    /* a slider fits the narrowest column: its box a little narrower, the slider as short as it must be */
    #calculator.calc-big .calc-graph-val {
        width: 80px;
    }

    #calculator.calc-big .calc-graph-range {
        min-width: 16px;
    }

    #calculator.calc-big .calc-graph-examples {
        grid-column: 1;
        grid-row: 2 / -1;
    }

    #calculator.calc-big .calc-graph-note {
        grid-area: 1 / 2;
        margin-right: 38px; /* clear of pop in */
    }

    /* pop in: at the top right, above the plot, a little bigger than the head's buttons */
    #calculator.calc-big .calc-graph-size {
        position: absolute;
        top: env(safe-area-inset-top);
        right: calc(8px + env(safe-area-inset-right));
        width: 26px;
        height: 26px;
    }

    #calculator.calc-big .calc-graph-size svg {
        width: 18px;
        height: 18px;
    }

    #calculator.calc-big .calc-graph-plot,
    #calculator.calc-big .calc-graph-table {
        grid-column: 2;
        grid-row: 2 / -1;
        margin-left: 4px;
    }

    /* the line between the columns: over the room between them, shown as it is pointed at or dragged */
    #calculator.calc-big .calc-graph-split {
        display: block;
        z-index: 1;
        grid-column: 2;
        grid-row: 1 / -1;
        width: 12px;
        margin-left: -8px;
        cursor: col-resize;
        touch-action: none;
    }

    #calculator.calc-big .calc-graph-split::after {
        content: '';
        display: block;
        width: 2px;
        height: 100%;
        margin: 0 auto;
        border-radius: 1px;
        background: #8aa0b5;
        opacity: 0;
        transition: opacity 0.15s;
    }

    #calculator.calc-big .calc-graph-split:hover::after,
    #calculator.calc-big .calc-graph-split.calc-on::after {
        opacity: 1;
    }

    /* the plot's buttons, and save, bigger too */
    #calculator.calc-big .calc-graph-zoom > span {
        width: 30px;
        height: 30px;
    }

    #calculator.calc-big .calc-graph-zoom svg {
        width: 18px;
        height: 18px;
    }

    #calculator.calc-big .calc-graph-export svg {
        width: 20px;
        height: 20px;
    }

    #calculator.calc-big .calc-graph.calc-graph-browse .calc-graph-note {
        display: flex;
    }

    #calculator.calc-big .calc-graph.calc-graph-browse .calc-graph-plot {
        display: block;
    }
}

/* Big, its words and buttons are a little bigger, as there is room; not the plot, whose
   pointer is read in its own pixels: only what is on it. Not the point's popup either, which
   is put at the point in the plot's pixels: zoomed, it would be put that much further */
#calculator.calc-big .calc-graph > .calc-past-head,
#calculator.calc-big .calc-graph-fns,
#calculator.calc-big .calc-graph-cells,
#calculator.calc-big .calc-graph-sliders,
#calculator.calc-big .calc-graph-note,
#calculator.calc-big .calc-graph-table,
#calculator.calc-big .calc-graph-examples,
#calculator.calc-big .calc-graph-zoom,
#calculator.calc-big .calc-graph-window {
    zoom: 1.15;
}

#calculator.calc-big .calc-graph-pop {
    font-size: 15px;
}

/* the line between the columns is only for the big graph on a wide page */
#calculator .calc-graph-split {
    display: none;
}

/* seven curves: no more boxes */
#calculator .calc-graph-add[hidden] {
    display: none;
}

/* Big, the graph has no close button: on the website its button and Esc make it small,
   and the graph's own window closes as any window does */
#calculator.calc-big .calc-graph .calc-past-close {
    display: none;
}

/* closer, farther, the start and save, at the top right of the plot */
#calculator .calc-graph-zoom {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

#calculator .calc-graph-zoom > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: rgba(169, 196, 181, 0.85);
    box-shadow: 0 1px 4px rgba(31, 51, 60, 0.35);
    color: #1f333c;
    cursor: pointer;
}

#calculator .calc-graph-zoom > span:hover {
    background: #98b3a5;
}

#calculator .calc-graph-zoom > span:active {
    background: #8eab9b;
}

/* a button pressed, the area or the view typed: dark until it is let go */
#calculator .calc-graph-zoom > span.calc-on {
    background: #1f333c;
    color: #d3d9e2;
}

/* save is not about the view: apart from it, in the corner below, a camera alone, with no
   box: a light edge keeps it seen on a curve. A mouse on it grows it a little */
#calculator .calc-graph-export {
    top: auto;
    right: 1px;
    bottom: 1px;
}

#calculator .calc-graph-export > span,
#calculator .calc-graph-export > span:hover,
#calculator .calc-graph-export > span:active {
    width: 28px;
    height: 28px;
    background: none;
    box-shadow: none;
    opacity: 0.85;
    filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.9));
}

#calculator .calc-graph-export svg {
    width: 16px;
    height: 16px;
}

#calculator .calc-graph-export > span:hover svg {
    transform: scale(1.05);
}

#calculator .calc-graph-zoom svg {
    display: block;
}

/* ---------- formulas and constants ---------- */

/* the two tabs in the head of the panel; the graph has its two the same */
#calculator .calc-fx-tabs,
#calculator .calc-graph-tabs,
#calculator .calc-solve-tabs {
    display: flex;
    gap: 2px;
    margin-left: -6px;
}

#calculator .calc-fx .calc-past-head .calc-fx-tab, /* not the first span of the head, which has the room left */
#calculator .calc-graph .calc-past-head .calc-graph-tab,
#calculator .calc-solve .calc-past-head .calc-solve-tab,
#calculator .calc-numbers .calc-past-head .calc-solve-tab,
#calculator .calc-conv .calc-past-head .calc-solve-tab,
#calculator .calc-stats .calc-past-head .calc-solve-tab {
    flex: none;
    padding: 0 8px;
    border-radius: 4px;
    line-height: 22px;
    font-weight: 400;
    opacity: 0.7;
    cursor: pointer;
}

#calculator .calc-fx-tab:hover,
#calculator .calc-graph-tab:hover,
#calculator .calc-solve-tab:hover {
    opacity: 1;
    background: #52687d;
}

#calculator .calc-fx .calc-past-head .calc-fx-tab.calc-on,
#calculator .calc-graph .calc-past-head .calc-graph-tab.calc-on,
#calculator .calc-solve .calc-past-head .calc-solve-tab.calc-on,
#calculator .calc-numbers .calc-past-head .calc-solve-tab.calc-on,
#calculator .calc-conv .calc-past-head .calc-solve-tab.calc-on,
#calculator .calc-stats .calc-past-head .calc-solve-tab.calc-on {
    opacity: 1;
    background: #5d748a;
    color: #fff;
    font-weight: 700;
}

/* the search: a box to type in, the green of the display a little darker */
#calculator .calc-fx-search,
#calculator .calc-gx-search {
    margin: 4px 8px 6px; /* its ring of the focus takes 2px of it, and is bright: more room than under Converter */
    padding: 5px 9px;
    border: 0;
    border-radius: 5px;
    outline: none;
    background: #a9c4b5;
    box-shadow: 0 0 12px #36475a;
    color: #000;
    font: 14px/18px 'Play', 'Russo One', sans-serif;
    -webkit-user-select: text;
    user-select: text;
}

#calculator .calc-fx-search::placeholder,
#calculator .calc-gx-search::placeholder {
    color: #5b7768;
}

#calculator .calc-fx-search:focus,
#calculator .calc-gx-search:focus {
    background: #b3cdbf;
    box-shadow: 0 0 0 2px #c9e0d3, 0 0 12px #36475a;
}

#calculator .calc-fx-list,
#calculator .calc-gx-list,
#calculator .calc-sv-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px;
}

/* the cards as far below the tabs as the graph's boxes */
#calculator .calc-sv-list {
    padding-top: 4px;
}

#calculator .calc-fx-list::-webkit-scrollbar,
#calculator .calc-gx-list::-webkit-scrollbar,
#calculator .calc-sv-list::-webkit-scrollbar {
    width: 6px;
}

#calculator .calc-fx-list::-webkit-scrollbar-thumb,
#calculator .calc-gx-list::-webkit-scrollbar-thumb,
#calculator .calc-sv-list::-webkit-scrollbar-thumb {
    background: #6b8196;
    border-radius: 3px;
}

/* the name of a group: Geometry, Money … */
#calculator .calc-fx-cat,
#calculator .calc-gx-cat {
    margin: 18px 2px 5px;
    color: #acb4c1;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
}

#calculator .calc-fx-cat:first-child,
#calculator .calc-gx-cat:first-child {
    margin-top: 8px;
}

#calculator .calc-fx-none,
#calculator .calc-gx-none {
    margin: 14px 4px;
    color: #acb4c1;
    font-size: 13px;
    text-align: center;
}

/* a formula or a constant, on a piece of display */
#calculator .calc-fx-item,
#calculator .calc-gx-item,
#calculator .calc-sv-item {
    margin-bottom: 6px;
    border-radius: 5px;
    background: #b6d1c2;
    box-shadow: 0 0 12px #36475a;
    color: #000;
}

#calculator .calc-fx-row,
#calculator .calc-gx-row,
#calculator .calc-sv-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px 4px;
    border-radius: 5px;
    cursor: pointer;
}

#calculator .calc-fx-row:hover,
#calculator .calc-gx-row:hover,
#calculator .calc-sv-row:hover {
    background: #a3bdaf;
}

#calculator .calc-fx-row:active,
#calculator .calc-gx-row:active,
#calculator .calc-sv-row:active {
    background: #98b3a5;
}

#calculator .calc-fx-item.calc-on .calc-fx-row,
#calculator .calc-gx-item.calc-on .calc-gx-row,
#calculator .calc-sv-item.calc-on .calc-sv-row {
    border-radius: 5px 5px 0 0;
    background: #a3bdaf;
}

/* the card open: its header a shade darker, with a line under it, and its name in bold */
#calculator .calc-fx-item.calc-on .calc-fx-row,
#calculator .calc-sv-item.calc-on .calc-sv-row {
    background: #98b3a5;
    box-shadow: inset 0 -1px 0 rgba(58, 88, 114, 0.35);
}

#calculator .calc-fx-item.calc-on .calc-fx-name,
#calculator .calc-sv-item.calc-on .calc-sv-name {
    font-family: 'Play Bold', 'Play', sans-serif;
}

/* its name, and the formula as it is written or the constant with its value */
#calculator .calc-fx-col,
#calculator .calc-gx-col,
#calculator .calc-sv-col {
    flex: 1;
    min-width: 0;
}

#calculator .calc-fx-name,
#calculator .calc-fx-f,
#calculator .calc-gx-name,
#calculator .calc-gx-f,
#calculator .calc-sv-name,
#calculator .calc-sv-f {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#calculator .calc-fx-name,
#calculator .calc-gx-name,
#calculator .calc-sv-name {
    color: #33443b;
    font-size: 12px;
    line-height: 15px;
}

#calculator .calc-fx-f,
#calculator .calc-gx-f,
#calculator .calc-sv-f {
    font-size: 15px;
    line-height: 21px;
}

/* a formula, or a constant as its symbol = its value: its name is a label at the top
   left of its card, and the formula sits at the middle of the room under it. Every
   card of formulas is as high as one with a fraction in it, two rows, so the list is even */
#calculator .calc-fx-row:has(.calc-fx-eq),
#calculator .calc-gx-row:has(.calc-gx-eq),
#calculator .calc-sv-row:has(.calc-sv-eq) {
    position: relative;
    padding-top: 0;
    padding-bottom: 0;
}

#calculator .calc-fx-row:has(.calc-fx-eq) .calc-fx-name,
#calculator .calc-gx-row:has(.calc-gx-eq) .calc-gx-name,
#calculator .calc-sv-row:has(.calc-sv-eq) .calc-sv-name {
    position: absolute;
    left: 9px;
    top: 3px;
    max-width: calc(100% - 34px); /* clear of the arrow at the right */
}

#calculator .calc-fx-eq,
#calculator .calc-gx-eq,
#calculator .calc-sv-eq {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: content-box;
    height: 46px;
    padding-top: 8px; /* a fraction starts by the name, a formula of one row under it */
    line-height: 17px;
}

/* a constant is one row: its card is only as high as its name and that row */
#calculator .calc-fx-val,
#calculator .calc-gx-val,
#calculator .calc-sv-val {
    height: 23px;
    padding: 17px 0 4px;
}

/* a formula 1px more room over it */
#calculator .calc-fx-eq:not(.calc-fx-val) {
    padding-top: 9px;
}

/* the badges of a tool a little more room over and under them */
#calculator .calc-sv-val {
    padding-top: 19px;
    padding-bottom: 7px;
}

#calculator .calc-fx-eq > span,
#calculator .calc-gx-eq > span,
#calculator .calc-sv-eq > span {
    min-width: 0;
    padding: 2px 0; /* the bar and the foot of a root are not cut */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* a root is drawn as on the display, its bar over all that is under it */
#calculator .calc-fx-f .calc-root,
#calculator .calc-gx-f .calc-root,
#calculator .calc-sv-f .calc-root {
    margin-left: 0.72em; /* the foot of the sign keeps off the letter before it */
}

#calculator .calc-fx-f .calc-fr,
#calculator .calc-gx-f .calc-fr,
#calculator .calc-sv-f .calc-fr {
    font-size: 0.85em;
}

#calculator .calc-fx-f sup,
#calculator .calc-fx-f sub,
#calculator .calc-fx-sym sup,
#calculator .calc-fx-sym sub,
#calculator .calc-fx-name sup,
#calculator .calc-fx-name sub,
#calculator .calc-gx-f sup,
#calculator .calc-gx-f sub,
#calculator .calc-gx-name sup,
#calculator .calc-gx-name sub,
#calculator .calc-sv-f sup,
#calculator .calc-sv-f sub,
#calculator .calc-sv-sym sup,
#calculator .calc-sv-sym sub,
#calculator .calc-sv-name sup,
#calculator .calc-sv-name sub {
    font-size: 9px;
    line-height: 0;
}

/* the subtitle of a card in a light rounded badge; a few things side by side, an IPv4 and an
   IPv6 network, each in a badge of its own, in place of commas between them */
#calculator .calc-sv-pill {
    display: inline-block;
    margin: 0 5px;
    padding: 2px 9px;
    border-radius: 4px;
    background: rgba(51, 68, 59, 0.1);
}

/* the font sits low in its line: its letters half a pixel up, as much room over them as under them */
#calculator .calc-sv-pill > span {
    display: inline-block;
    transform: translateY(-0.5px);
}

/* the symbol of a constant, and the letter of a formula by its box */
#calculator .calc-fx-sym,
#calculator .calc-sv-sym {
    flex: none;
    width: 30px;
    font-size: 15px;
}

#calculator .calc-fx-unit {
    margin-left: 3px;
    color: #33443b;
    font-size: 11px;
}

/* the letters of an open formula: a box for each, then Insert */
#calculator .calc-fx-form,
#calculator .calc-sv-form {
    padding: 11px 9px 8px;
}

#calculator .calc-fx-var,
#calculator .calc-sv-var {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 5px;
}

#calculator .calc-fx-var .calc-fx-sym,
#calculator .calc-sv-var .calc-sv-sym {
    width: auto;
    min-width: 30px;
    text-align: right;
}

#calculator .calc-fx-var input,
#calculator .calc-sv-var input {
    flex: 1;
    min-width: 0;
    padding: 3px 7px;
    border: 1px solid #8eab9b;
    border-radius: 4px;
    outline: none;
    background: #a9c4b5;
    color: #000;
    font: 14px/18px 'Play', 'Russo One', sans-serif;
    -webkit-user-select: text;
    user-select: text;
}

#calculator .calc-fx-var input::placeholder,
#calculator .calc-sv-var input::placeholder {
    color: #5b7768;
}

#calculator .calc-fx-var input:focus,
#calculator .calc-sv-var input:focus {
    border-color: #3a5872;
    background: #b3cdbf;
}

/* empty, or not a number the calculator can read */
#calculator .calc-fx-var input.calc-bad,
#calculator .calc-sv-var input.calc-bad {
    border-color: #d86672;
    box-shadow: 0 0 0 1px #d86672;
}

/* the note on a line of its own, then Insert in the middle */
#calculator .calc-fx-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
}

#calculator .calc-fx-note,
#calculator .calc-sv-note {
    align-self: stretch;
    text-align: center;
    color: #4f6659;
    font-size: 11px;
    line-height: 13px;
}

#calculator .calc-fx-note:empty,
#calculator .calc-sv-note:empty {
    display: none;
}

/* why the values give no answer: a red outline as wide as the card, the words in the middle */
#calculator .calc-fx-note.calc-fx-warn,
#calculator .calc-sv-note.calc-sv-warn {
    box-sizing: border-box;
    padding: 5px 10px;
    border: 1px solid #d04554; /* the red of a wrong box, a little darker */
    border-radius: 6px;
    color: #d04554;
    font-size: 12px;
    line-height: 14px;
}

#calculator .calc-fx-insert {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 5px 0 10px; /* less after the arrow, which has room of its own */
    border-radius: 4px;
    background: #3a5872;
    color: #fff;
    font-size: 13px;
    line-height: 26px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

/* the arrow of insert in the history, mirrored: here it is at the right */
#calculator .calc-fx-insert svg {
    flex: none;
    width: 11px;
    height: 11px;
    transform: scaleX(-1);
}

#calculator .calc-fx-insert:hover {
    background: #46677f;
}

#calculator .calc-fx-insert:active {
    background: #31495e;
}

/* a faint arrow in the top right corner of a card that opens: down while it is closed, up while
   it is open. Placed over the card, so the name and the formula do not move for it */
#calculator .calc-item-collapse {
    position: absolute;
    top: 3px;
    right: 5px;
    display: flex;
    color: #33443b;
    opacity: 0.75;
    transition: transform 0.15s, opacity 0.15s;
    pointer-events: none; /* a click is on the header, which opens or closes the card */
}

#calculator .calc-fx-row:hover .calc-item-collapse,
#calculator .calc-sv-row:hover .calc-item-collapse {
    opacity: 0.95;
}

#calculator .calc-fx-item.calc-on .calc-item-collapse,
#calculator .calc-sv-item.calc-on .calc-item-collapse {
    color: #3a5872;
    opacity: 1;
    transform: rotate(180deg);
}

/* insert of a constant, drawn as insert in the history, a little bigger and lighter and
   with no hover of its own: at the right of its card, while the pointer is over it */
#calculator .calc-fx-row .calc-fx-put {
    position: absolute;
    right: 6px;
    top: 12px; /* a little under the middle */
    bottom: 0;
    margin: auto 0;
    display: none;
    width: 18px;
    height: 18px;
    opacity: 0.45;
}

/* mirrored: the line starts at the left and turns up at the right; the converter has it too */
#calculator .calc-fx-put svg {
    width: 13px;
    height: 13px;
    transform: scaleX(-1);
}

#calculator .calc-fx-row:hover .calc-fx-put {
    display: flex;
}

/* ---------- solve ---------- */

/* the boxes of a tool, in columns; a function as wide as all of them */
#calculator .calc-sv-fields {
    display: grid;
    grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
    column-gap: 8px;
}

#calculator .calc-sv-fields .calc-sv-wide {
    grid-column: 1 / -1;
}

#calculator .calc-sv-var .calc-sv-sym {
    min-width: 0;
}

/* the i of a complex root leans: room for it */
#calculator .calc-sv-value i {
    padding-right: 2px;
}

#calculator .calc-sv-form .calc-sv-note {
    margin: 2px 0 6px;
}

#calculator .calc-sv-form .calc-sv-note.calc-sv-warn {
    margin: 6px 0; /* as much room above as below */
}

/* Results on a line, between what is typed and what it gives */
#calculator .calc-sv-results {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 6px;
    color: #33443b;
    font-size: 11px;
    line-height: 13px;
    -webkit-user-select: none;
    user-select: none;
}

#calculator .calc-sv-results::before,
#calculator .calc-sv-results::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #8eab9b;
}

#calculator .calc-sv-results[hidden] {
    display: none;
}

/* the results inside the card: a little darker than it, as its boxes are */
#calculator .calc-sv-form .calc-sv-grid {
    margin: 4px 0 0;
}

#calculator .calc-sv-form .calc-sv-tile {
    border: 1px solid #8eab9b;
    background: #a9c4b5;
    box-shadow: none;
}

#calculator .calc-sv-form .calc-sv-tile:hover {
    background: #98b3a5;
}

#calculator .calc-sv-form .calc-sv-tile.calc-none {
    background: #a9c4b5;
}

/* a result as wide as all of them: a complex number, a binary one, a matrix */
#calculator .calc-sv-grid .calc-sv-wide {
    grid-column: 1 / -1;
}

/* complex numbers on the plane: its axes, a circle about 0, and a dot for each */
#calculator .calc-sv-plane {
    display: block;
    width: 100%;
    height: 130px;
    margin: 2px 0 1px;
}

#calculator .calc-sv-plane line,
#calculator .calc-sv-plane .calc-sv-ring {
    fill: none;
    stroke: #33443b;
    stroke-width: 0.012;
    opacity: 0.45;
}

/* the bits of a binary number, 64 of them on two lines */
#calculator .calc-sv-bits .calc-sv-value {
    font-size: 13px;
    line-height: 19px;
    word-spacing: 0.15em;
}

/* a list of numbers among the results, as the divisors of one: on as many lines as it needs, from the left */
#calculator .calc-sv-wrap .calc-sv-value {
    text-align: left;
    font-size: 13px;
    line-height: 19px;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* the head of the boxes of a matrix, and of its numbers among the results */
#calculator .calc-sv-head {
    margin: 4px 0 3px;
    color: #33443b;
    font: italic 14px/18px 'Play', 'Russo One', sans-serif;
}

#calculator .calc-sv-cells-in {
    column-gap: 5px;
}

#calculator .calc-sv-cells-in .calc-sv-var input {
    padding: 3px 5px;
    text-align: center;
}

/* a matrix of results: a number of it goes in with a click */
#calculator .calc-sv-matrix {
    cursor: default;
}

#calculator .calc-sv-form .calc-sv-matrix:hover {
    background: #a9c4b5;
}

#calculator .calc-sv-cells {
    display: grid;
    grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
    gap: 2px 6px;
    margin: 2px 0 3px;
}

#calculator .calc-sv-cell {
    min-width: 0;
    padding: 1px 4px;
    overflow: hidden;
    border-radius: 3px;
    font-size: 15px;
    line-height: 22px;
    text-align: right;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
}

#calculator .calc-sv-cell:hover {
    background: #98b3a5;
}

/* A matrix of more than 5 columns, up to 10, A | b of 11: its boxes and its numbers smaller, so a
   row of them fits the card, each number to as many digits as its cell has room for, the whole of it in its title. Nothing scrolls across */
#calculator .calc-sv-cells-in.calc-sv-many {
    column-gap: 2px;
}

#calculator .calc-sv-cells-in.calc-sv-many .calc-sv-var {
    margin-bottom: 3px;
}

#calculator .calc-sv-cells-in.calc-sv-many .calc-sv-var input {
    padding: 2px 0;
    font-size: 11px;
    line-height: 16px;
}

#calculator .calc-sv-cells.calc-sv-many {
    gap: 1px 2px;
}

#calculator .calc-sv-cells.calc-sv-many .calc-sv-cell {
    padding: 0;
    font-size: 10px;
    line-height: 18px;
    text-align: center;
}

/* one of two ways, each a button side by side, the one chosen lit as a tab is: payments at the
   end or at the start, a table by year or by payment */
#calculator .calc-sv-choice {
    display: flex;
    gap: 4px;
    -webkit-user-select: none;
    user-select: none;
}

#calculator .calc-sv-opt {
    flex: 1;
    padding: 2px 6px;
    border: 1px solid #8eab9b;
    border-radius: 4px;
    outline: none;
    background: #a9c4b5;
    color: #33443b;
    font-size: 13px;
    line-height: 18px;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
}

#calculator .calc-sv-opt:hover {
    background: #98b3a5;
}

#calculator .calc-sv-opt:focus-visible {
    border-color: #3a5872;
}

#calculator .calc-sv-opt.calc-on {
    border-color: #3a5872;
    background: #3a5872;
    color: #fff;
}

/* a box of a list on lines of its own, the cash flows: as a box of one line is, taller */
#calculator .calc-sv-var textarea {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 3px 7px;
    border: 1px solid #8eab9b;
    border-radius: 4px;
    outline: none;
    background: #a9c4b5;
    color: #000;
    font: 14px/18px 'Play', 'Russo One', sans-serif;
    resize: vertical;
    -webkit-user-select: text;
    user-select: text;
}

#calculator .calc-sv-var textarea::placeholder {
    color: #5b7768;
}

#calculator .calc-sv-var textarea:focus {
    border-color: #3a5872;
    background: #b3cdbf;
}

#calculator .calc-sv-var textarea.calc-bad {
    border-color: #d86672;
    box-shadow: 0 0 0 1px #d86672;
}

#calculator .calc-sv-areas .calc-sv-sym {
    align-self: start;
    padding-top: 4px;
}

/* a table of results, a payment schedule: as wide as its tile, in a border, a line between its
   rows and its columns, each number in the middle of its cell, its heads over them on a darker ground, staying there as its rows scroll
   inside the card; over it, its name and Copy table on a line of their own */
#calculator .calc-sv-table .calc-sv-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

#calculator .calc-sv-table .calc-sv-cells {
    width: 100%;
    box-sizing: border-box;
    grid-template-columns: minmax(0, 0.42fr) repeat(3, minmax(0, 1fr));
    gap: 0;
    max-height: 230px;
    margin: 0 0 3px;
    overflow-y: auto;
    border: 1px solid #7f9c8c;
    border-radius: 4px;
    background: #b3cdbf;
}

#calculator .calc-sv-table .calc-sv-cell,
#calculator .calc-sv-th {
    padding: 0 3px;
    border-left: 1px solid #8eab9b;
    border-bottom: 1px solid #a3bdaf;
    border-radius: 0;
}

/* the first column, its numbers of years or payments: no line before it */
#calculator .calc-sv-table .calc-sv-cells > :nth-child(4n + 1) {
    border-left: none;
}

#calculator .calc-sv-table .calc-sv-cell {
    font-size: 12px;
    line-height: 20px;
    text-align: center;
}

#calculator .calc-sv-th {
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom-color: #7f9c8c;
    background: #98b3a5;
    color: #33443b;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
}

#calculator .calc-sv-table .calc-sv-cells::-webkit-scrollbar {
    width: 6px;
}

#calculator .calc-sv-table .calc-sv-cells::-webkit-scrollbar-thumb {
    background: #6b8196;
    border-radius: 3px;
}

#calculator .calc-sv-copy {
    flex: none;
    padding: 0 8px;
    border-radius: 3px;
    background: #3a5872;
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

#calculator .calc-sv-copy:hover {
    background: #46677f;
}

/* Copy of a matrix of results, or of a text as a UUID, at the top right of its tile, smaller, over the line of its name */
#calculator .calc-sv-matrix,
#calculator .calc-sv-copies {
    position: relative;
}

#calculator .calc-sv-matrix:not(.calc-sv-table) .calc-sv-label,
#calculator .calc-sv-copies .calc-sv-label {
    padding-right: 46px;
}

#calculator .calc-sv-copy-m {
    position: absolute;
    top: 4px;
    right: 6px;
    padding: 0 6px;
    font-size: 11px;
    line-height: 16px;
}

/* the column of what linear equations equal, b of A | b: a line before it */
#calculator .calc-sv-rhs input {
    border-left: 3px solid #5d7a6b;
}

/* the bits of a number, to turn over with a click: a row of 16 at most, its highest bit's
   number before it, a gap between each 4, a 1 dark */
#calculator .calc-sv-flip {
    cursor: default;
}

#calculator .calc-sv-form .calc-sv-flip:hover {
    background: #a9c4b5;
}

#calculator .calc-sv-bitgrid {
    display: block;
    margin: 2px 0 3px;
}

#calculator .calc-sv-bitrow {
    display: flex;
    align-items: center;
    margin: 2px 0;
}

#calculator .calc-sv-bitat {
    flex: 0 0 3ch; /* room for 127, the same on each row so the bits line up */
    min-width: 0;
    font-variant-numeric: tabular-nums;
    margin-right: 4px;
    color: #33443b;
    font-size: 11px;
    text-align: right;
}

#calculator .calc-sv-bit {
    flex: 1 1 0;
    min-width: 0;
    max-width: 24px; /* as wide as the row has room for: a 1 a little fat */
    margin: 1px 0.5px; /* the ones apart, each its own */
    border-radius: 4px;
    font-size: 14px;
    line-height: 17px;
    text-align: center;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

#calculator .calc-sv-bit.calc-sv-nib {
    margin-left: 3.5px; /* 4px from the bit before, with its 0.5px */
}

#calculator .calc-sv-bit:hover {
    background: #98b3a5;
}

#calculator .calc-sv-bit.calc-on {
    background: #3a5872;
    color: #fff;
}

#calculator .calc-sv-bit.calc-on:hover {
    background: #46677f;
}

/* Again: more random numbers */
#calculator .calc-sv-again {
    display: table;
    margin: 0 auto 6px;
    padding: 0 12px;
    border-radius: 4px;
    background: #3a5872;
    color: #fff;
    font-size: 13px;
    line-height: 24px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

#calculator .calc-sv-again:hover {
    background: #46677f;
}

/* Example, once something is typed */
#calculator .calc-sv-example[hidden] {
    display: none;
}

/* ---------- converter ---------- */

/* its two tabs: the units, or the dates in cards, as the solver has them */
#calculator .calc-conv:not(.calc-conv-dates) .calc-sv-list,
#calculator .calc-conv-dates .calc-conv-group,
#calculator .calc-conv-dates .calc-conv-from,
#calculator .calc-conv-dates .calc-conv-note,
#calculator .calc-conv-dates .calc-conv-list {
    display: none;
}

/* a box of a date: its button for the calendar inside it, at the right */
#calculator .calc-sv-date {
    position: relative;
    display: flex;
    flex: 1;
    min-width: 0;
}

#calculator .calc-sv-date input {
    padding-right: 30px;
}

/* the boxes of a card or a formula: in a grid of a column for the names and one for the boxes, for each
   column of them, so a name is as wide as the widest over and under it, in the middle of its room, and the
   boxes line up, all to the right edge. A matrix's boxes, with no names, keep their grid */
#calculator .calc-sv-fields:not(.calc-sv-cells-in),
#calculator .calc-fx-fields {
    display: grid;
    grid-template-columns: repeat(var(--cols, 1), auto minmax(0, 1fr));
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
}

#calculator .calc-sv-fields:not(.calc-sv-cells-in) > .calc-sv-var,
#calculator .calc-fx-fields > .calc-fx-var {
    display: contents;
}

#calculator .calc-sv-fields:not(.calc-sv-cells-in) .calc-sv-sym,
#calculator .calc-fx-fields .calc-fx-sym {
    min-width: 0;
    padding-left: 4px;
    text-align: center;
}

#calculator .calc-sv-fields:not(.calc-sv-cells-in) input,
#calculator .calc-fx-fields input {
    width: 100%;
    box-sizing: border-box;
}

/* a box as wide as the columns: from the start with no name, after its name to the end with one */
#calculator .calc-sv-fields:not(.calc-sv-cells-in) > .calc-sv-wide > :first-child:not(.calc-sv-sym) {
    grid-column: 1 / -1;
}

#calculator .calc-sv-fields:not(.calc-sv-cells-in) > .calc-sv-wide > .calc-sv-sym {
    grid-column: 1;
}

#calculator .calc-sv-fields:not(.calc-sv-cells-in) > .calc-sv-wide > .calc-sv-sym + * {
    grid-column: 2 / -1;
}

/* the years, months and days to add: each name over its box, the boxes as wide as their columns, all
   three of one size, in six columns of one width that the name of the date over them takes the first of */
#calculator .calc-sv-fields:not(.calc-sv-cells-in):has(> .calc-sv-dated:not(.calc-sv-wide)) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

#calculator .calc-sv-fields:not(.calc-sv-cells-in) > .calc-sv-dated:not(.calc-sv-wide) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    grid-column: span 2;
}

#calculator .calc-sv-fields:not(.calc-sv-cells-in) > .calc-sv-dated:not(.calc-sv-wide) .calc-sv-sym {
    padding-left: 0;
}

#calculator .calc-sv-cal {
    position: absolute;
    top: 50%;
    right: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 20px;
    border-radius: 3px;
    color: #33443b;
    opacity: 0.75;
    transform: translateY(-50%);
    cursor: pointer;
}

#calculator .calc-sv-cal:hover,
#calculator .calc-sv-date.calc-on .calc-sv-cal {
    opacity: 1;
    background: #98b3a5;
}

/* the calendar, drawn as the lists of the converter are: the green of the tiles, a day lit as an item is */
#calculator .calc-cal {
    position: absolute;
    z-index: 4;
    width: 228px;
    box-sizing: border-box;
    padding: 6px 6px 5px;
    border-radius: 6px;
    background: #b6d1c2;
    box-shadow: 0 0 0 1px #8eab9b, 0 6px 18px rgba(0, 0, 0, 0.45);
    color: #000;
    font: 13px/1 'Play', 'Russo One', sans-serif;
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
}

#calculator .calc-cal[hidden] {
    display: none;
}

#calculator .calc-cal-head {
    display: flex;
    align-items: center;
    gap: 1px;
    margin-bottom: 4px;
}

#calculator .calc-cal-title {
    flex: 1;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

#calculator .calc-cal-go {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    color: #33443b;
    font-size: 16px;
    line-height: 23px;
    text-align: center;
    cursor: pointer;
}

#calculator .calc-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
}

/* the names of the weekdays, quiet over their columns */
#calculator .calc-cal-wk {
    padding: 3px 0 4px;
    color: #4f6458;
    font-size: 11px;
    text-align: center;
}

#calculator .calc-cal-day {
    height: 26px;
    border-radius: 4px;
    line-height: 26px;
    text-align: center;
    cursor: pointer;
}

/* the days of the months before and after */
#calculator .calc-cal-out {
    color: #6b8578;
}

/* under the pointer or the arrow keys */
#calculator .calc-cal-go:hover,
#calculator .calc-cal-day:hover,
#calculator .calc-cal-day.calc-lit {
    background: #98b3a5;
}

/* today: a ring; the day in the box: filled, as a tab chosen is */
#calculator .calc-cal-now {
    box-shadow: inset 0 0 0 1px #3a5872;
}

#calculator .calc-cal-day.calc-on {
    background: #3a5872;
    color: #fff;
    font-weight: 700;
}

#calculator .calc-cal-foot {
    margin-top: 4px;
    text-align: center;
}

#calculator .calc-cal-today {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 4px;
    color: #22476a;
    font-size: 12px;
    cursor: pointer;
}

#calculator .calc-cal-today:hover {
    background: #98b3a5;
}

/* what to convert, and the value with its unit: boxes like the search */
#calculator .calc-conv-pick,
#calculator .calc-conv-value {
    min-width: 0;
    border: 0;
    border-radius: 5px;
    outline: none;
    background: #a9c4b5;
    box-shadow: 0 0 12px #36475a;
    color: #000;
    font: 14px/18px 'Play', 'Russo One', sans-serif;
}

/* a list, drawn as the calculator draws: what is chosen, and an arrow */
#calculator .calc-conv-pick {
    position: relative;
    box-sizing: border-box;
    padding: 5px 24px 5px 9px;
    background-image: 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='%231f333c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 10px 6px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

#calculator .calc-conv-chosen {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#calculator .calc-conv-group {
    margin: 4px 8px 0;
    font-weight: 700;
}

#calculator .calc-conv-from {
    display: flex;
    gap: 7px;
    margin: 7px 8px 9px;
}

#calculator .calc-conv-value {
    flex: 1;
    padding: 5px 9px;
    font-size: 16px;
    -webkit-user-select: text;
    user-select: text;
}

#calculator .calc-conv-unit {
    flex: 0 1 50%;
}

#calculator .calc-conv-pick:hover,
#calculator .calc-conv-pick.calc-on {
    background-color: #b3cdbf;
}

#calculator .calc-conv-pick:focus,
#calculator .calc-conv-value:focus {
    box-shadow: 0 0 0 2px #c9e0d3, 0 0 12px #36475a;
}

#calculator .calc-conv-value:focus {
    background: #b3cdbf;
}

/* the open list: a piece of display under it, at least as wide; the one of the
   unit grows to the left, where there is room */
#calculator .calc-conv-menu {
    position: absolute;
    z-index: 2;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    max-height: 250px;
    box-sizing: border-box;
    overflow-y: auto;
    padding: 3px;
    border-radius: 5px;
    background: #b6d1c2;
    box-shadow: 0 0 0 1px #8eab9b, 0 6px 18px rgba(0, 0, 0, 0.45);
    font-weight: 400;
    cursor: default;
}

#calculator .calc-conv-unit .calc-conv-menu {
    left: auto;
    right: 0;
    width: max-content;
    max-width: 280px;
}

#calculator .calc-conv-menu[hidden] {
    display: none;
}

#calculator .calc-conv-menu::-webkit-scrollbar {
    width: 6px;
}

#calculator .calc-conv-menu::-webkit-scrollbar-thumb {
    background: #8eab9b;
    border-radius: 3px;
}

#calculator .calc-conv-item {
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    cursor: pointer;
}

/* under the pointer or the arrow keys; the one chosen is bold */
#calculator .calc-conv-item.calc-lit {
    background: #98b3a5;
}

#calculator .calc-conv-item.calc-on {
    font-weight: 700;
}

/* the symbol after a unit's name: (km) */
#calculator .calc-conv-of {
    color: #33443b;
}

#calculator .calc-conv-of sup,
#calculator .calc-conv-chosen sup {
    font-size: 9px;
    line-height: 0;
}

/* not a number the calculator can read */
#calculator .calc-conv-value.calc-bad {
    box-shadow: 0 0 0 2px #d86672, 0 0 12px #36475a;
}

/* what to do, or why nothing is shown */
#calculator .calc-conv-note {
    min-height: 15px;
    margin: 6px 12px 4px;
    overflow: hidden;
    color: #acb4c1;
    font-size: 12px;
    line-height: 15px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#calculator .calc-conv-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px;
}

#calculator .calc-conv-list::-webkit-scrollbar {
    width: 6px;
}

#calculator .calc-conv-list::-webkit-scrollbar-thumb {
    background: #6b8196;
    border-radius: 3px;
}

/* the value in another unit: its symbol over its name, and the value; a click puts it in */
#calculator .calc-conv-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    padding: 4px 9px 3px;
    border-radius: 5px;
    background: #b6d1c2;
    box-shadow: 0 0 12px #36475a;
    color: #000;
    cursor: pointer;
}

#calculator .calc-conv-row:hover {
    background: #a3bdaf;
}

#calculator .calc-conv-row:active {
    background: #98b3a5;
}

/* no value: nothing to put in */
#calculator .calc-conv-row.calc-none {
    cursor: default;
    background: #b6d1c2;
}

#calculator .calc-conv-col {
    flex: 0 1 auto;
    min-width: 60px;
}

#calculator .calc-conv-sym,
#calculator .calc-conv-name,
#calculator .calc-conv-num {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#calculator .calc-conv-sym {
    font-size: 14px;
    line-height: 18px;
}

#calculator .calc-conv-name {
    color: #33443b;
    font-size: 11px;
    line-height: 14px;
}

/* the value takes the room left, and keeps its digits first */
#calculator .calc-conv-num {
    flex: 1 0 auto;
    max-width: 70%;
    margin-left: auto;
    font-size: 17px;
    line-height: 22px;
    text-align: right;
}

#calculator .calc-conv-sym sup,
#calculator .calc-conv-num sup {
    font-size: 9px;
    line-height: 0;
}

/* insert, as a constant has it: its room at the right of every row is kept, so the
   values do not move; it shows while the pointer is over a row that has a value */
#calculator .calc-conv-row .calc-fx-put {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0 -6px 0 -8px; /* close to the value and to the edge */
    opacity: 0.45;
    visibility: hidden;
}

#calculator .calc-conv-row:not(.calc-none):hover .calc-fx-put {
    visibility: visible;
}

/* ---------- the letters A to J, the Variables tab of the formulas ---------- */

#calculator .calc-fx-search[hidden] {
    display: none;
}

/* the keys for them, over the cards, and Clear all */
#calculator .calc-var-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 9px 2px 7px;
    color: #acb4c1;
    font-size: 11px;
}

#calculator .calc-var-head kbd {
    padding: 0 4px;
    border: 1px solid #6c8297;
    border-bottom-width: 2px;
    border-radius: 3px;
    color: #d3d9e2;
    font: 10px/14px 'Play', 'Russo One', sans-serif;
}

#calculator .calc-var-clear {
    flex: none;
    padding: 2px 7px;
    border-radius: 4px;
    cursor: pointer;
}

#calculator .calc-var-clear:hover {
    background: #52687d;
    color: #fff;
}

#calculator .calc-var-clear.calc-off {
    opacity: 0.45;
    pointer-events: none;
}

/* a card a letter: the letter, its value to type over, STO and insert; close together, so
   the ten fit in the panel without a scrollbar, with less room under the last of them */
#calculator .calc-fx:has(.calc-var) {
    padding-bottom: 6px;
}

#calculator .calc-var {
    margin-bottom: 5px;
}

#calculator .calc-var:last-child {
    margin-bottom: 0;
}

#calculator .calc-var-row {
    gap: 4px;
    padding: 3.5px 4px 3.5px 10px;
}

#calculator .calc-var-k {
    flex: none;
    width: 16px;
    color: #4f6659;
    font: 17px/22px 'Play Bold', 'Play', sans-serif;
}

#calculator .calc-var-set .calc-var-k {
    color: #1f3a52;
}

#calculator .calc-var-row input {
    flex: 1;
    min-width: 0;
    padding: 2px 7px;
    border: 1px solid #8eab9b;
    border-radius: 4px;
    outline: none;
    background: #a9c4b5;
    color: #000;
    font: 14px/18px 'Play', 'Russo One', sans-serif;
    text-align: right;
    -webkit-user-select: text;
    user-select: text;
}

#calculator .calc-var-row input:focus {
    border-color: #3a5872;
    background: #b3cdbf;
}

#calculator .calc-var-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 24px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 4px;
    color: #33443b;
    font-size: 11px;
    cursor: pointer;
}

#calculator .calc-var-btn:hover {
    background: #8fac9c;
    color: #000;
}

#calculator .calc-var-btn:active {
    background: #84a091;
}

/* ---------- history ---------- */

/* as wide as the display, with each calculation on a piece of display;
   main.js lines it up with the display */
#calculator .calc-past {
    position: absolute;
    z-index: 3; /* over raad.dev too */
    bottom: 5px;
    box-sizing: border-box;
    display: none;
    flex-direction: column;
    padding-bottom: 10px;
    background: #4a5f73;
    border: 1px solid #6c8297;
    border-radius: 8px 8px 13px 13px; /* the bottom follows the calculator's corners */
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    font-family: 'Play', 'Russo One', sans-serif;
    text-align: left;
    -webkit-user-select: none;
    user-select: none;
    overflow: hidden; /* the history and the statistics: nothing goes out over their rounded corners */
}

#calculator .calc-past.calc-open {
    display: flex;
}

/* raad.dev reaches below the calculator, where the history cannot cover it */
#calculator:has(.calc-past.calc-open) .raad {
    visibility: hidden;
}

#calculator .calc-past-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px 2px 12px;
    color: #d3d9e2;
    font-size: 14px;
}

#calculator .calc-past-head span:first-child {
    flex: 1;
    font-weight: 700;
}

#calculator .calc-past-clear,
#calculator .calc-past-close,
#calculator .calc-past-export,
#calculator .calc-graph-size,
#calculator .calc-graph-add {
    height: 22px;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    opacity: 0.7;
}

#calculator .calc-past-clear {
    padding: 0 6px;
    line-height: 22px;
}

#calculator .calc-past-close,
#calculator .calc-past-export,
#calculator .calc-graph-size,
#calculator .calc-graph-add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
}

#calculator .calc-past-clear:hover,
#calculator .calc-past-close:hover,
#calculator .calc-past-export:hover,
#calculator .calc-graph-size:hover,
#calculator .calc-graph-add:hover {
    opacity: 1;
    background: #52687d;
}

/* export, with nothing in the history to export: faint, and nothing lights up */
#calculator .calc-past-export.calc-off,
#calculator .calc-past-export.calc-off:hover {
    opacity: 0.3;
    background: none;
    cursor: default;
}

/* another curve: its button always lit, so it is seen as one; a mouse on it lighter */
#calculator .calc-graph-add {
    opacity: 1;
    background: #52687d;
}

#calculator .calc-graph-add:hover {
    background: #5f778d;
}

#calculator .calc-past-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 8px 0;
}

#calculator .calc-past-list::-webkit-scrollbar {
    width: 6px;
}

#calculator .calc-past-list::-webkit-scrollbar-thumb {
    background: #6b8196;
    border-radius: 3px;
}

#calculator .calc-past-row {
    position: relative; /* holds its x */
    margin-bottom: 7px;
    padding: 6px 10px 4px;
    border-radius: 5px;
    background: #b6d1c2;
    box-shadow: 0px 0px 12px #36475a;
    color: #000;
}

#calculator .calc-past-eq,
#calculator .calc-past-res {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-spacing: -0.08em;
    position: relative; /* holds its buttons */
    border-radius: 4px;
    padding: 1px 4px;
    margin: 0 -4px;
}

/* on the right like the equation line in the display, and like it a long
   line shows its end, with the dots on the left */
#calculator .calc-past-eq {
    direction: rtl;
    text-align: right;
    color: #33443b;
    font-size: 14px;
    line-height: 18px;
}

#calculator .calc-past-res {
    font-size: 20px;
    line-height: 26px;
    text-align: right;
}

/* what the letters of a line held as it was worked out: A = 8 */
#calculator .calc-past-letters {
    overflow: hidden;
    color: #4f6659;
    font-size: 11px;
    line-height: 14px;
    text-align: right;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#calculator .calc-past-eq:hover,
#calculator .calc-past-res:hover {
    background: #a3bdaf;
}

#calculator .calc-past-eq > span {
    direction: ltr;
    unicode-bidi: isolate;
}

/* insert and copy, on the left of a line while the pointer is over it; over
   the start of a long line, so they have the line's background */
#calculator .calc-past-btns {
    position: absolute;
    z-index: 1; /* over the equation, roots inside roots included, so they can be clicked */
    top: 0;
    bottom: 0;
    max-height: 28px; /* a tall equation: only a corner at its top left is covered */
    left: 2px;
    display: none;
    align-items: center;
    gap: 3px;
    padding-right: 4px;
    background: #a3bdaf;
    word-spacing: normal;
}

#calculator .calc-past-eq:hover .calc-past-btns,
#calculator .calc-past-res:hover .calc-past-btns {
    display: flex;
}

/* and insert of a constant, drawn the same */
#calculator .calc-past-btn,
#calculator .calc-fx-put {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    color: #1f333c;
    opacity: 0.65;
    cursor: pointer;
}

#calculator .calc-past-btn:hover {
    opacity: 1;
    background: #8eab9b;
}

#calculator .calc-past-btn:active {
    opacity: 0.75;
}

/* the x at the top right corner of a calculation, while the pointer is over it */
#calculator .calc-past-del {
    position: absolute;
    top: -3px;
    right: -3px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #4a5f73;
    color: #d3d9e2;
    cursor: pointer;
}

#calculator .calc-past-row:hover .calc-past-del {
    display: flex;
}

/* a touch screen has no hover: the x is always there */
@media (hover: none) {
    #calculator .calc-past-del {
        display: flex;
    }
}

#calculator .calc-past-del:hover {
    background: #b4443c;
    color: #fff;
}

/* fraction mode: the fractions in the history, a little larger than in the display's small line */
#calculator .calc-past-eq .calc-fr {
    font-size: 0.78em;
}

#calculator .calc-past-res .calc-fr {
    font-size: 0.7em;
}

#calculator .calc-past-eq sup,
#calculator .calc-past-eq sub {
    font-size: 10px;
    line-height: 0;
}

/* the unit a calculation with angles is entered again in */
#calculator .calc-past-unit {
    margin-right: 6px;
    padding: 0 3px;
    border: 1px solid #6f8a7c;
    border-radius: 3px;
    font-size: 10px;
}

#calculator .raad {
    font-size: 0.7em;
    margin-top: 2px;
    margin-right: 22px;
    color: #acb4c1;
    float: right;
    font-family: 'Play', 'Russo One', sans-serif;
}

#calculator .form-control {
    text-align: center;
}

#calculator #display-box {
    position: relative;
    padding-right: 7px;
    padding-top: 34px;
    padding-bottom: 0px;
    width: 350px;
    height: 63px;
    margin-top: 5px;
    margin-bottom: 9px;
    font: 30px bold;
    font-family: 'Play', 'Russo One', sans-serif;
    text-align: right;
    border-radius: 5px;
    background: #b6d1c2;
    display: inline-block;
    overflow: hidden; /* nothing goes out over its rounded corners */
}

/* the line is as tall as its font asks, set with the size of the font, so the
   shade of selected text gets smaller with it; the room above and below keeps
   it 46px, the text in the middle */
#calculator #box {
    --edge-l: 8px; /* the room at the sides of the line, which the dots cover */
    --edge-r: 7px;
    --dots-gap: 8px; /* from the edge of the solid box of the dots to the small one in it: where the dots were before it */
    --pill-h: calc(100% - 24px); /* the small box: as high as the digits, in the middle of the line, and of a tall one */
    --pill-y: 12px;
    --dots-pad: 0.25em; /* between the small box and the dots */
    --dots-up: 0.2em; /* the dots are low in their glyph: this lifts them to the middle of the small box */
    --calc-line: 46px;
    --calc-lead: calc(23px - var(--calc-line) / 2);
    display: block;
    position: relative;
    margin: 0 -7px 0 0; /* out to the edges of the display, so the dots can cover all the way */
    padding: var(--calc-lead) 7px var(--calc-lead) 8px;
    line-height: var(--calc-line);
    word-spacing: -0.08em;
    white-space: nowrap;
    overflow: hidden;
}

/* a line too long for the screen: held for a moment it slides, dots mark what is hidden */
#calculator .calc-slide {
    touch-action: none;
}

#calculator .calc-grab,
#calculator .calc-log.calc-slide:active {
    cursor: grabbing;
}

/* the line above a result slides at once */
#calculator .calc-log.calc-slide {
    cursor: grab;
}

/* room after the last character: the padding of a line that scrolls is not
   scrolled to, so the end of the line gets a spacer that is */
#calculator :where(#box)::after,
#calculator .calc-log::after {
    content: '';
    display: inline-block;
    vertical-align: top;
    width: 7px;
}

#calculator .calc-log::after {
    width: 8px;
}

/* the dots: a solid box, square, out to the edge of the line and past it by 2px,
   which clips it, and over the whole height of the line, so nothing shows round
   the dots and a selection ends square against it. In it a small round box,
   drawn as its picture, the height of the digits and in the middle of them */
#calculator .calc-more-left::before,
#calculator .calc-more-right::after {
    content: '…';
    width: auto;
    text-indent: 0; /* not the indent of the line */
    position: absolute;
    z-index: 1; /* over the cursor and anything else that blinks or is animated under it */
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    background-color: #b6d1c2;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='.5' y='.5' style='width:calc(100%25 - 1px);height:calc(100%25 - 1px)' rx='6.5' ry='6.5' fill='none' stroke='%23a3bdaf' stroke-width='1'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: calc(100% - 2px - 2 * var(--dots-gap)) var(--pill-h);
}

#calculator .calc-more-left::before {
    left: calc(var(--slid) - 2px);
    padding: 0 calc(var(--dots-gap) + var(--dots-pad)) var(--dots-up) calc(2px + var(--dots-gap) + var(--dots-pad));
    background-position: calc(2px + var(--dots-gap)) var(--pill-y);
}

#calculator .calc-more-right::after {
    right: calc(0px - var(--slid) - 2px);
    padding: 0 calc(2px + var(--dots-gap) + var(--dots-pad)) var(--dots-up) calc(var(--dots-gap) + var(--dots-pad));
    background-position: right calc(2px + var(--dots-gap)) top var(--pill-y);
}

#calculator .calc-edge-left::before,
#calculator .calc-edge-right::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='.5' y='.5' style='width:calc(100%25 - 1px);height:calc(100%25 - 1px)' rx='6.5' ry='6.5' fill='none' stroke='%235b7768' stroke-width='1'/%3E%3C/svg%3E");
}

/* nothing at all is drawn in a strip on any of the four sides of a line that
   slides: not at its top or its bottom, nor at its ends; at an end with more
   beyond it, up to the small box of the dots. The line is masked as a whole,
   solid box and text together, which a clip at a half pixel does not do (it left
   a thread of text) */
#calculator .calc-slide {
    --mask-l: 1px;
    --mask-r: 1px;
    -webkit-mask-image:
        linear-gradient(to right, transparent var(--mask-l), #000 var(--mask-l)),
        linear-gradient(to left, transparent var(--mask-r), #000 var(--mask-r)),
        linear-gradient(to bottom, transparent 1px, #000 1px),
        linear-gradient(to top, transparent 1px, #000 1px);
    mask-image:
        linear-gradient(to right, transparent var(--mask-l), #000 var(--mask-l)),
        linear-gradient(to left, transparent var(--mask-r), #000 var(--mask-r)),
        linear-gradient(to bottom, transparent 1px, #000 1px),
        linear-gradient(to top, transparent 1px, #000 1px);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

#calculator .calc-slide.calc-more-left {
    --mask-l: calc(var(--dots-gap) - 1px);
}

#calculator .calc-slide.calc-more-right {
    --mask-r: calc(var(--dots-gap) - 1px);
}

#calculator .calc-slide.calc-edge-left,
#calculator .calc-slide.calc-edge-right {
    cursor: pointer;
}

#calculator #box sup,
#calculator #box sub {
    font-size: 60%;
    line-height: 0;
}

/* a root or a fraction taller than the line goes into that room before the line grows */
#calculator #box :is(.calc-root, .calc-fr):not(:is(.calc-root, .calc-fr) *) {
    margin-top: calc(0px - var(--calc-lead));
    margin-bottom: calc(0px - var(--calc-lead));
}

/* the finished equation, at the right above the result */
#calculator .calc-log {
    --edge-l: 8px;
    --edge-r: 8px;
    --dots-gap: 5px; /* from the edge of the solid box to the small one: room for it to breathe, away from the icons and the text */
    --pill-h: 18px;
    --dots-pad: 0.3em;
    --pill-y: 4px; /* the text is 28px high, at the top of the 32 */
    --dots-up: calc(0.2em + 11px);
    position: absolute;
    z-index: 1;
    left: calc(3px + var(--tools, 0) * 22px); /* clear of the buttons at the top left: main.js counts them */
    right: 0;
    padding: 0 8px 0 0; /* the room at the right is inside, so the dots cover it */
    text-indent: 5px; /* the line starts 5px from the buttons, as before the dots moved left */
    top: 3px;
    height: 32px;
    line-height: 28px;
    font-size: 15px;
    word-spacing: -0.08em;
    font-family: 'Play', 'Russo One', sans-serif;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
}

#calculator .calc-log sup,
#calculator .calc-log sub {
    font-size: 11px;
    line-height: 0;
}

#calculator .calc-mem {
    position: absolute;
    z-index: 1;
    left: 56px;
    top: 80px;
    font-size: 12px;
}

#calculator .notification {
    position: absolute;
    z-index: 1;
    left: 76px;
    top: 80px;
    font-size: 12px;
    font-family: 'Play', 'Russo One', sans-serif;
}

/* the unit, Rad or Deg, with a full turn in it beside it: 2π or 360°. The
   two are one box, so its light fits around what is shown */
#calculator .calc-rad {
    position: absolute;
    left: 1px;
    bottom: 2px;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 12px;
    outline-width: 5px;
}

/* 2π or 360°, in a light rounded frame like the unit of a calculation in the history */
#calculator .sign {
    position: relative;
    top: 0.5px; /* half a pixel lower */
    padding: 0 2px;
    border: 1px solid #8aa597;
    border-radius: 3px;
    font-size: 7px;
    line-height: 9px;
}

/* half a pixel between the 2 and the π */
#calculator .sign-pi {
    margin-left: 0.5px;
}

/* the marks in the display can be clicked: they light up under the pointer,
   in the colour of the clock */
#calculator .calc-rad:hover,
#calculator .calc-mem:hover,
#calculator .calc-frac:hover,
#calculator .calc-fmt:hover,
#calculator .calc-hold:hover,
#calculator .calc-sto:hover {
    background: #a3bdaf;
}

#calculator .calc-rad:active,
#calculator .calc-mem:active,
#calculator .calc-frac:active,
#calculator .calc-fmt:active,
#calculator .calc-hold:active,
#calculator .calc-sto:active {
    background: #98b3a5;
}

/* a little room around each mark for its light, without moving it */
#calculator .calc-mem,
#calculator .calc-frac,
#calculator .calc-fmt,
#calculator .calc-hold,
#calculator .calc-sto {
    margin: -1px -4px;
    padding: 1px 4px;
    border-radius: 3px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

/* FIX 2, SCI 3, ENG 2: the notation the results are shown in */
#calculator .calc-fmt {
    position: absolute;
    z-index: 1;
    right: 42px;
    top: 81px;
    font-size: 10px;
    font-family: 'Play', 'Russo One', sans-serif;
}

/* FRAC while fraction mode is on; left of FIX 2 */
#calculator .calc-frac {
    position: absolute;
    z-index: 1;
    right: 74px;
    top: 81px;
    font-size: 10px;
    font-family: 'Play', 'Russo One', sans-serif;
}

/* the a/b key while fraction mode is on: a small red dot at its top left corner */
#calculator .trigo-keys.calc-lit {
    position: relative;
}

#calculator .trigo-keys.calc-lit::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 4px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #bf777f;
}

#calculator .calc-second:hover {
    background: #d1868f;
}

#calculator .calc-second:active {
    background: #b26b73;
    border: 1px solid #000;
}

/* The √ is drawn: the √ of the font is narrow and reads as a V. Alone, as on
   its key, it stands in for the character, which stays for copying. Its
   strokes are as thick as the bar over a root, 0.056em: 0.9 of the 10 units
   across its 0.62em; its arm turns into the bar through a rounded corner, level with the top of the bar */
#calculator {
    --calc-root-whole: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='82' height='130' viewBox='0 0 82 130'%3E%3Cpath d='M7 80 L20 70 L33.6 126 L50.6 20' fill='none' stroke='black' stroke-width='5.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M46.16 30 L49.36 10 Q50.96 0 54.5 0 L72 0 L72 5.6 L59 5.6 Q55.74 5.6 55.34 8.1 L51.84 30 Z' fill='black'/%3E%3C/svg%3E");
    --calc-root-sign: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16' preserveAspectRatio='none'%3E%3Cpath d='M0.7 9.4 L2.7 8.3 L4.5 15 L7.645 4.6' fill='none' stroke='black' stroke-width='0.9' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M7.175 4.6 L8.05 1.7 Q8.566 0 9 0 L10.3 0 L10.3 0.68 L9.7 0.68 Q9.3 0.68 9.2 1 L8.115 4.6 Z' fill='black'/%3E%3C/svg%3E");
}

#calculator .calc-sq {
    display: inline-block;
    width: 0.62em;
    height: 1.05em;
    vertical-align: -0.16em;
    overflow: hidden;
    font-style: normal;
    -webkit-text-fill-color: transparent;
    background: currentColor;
    -webkit-mask: var(--calc-root-sign) no-repeat 0 0 / 100% 100%;
}

/* in an equation, the √ and a bar over what is under it, as tall as that is */
#calculator .calc-root {
    position: relative;
    display: inline-block;
    margin-left: 0.62em;
    padding: 0.05em 0.06em 0 0.06em;
    --calc-bar: max(1px, 0.056em);
    border-top: var(--calc-bar) solid transparent;
    line-height: 1.15;
}

#calculator .calc-root::before {
    content: '';
    position: absolute;
    left: -0.62em;
    top: calc(0px - var(--calc-bar));
    bottom: -0.05em;
    width: calc(100% + 0.62em);
    background: currentColor;
    /* the whole sign and bar is one drawing, cut in nine: the corner and the
       foot keep their size, the arm stretches with the root, and the bar
       stretches along it at its own thickness */
    -webkit-mask-box-image: var(--calc-root-whole) 30 10 10 62 / 0.3em 0 0.1em 0.62em stretch;
    pointer-events: none; /* only drawn: a click goes to what is under it, as a box of a template */
}

/* fraction mode: a division drawn as a fraction, one part over the other */
#calculator .calc-fr {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch; /* the bar runs the width of the wider part, a root or a product included */
    text-align: center;
    vertical-align: middle;
    margin: 0 0.08em;
    font-size: 0.6em;
    line-height: 1.05;
}

#calculator .calc-fr > span {
    padding: 0 0.15em;
    white-space: nowrap;
}

/* a root in a fraction keeps the rows close, and the whole fraction on the display
   sits above the FRAC and FIX labels under the line, not over them */
#calculator .calc-fr .calc-root {
    line-height: 1;
}

#calculator #box > .calc-fr {
    position: relative;
    top: -7px;
}

/* the line clips what is past its edge: room above it, so the bar of a root
   in the top row is not cut off */
#calculator #box:has(> .calc-fr) {
    padding-top: calc(10px + var(--calc-lead));
    margin-top: -10px;
}

#calculator .calc-fr > span:first-child {
    padding-bottom: 0.1em; /* the foot of a root keeps off the line */
}

#calculator .calc-fr > span + span {
    border-top: 1px solid currentColor;
    padding-top: 0.14em; /* the bar of a root keeps off the line */
}

/* a fraction in a fraction is written with a slash, so the line keeps two rows */
#calculator .calc-fr .calc-fr {
    display: inline;
    margin: 0;
    font-size: 1em;
}

#calculator .calc-fr .calc-fr > span {
    padding: 0;
}

#calculator .calc-fr .calc-fr > span + span {
    border-top: 0;
}

#calculator .calc-fr .calc-fr > span + span::before {
    content: '/';
}

/* the line above the result is small already */
#calculator .calc-log .calc-fr {
    font-size: 0.75em;
}

/* the line is 32px high: the rows of a fraction in it sit close, and a root's
   bar and foot take little room, so none of it is cut */
#calculator .calc-log .calc-fr {
    line-height: 1;
}

#calculator .calc-log .calc-fr > span:first-child {
    padding-bottom: 0.03em;
}

#calculator .calc-log .calc-fr > span + span {
    padding-top: 0.06em;
}

#calculator .calc-log .calc-fr .calc-root {
    padding-top: 0;
    line-height: 0.95;
}

/* the small lines give a power a fixed size, about that of the text in a
   fraction: there it is set smaller than the text it stands on */
#calculator .calc-log .calc-fr sup,
#calculator .calc-log .calc-fr sub,
#calculator .calc-past-eq .calc-fr sup,
#calculator .calc-past-eq .calc-fr sub {
    font-size: 70%;
}

/* the part still to be entered */
#calculator .calc-fr-empty::before {
    content: '';
    display: inline-block;
    width: 0.55em;
    height: 0.8em;
    margin-top: 0.1em;
    border: 1px dotted currentColor;
}

/* the cursor while the equation is edited; it takes no room of its own */
/* a box of a template being filled in, dotted as any part still to be entered; the one in
   focus takes what is typed, the others are lighter. An empty one can be clicked to go there */
#calculator .calc-box {
    cursor: pointer;
}

#calculator .calc-box:not(.calc-focus)::before {
    border-color: color-mix(in srgb, currentColor 40%, transparent);
}

/* what a function or a box of a template holds while it is typed: a dotted frame round it
   shows where it ends, as a bracket would; lighter where typing does not go now */
#calculator .calc-frame {
    display: inline-block;
    padding: 0 0.08em;
    border: 1px dotted currentColor;
    line-height: 1.15;
}

#calculator .calc-frame:not(.calc-focus) {
    border-color: color-mix(in srgb, currentColor 40%, transparent);
}

/* the box after a key of two numbers, 5 nCr □, a space from it */
#calculator .calc-next {
    margin-left: 0.25em;
}

#calculator .calc-cursor {
    display: inline-block;
    width: 2px;
    height: 0.85em;
    margin-right: -2px;
    vertical-align: -0.08em;
    background: currentColor;
    animation: calc-blink 1s steps(1) infinite;
}

@keyframes calc-blink {
    50% {
        opacity: 0;
    }
}

#calculator .calc-hold,
#calculator .calc-sto {
    position: absolute;
    z-index: 1;
    right: 8px;
    top: 80px;
    font-size: 12px;
    font-family: 'Play', 'Russo One', sans-serif;
}

/* STO→ waits for its letter: it blinks as the cursor does */
#calculator .calc-sto:not(:empty) {
    animation: calc-blink 1s steps(1) infinite;
}

#calculator .calc-top {
    margin: 7px;
    display: inline-block;
}

#calculator .calc-left {
    position: relative;
}

#calculator .calc-down {
    margin: 11px;
    display: inline-block;
}



#calculator .trigo-keys {
    box-sizing: border-box; /* zoomed out, the browser draws a border thicker: inside the key, not around it */
    width: 42px;
    height: 29px;
    padding-bottom: 1px; /* the font draws its letters a little low */
    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;
}

#calculator .calc-second {
    background-color: #222;
    box-sizing: border-box;
    width: 42px;
    height: 29px;
    padding-bottom: 1px; /* the font draws its letters a little low */
    font-size: 1em;
    color: #fff;
    margin: 3px;
    cursor: pointer;
    background: #bf777f; /* filled like the DEL key */
    border: 1px solid #7d4a51;
    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;
}

/* MODE: four capitals, a little smaller to fit the key. Set on the label, so a
   press, which sets the key's own size, does not make it bigger */
#calculator .calc-mode > div {
    font-size: 0.85em;
}

#calculator .trigo-keys svg {
    display: block;
}

/* nCr and nPr: n and r smaller, at the sides of the C or P */
#calculator .calc-ncr i {
    font-size: 0.75em;
    font-style: normal;
}

#calculator .calc-ncr i:first-child {
    vertical-align: 0.35em;
}

#calculator .calc-ncr i:last-child {
    vertical-align: -0.2em;
}

/* raised and lowered letters must not push the label off centre */
#calculator .trigo-keys sup,
#calculator .trigo-keys sub,
#calculator .calc-second sup,
#calculator .calc-second sub {
    line-height: 0;
}

#calculator .trigo-keys:hover {
    background: #345361;
    border: 1px solid #1a2f38;
    border-radius: 5px;
}

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

#calculator .keys {
    padding: 0px;
    color: #fff;
    font-family: 'Play', 'Russo One', sans-serif;
    font-size: 2em;
    cursor: pointer;
    margin: 1px;
    box-sizing: border-box;
    width: 66px;
    height: 54px;
    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;
}

#calculator .keys:hover {
    color: #fff;
    background: #91a4b5;
}

#calculator .keys:active {
    color: #fff;
    background: #758492;
    border: 2px solid #3f4969;
}

#calculator .keys2 {
    background: #4a5f73;
}

#calculator .keys2:hover {
    background: #52687d;
}

#calculator .keys2:active {
    background: #425669;
    border: 2px solid #3f4969;
}

#calculator .del-ac {
    background: #bf777f;
}

/* DEL and C: slightly smaller letters, on the same centre line as the digits */
#calculator .del-ac > div {
    font-size: 0.85em;
    line-height: 37px;
}

#calculator .del-ac:hover {
    background: #d1868f;
}

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

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

#calculator .keys:active {
    transform: translateY(1px);
}

#calculator .trigo-keys:active,
#calculator .calc-second:active {
    transform: translateY(1px);
}

#calculator .trigo-keys:active {
    background: #223a45;
    border-color: #1a2f38;
}

#calculator .calc-second:active {
    background: #b05a64;
    border-color: #7d4a51;
}

#calculator .equal {
    width: 138px;
    /*    background: #3f4661;*/
}

/* the display can be selected and copied, and the boxes too; the line above it opens in the display for that, with a double click */
#calculator #box,
#calculator textarea {
    -webkit-user-select: text;
    user-select: text;
}

/* selected text, in the display and the boxes of the panels: a light shade only */
#calculator ::selection {
    background: rgba(31, 51, 60, 0.16);
    color: inherit;
}

/* the unit can be clicked to switch it */
#calculator .calc-rad {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

/* what a key does, over it while the pointer rests on it */
#calculator .calc-tip {
    position: absolute;
    z-index: 6;
    width: 214px;
    box-sizing: border-box;
    padding: 8px 10px 9px;
    background: #1f333c;
    border: 1px solid #4d6b80;
    border-radius: 7px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    color: #d3d9e2;
    font: 12px/1.4 'Play', 'Russo One', sans-serif;
    text-align: left;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    animation: calc-tip-in 0.12s ease-out;
}

/* the tip of a result: it takes the pointer, for its buttons; the result in full, large, to select */
#calculator .calc-peek {
    pointer-events: auto;
}

#calculator .calc-peek-value {
    margin: 4px 0 7px;
    color: #fff;
    font-size: 16px;
    line-height: 1.3;
    overflow-wrap: anywhere;
    -webkit-user-select: text;
    user-select: text;
}

/* the unit of a constant, light on the dark tip */
#calculator .calc-peek-value .calc-fx-unit {
    color: inherit;
    font-size: 12px;
    opacity: 0.75;
}

#calculator .calc-peek-value .calc-fr {
    font-size: 0.65em;
}

#calculator .calc-peek-acts {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

#calculator .calc-peek-act {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 4px;
    background: #2e4757;
    cursor: pointer;
}

/* the arrow of Insert mirrored, as on Insert of a formula: from the left, up into the display */
#calculator .calc-peek-act svg {
    flex: none;
    width: 11px;
    height: 11px;
    transform: scaleX(-1);
}

#calculator .calc-peek-act:hover {
    background: #3d5a6d;
    color: #fff;
}

#calculator .calc-tip[hidden] {
    display: none;
}

@keyframes calc-tip-in {
    from {
        opacity: 0;
        transform: translateY(3px);
    }
}

/* the point toward the middle of the key, centred on --arrow: a triangle in
   the border colour from the box's edge, and the fill's triangle inset 1px
   (45deg sides: 1.414px across) over it, so the outline runs unbroken from
   the box's border into the point */
#calculator .calc-tip::before,
#calculator .calc-tip::after {
    content: '';
    position: absolute;
    left: var(--arrow, 50%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

#calculator .calc-tip::before {
    top: 100%;
    width: 14px;
    height: 7px;
    margin-left: -7px;
    background: #4d6b80;
}

#calculator .calc-tip::after {
    top: calc(100% - 1px);
    width: 13.172px;
    height: 6.586px;
    margin-left: -6.586px;
    background: #1f333c;
}

#calculator .calc-tip.calc-tip-below::before,
#calculator .calc-tip.calc-tip-below::after {
    top: auto;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

#calculator .calc-tip.calc-tip-below::before {
    bottom: 100%;
}

#calculator .calc-tip.calc-tip-below::after {
    bottom: calc(100% - 1px);
}

#calculator .calc-tip-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}

#calculator .calc-tip-head b {
    flex: 1;
    color: #fff;
    font-size: 13px;
}

/* the function 2nd gave the key */
#calculator .calc-tip-2nd {
    padding: 0 4px;
    border-radius: 3px;
    background: #d86672;
    color: #fff;
    font-size: 10px;
    line-height: 15px;
}

#calculator .calc-tip kbd {
    padding: 0 5px;
    background: #fff; /* a white keyboard key */
    border: 1px solid #c5ccd6;
    border-bottom: 2px solid #9aa5b3;
    border-radius: 4px;
    color: #1f333c;
    font: 10px/15px 'Play', 'Russo One', sans-serif;
    white-space: nowrap;
}

/* what 2nd turns the key into */
#calculator .calc-tip-more {
    margin-top: 5px;
    padding-top: 4px;
    border-top: 1px solid #34505e;
    color: #acb4c1;
    font-size: 11px;
}

#calculator .calc-tip sup,
#calculator .calc-tip sub {
    font-size: 9px;
    line-height: 0;
}

/* the menu of a right click, in the colours of the history */
#calculator .calc-menu-box {
    position: absolute;
    z-index: 5;
    min-width: 92px;
    padding: 4px;
    background: #4a5f73;
    border: 1px solid #6c8297;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    font: 14px 'Play', 'Russo One', sans-serif;
    color: #d3d9e2;
    text-align: left;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
}

#calculator .calc-menu-box[hidden] {
    display: none;
}

#calculator .calc-menu-box > div {
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
}

#calculator .calc-menu-box > div:hover {
    background: #52687d;
    color: #fff;
}

/* what cannot be done now: Cut with nothing selected */
#calculator .calc-menu-box > .calc-off {
    opacity: 0.4;
    cursor: default;
}

#calculator .calc-menu-box > .calc-off:hover {
    background: none;
    color: inherit;
}

/* a line between the lines of the menu: Insert Var and Store in Var set apart */
#calculator .calc-menu-box > hr {
    height: 1px;
    margin: 4px 6px;
    border: 0;
    background: #6c8297;
    opacity: 0.6;
}

/* the arrow of a line that opens the letters, at its right */
#calculator .calc-menu-box > div:has(.calc-menu-more) {
    display: flex;
    align-items: center;
}

#calculator .calc-menu-more {
    flex: none;
    margin: 0 -2px 0 auto;
    padding-left: 16px;
    opacity: 0.7;
}

/* Store in Var: the letters two by two, each with what it holds */
#calculator .calc-menu-box.calc-menu-letters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px 2px;
}

#calculator .calc-menu-box.calc-menu-letters[hidden] {
    display: none;
}

#calculator .calc-menu-val {
    display: inline-block;
    max-width: 72px;
    margin-left: 8px;
    overflow: hidden;
    color: #aab6c4;
    font-size: 12px;
    vertical-align: bottom;
    text-overflow: ellipsis;
}

#calculator .calc-menu-box > div:hover .calc-menu-val {
    color: inherit;
}

#calculator .calc-blank {
    position: absolute;
    z-index: -1;
    opacity: 0;
    width: 0px;
    height: 0px;
    padding: 0px;
    margin: 0px;
}