style.css

:root {
    --max-width: 40rem;

    --item-hue-number: 240;

    --item-hue-op: 60;
    --item-border-op: white;

    --help-link-bg-color: hsl(195.3, 77.5%, 72.2%);
    --help-link-text-color: black;

    --bg-color: white;
    --text-color: black;

    --item-hue: 0;
    --item-sat: 50%;
    --item-lum: 85%;
    --item-border-color: transparent;
    --item-border-color-selected: white;
    --edit-name-border-color: black;

    --notation-color: hsl(0,0%,40%);

    --button-hue: 0;
    --button-sat: 0%;
    --button-lum: 80%;
    --button-disabled-lum-scale: 1.5;
    --button-disabled-text-color: #eee;

    --button-text-color: black;

    --digit-hue: 120;
    --digit-sat: 50%;
    --digit-lum: 75%;

    --constant-hue: 60;
    --constant-sat: 50%;
    --constant-lum: 65%;

    --op-hue: 30;
    --op-sat: 50%;
    --op-lum: 55%;
    --op-text-color: white;

    --input-color: black;
    --input-color-new: hsl(0,0%,50%);

    --result-line-color: black;

    --stack-border-color: #ccc;
    --stack-bg-color: #eee;
}

@media (prefers-color-scheme: dark) {
    :root {
        --item-border-op: black;

        --help-link-bg-color: hsl(195.3, 77.5%, 22.2%);
        --help-link-text-color: white;

        --bg-color: black;
        --text-color: white;

        --item-lum: 25%;
        --item-border-color-selected: #888;
        --edit-name-border-color: white;

        --notation-color: hsl(0,0%,80%);

        --button-lum: 20%;
        --button-disabled-lum-scale: 0.3;
        --button-disabled-text-color: #888;

        --button-text-color: white;

        --digit-lum: 15%;

        --constant-lum: 20%;

        --op-lum: 40%;
        --op-text-color: white;

        --input-color: white;
        --input-color-new: hsl(0,0%,50%);

        --result-line-color: white;

        --stack-border-color: #444;
        --stack-bg-color: #222;
    }
}

html {
    font-size: 2svh;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg-color);
    color: var(--text-color);
}

#app {
  display: grid;
  justify-items: center;
}

#help-link {
  z-index: 1000;
  position: absolute;
  left: 0;
  top: 0;
  background: var(--help-link-bg-color);
  padding: 0.5em;
  color: var(--help-link-text-color);
  font-family: sans-serif;
  font-style: italic;
  border-radius: 0 0 1em;
}

.calculator {
    position: absolute;
    height: 100svh;
    width: 100svw;
    max-width: var(--max-width);
    display: grid;
    grid: 1fr repeat(6,7svh) 4svh / repeat(5,1fr);
    grid-auto-rows: 7svh;
    grid-template-areas: 
        "display display display display display"
        "input input input input delete"
        "buttons buttons buttons buttons buttons"
    ;
    grid-gap: 0.1em;
    padding-bottom: 1.5em;
}

.calculator.item-search {
    grid: 
        50svh 7svh 1fr / 1fr 4fr;
    grid-template-areas: 
        "display display"
        "back input"
        "matches matches"
    ;
    
}
.calculator.item-search .back-to-calculator {
    grid-area: back;
}
.calculator.item-search .search {
    grid-area: input;
    font-size: inherit;
    border: none;
    border-bottom: medium solid currentColor;
}
.calculator.item-search .matching-items {
    grid-area: matches;
    height: 100%;
    overflow: auto scroll;
    list-style: none;
    padding-left: 1em;
}
.calculator.item-search .matching-items .named-item {
    padding: 0 1em;
    margin: 0.5em 0;
    border-radius: 0.2em;
    height: 1.5em;
}

.calculator .buttons {
    grid-area: buttons;
    display: grid;
    grid-gap: 0.1em;
    grid-template-columns: repeat(5,1fr);
    grid-auto-rows: 7svh;
    grid-template-areas: 
        "next-screen pop swap copy undo"
        "screen screen screen screen screen"
        "screen screen screen screen screen"
        "screen screen screen screen screen"
        "screen screen screen screen screen"
        "up down left right add-custom"
    ;
}
.calculator .buttons > .screens {
    grid-area: screen;
    overflow-x: hidden;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    scroll-snap-type: y mandatory;
    position: relative;
}

.calculator .buttons .screen {
    grid-gap: 0.1em;
  display: grid;
  width: 100%;
  height: 100%;
  flex-basis: 100%;
  flex-shrink: 0;
  scroll-snap-align: center;
  grid-template-columns:repeat(5,1fr);
  grid-template-areas: 
      "num-7 num-8 num-9 constant-pi constant-e" 
      "num-4 num-5 num-6 op-mul op-div"
      "num-1 num-2 num-3 op-add op-sub"
      "num-0 sign dot push push"
      ;
}
.calculator .buttons .screen .nothing-here {
    grid-column: 1 / 6;
    grid-row: 1 / 5;
    align-self: center;
    justify-self: center;
    font-style: italic;
    font-family: sans-serif;
}

.editor {
    position: absolute;
    height: 100svh;
    width: 100svw;
    max-width: 40rem;
    display: grid;
    grid: 4svh 1fr 4svh repeat(4,7svh) 4svh / repeat(5,1fr);
    grid-auto-rows: 7svh;
    grid-template-areas: 
        "code-desc symbol-label symbol kind-label kind"
        "code code code code code"
        "warning warning warning warning warning"
        "num-7 num-8 num-9 constant-pi constant-e"
        "num-4 num-5 num-6 op-mul op-div"
        "num-1 num-2 num-3 op-add op-sub"
        "num-0 sign dot push push"
        "up down left right ."
    ;
    grid-gap: 0.1em;
    padding-bottom: 0.5em;
}

.editor .code {
  grid-area: code;
  border: none;
  font-size: 1em;
  font-family: monospace;
  border: thick solid var(--stack-border-color);
  padding: 0.2em;
  resize: none;
}
.editor .warning {
  grid-area: warning;
}
.editor .back-to-calculator {
  grid-area: num-7;
}
.editor label { 
  font-size: 1em;
  line-height: 2em;
  font-family: sans-serif;
  text-align: right;
  padding-right: 0.5em;
}
.editor label[for="editor-code"] {
  grid-area: code-desc;
  text-align: left;
  font-family: monospace;
  color: hsl(0,0%,50%);
}
.editor label[for="editor-symbol"] {grid-area: symbol-label; }
.editor label[for="editor-kind"] { grid-area: kind-label; }
.editor #editor-kind { 
  font-size: 1em;
  grid-area: kind; 
}
.editor #editor-symbol {
    overflow-x: auto;
    grid-area: symbol;
    width: 100%;
    height: 100%;
    border: thin solid var(--stack-border-color);
    text-align: left;
    font-size: 1.5em;
    font-family: monospace;
    line-height: 2em;
}
.editor .editable-op.current {
    background: hsl(120,50%,75%);
}
.editor .editable-op.current:hover {
    background: hsl(120,50%,85%);
}
.editor .editable-op.current:active {
    background: hsl(120,50%,65%);
}

.calculator > .stack {
    grid-area: display;
    padding: 0 0.2em 0.5em 0.2em;
    overflow-y: auto;
    font-size: 1.5rem;
    border-bottom: thick solid var(--stack-border-color);
    background: var(--stack-bg-color);
}
.calculator .stack .stack {
    font-size: 1rem;
}
.calculator > .stack > .stack-items {
    justify-content: end;
}
input {
    color: inherit;
    background: var(--bg-color);
}
button {
    border: none;
    border-radius: 0.2em;
    padding: 0;
    font-size: 1.5em;
    --button-lum-scale: 1;
    --button-sat-scale: 1;
    background: hsl(var(--button-hue), calc(var(--button-sat-scale) * var(--button-sat)), calc(var(--button-lum-scale) * var(--button-lum)));
    cursor: pointer;
    color: var(--button-text-color);
}
button:hover {
    --button-lum-scale: 1.1;
}
button:active {
    --button-lum-scale: 0.9;
}
button:disabled {
    --button-sat-scale: 0.5;
    --button-lum-scale: var(--button-disabled-lum-scale);
    --button-text-color: var(--button-disabled-text-color) !important;
    cursor: not-allowed;
}

button.add-custom {
  grid-area: num-7;
}

.calculator > .input {
    overflow-x: auto;
    grid-area: input;
    width: 100%;
    height: 100%;
    padding: 0 1em 0;
    border: none;
    text-align: right;
    font-size: 1.5em;
    font-family: monospace;
    line-height: 2em;
    color: var(--input-color);
    border-bottom: medium solid currentColor;
}

.calculator > .input.new {
    --input-color: var(--input-color-new);
    font-style: italic;
}

.op > .stack {
    margin-left: 1em;
}
.stack {
    font-family: monospace;
    position: relative;
}
.stack-items {
    display: grid;
    grid-auto-flow: row;
    justify-content: start;
    justify-items: start;
    align-content: end;
    margin: 0;
    padding: 0;
    list-style: none;
    min-height: 100%;
}
.stack ~ * {
}
.op > .symbol {
    padding-left: 1em;
}
.result {
    border-top: thin solid var(--result-line-color);
}

.result .more-digits {
  width: 80svw;
  max-width: 32rem;
  overflow-y: scroll;
  white-space: pre-wrap;
  height: 3em;
}
.result .more-digits .frac {
    font-style: italic;
}
.result .error {
    font-style: italic;
    font-size: 0.8em;
}

.stack-enter, .stack-leave-to {
    opacity: 0;
}
.stack-leave-active {
    opacity: 0;
    position: absolute;
    bottom: 0.5em;
    right: 1em;
}

.item {
    padding: 0.1em 0.3em;
    border-radius: 0.2em 0.2em 0.2em 0;
    border: medium solid var(--item-border-color);
    position: relative;
    line-height: 1em;
    background-color: hsl(var(--item-hue), var(--item-sat), var(--item-lum));
}
.item .label {
  font-size: 0.6em;
  text-align: right;
  white-space: nowrap;
}
.item-container .edit-name {
  font-family: monospace;
  background: none;
  border: none;
  border-bottom: thin solid var(--edit-name-border-color);
  margin-bottom: 0.5em;
  width: 5em;
}
.item-container .edit-name:focus {
    width: auto;
}
[data-kind="op"] {
    --item-hue: var(--item-hue-op);
    border-color: var(--item-border-op);
}
[data-kind="number"] {
    --item-hue: var(--item-hue-number);
}
.item.selected {
    border-color: var(--item-border-color-selected);
    border-style: dashed;
}

.item-container {
  justify-self: end;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "notation item";
  grid-gap: 1em;
  max-width: 100%;
}
.item-container > .notation {
  align-self: end;
  grid-area: notation;
  color: var(--notation-color);
  font-style: italic;
  font-size: 0.9em;
}
.item-container .item {
  grid-area: item;
}

.stack-items > .item-container ~ .item-container {
    margin-top: 0.1em;
}

.backspace {
    grid-area: delete;
}
.push {
    grid-column: span 2;
}
.dot {
    grid-area: dot;
}
.sign {
    grid-area: sign;
}

.calculator > .buttons button.named-item {
    font-family: monospace;
}

.calculator > .buttons button.digit {
    --button-hue: var(--digit-hue);
    --button-sat: var(--digit-sat);
    --button-lum: var(--digit-lum);
}
.calculator > .buttons button.constant {
    --button-hue: var(--constant-hue);
    --button-sat: var(--constant-sat);
    --button-lum: var(--constant-lum);
}
.calculator > .buttons button.op {
    --button-hue: var(--op-hue);
    --button-sat: var(--op-sat);
    --button-lum: var(--op-lum);
    --button-text-color: var(--op-text-color);
}
.pop {
    grid-area: pop;
}
.swap {
    grid-area: swap;
}
.copy {
    grid-area: copy;
}
.undo {
    grid-area: undo;
}
.up {
    grid-area: up;
}
.down {
    grid-area: down;
}
.left {
    grid-area: left;
}
.right {
    grid-area: right;
}

.named-editor {
    width: 100vw;
    max-width: var(--max-width);
    padding: 1em;
}

.named-editor .back-to-calculator {
    padding: 0.5em;
    width: 100%;
}

.named-editor .name {
    padding: 0.1em 0.3em;
    border-radius: 0.3em 0.3em 0 0;
    border: medium solid transparent;
    line-height: 1em;
    background-color: hsl(var(--item-hue), var(--item-sat), var(--item-lum));
    font-family: monospace;
}

.named-editor .value {
    font-family: monospace;
    padding: 0.5em;
    margin: 0 0 1em 0;
    background: var(--stack-bg-color);
    border-radius: 0 0 0.3em 0.3em;
}

.named-editor .value input {
    font-size: 1em;
    width: 100%;
    border: none;
    border-bottom: thin solid currentColor;
}

.named-editor .value .result {
    border-top: none;
}
.named-editor .value .result .more-digits {
    height: 5em;
}