html {
    scroll-behavior: smooth;
}
body {
    font-family: 'inria sans', sans-serif;
    font-size: 1.125rem; /* 18 px */
}
label { 
/*    line-height: calc(1.75 / 1.125) 
*/}
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.25rem;
}
p {
    margin-top: 0
}
p:last-child {
    margin-bottom: 0
}
img {
    width: 100%;
    height: auto;
}
button {
    padding: .25rem .5rem;
    line-height: 100%;
}
input, textarea, select {
    width: 100%;
    resize: none;
    outline: none;
}
select {
    padding: 0.25rem;
}
input[type=radio] {
    width: unset;
}
input[type=checkbox] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: inherit;
    border: 1px solid black;
    border-radius: 2px;
    width: 1rem;
    height: 1rem; 
    cursor: pointer;
    position: relative;
}
input[type=checkbox]:checked
{
    background-color: dimgray;
    background: dimgray url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") .125rem .125rem no-repeat;
}
.link-button {
    padding: .25rem .5rem;
    line-height: 100%;
    background-color: #efefef;
    color: unset;
    border-width: 1px;
    border-style: solid;
    border-radius: 2px;
    border-color: #767676;
    cursor: default;
    text-decoration: none;}
.link-button:hover {
    background-color: #dfdfdf;
}
.checkbox-btn {
    padding: 0;
    background-color: transparent;
    border: none;
    outline: none;
}
.checkbox-btn-radio + label > .checkbox-btn-box {
    display: none
}
.checkbox-btn-radio:not(:checked) + label > .unchecked {
    display: flex
}
.checkbox-btn-radio:checked + label > .checked {
    display: flex
}
.checkbox-btn-box { 
    height: 1.2rem;
    width: 1.2rem;
    border: 1px solid;
}

.handwriting { font-family: Gaegu }

.normal-page {
    max-width: 42rem;
}
.wide-page {
    max-width: 1024px;
}

.choice-btn {
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    outline: none;
    text-align: left;
    text-decoration: none;
}
.choice-btn::before {
    /*    content: '🢚'; */
    content: '↪';
    display: inline-block;
    margin-right: 0.5rem;
}
.choice-btn-default-color {
    color: #3280c2;
}

.graph-paper-grid {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><rect width="20" height="20" fill="none" /><path d="M20 0 H0 V20" fill="none" stroke="lightgray" stroke-width="1" /></svg>');
}
.engineer-paper-grid {
    display: grid;
    grid-template-columns: 1rem 1fr 1fr 1fr 1rem; 
    grid-template-rows: 1rem 1fr 1rem;
}
.engineer-paper-gridlines {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><rect width='20' height='20' fill='none' /><path d='M20 0 H0 V20' fill='none' stroke='%23adeb7e' stroke-width='1' /></svg>");
}
.bg-engineer-paper { background-color: #f0ffd7 }
.b--engineer-paper { border-color: #93cc85 }

/* 
    Both auto-fit and auto-fill are useful depending on whether you want the columns to stretch to fit 
    the container (auto-fit) or fill the container with as many columns as possible (auto-fill).
*/
.grid {
    display: grid;
}

.form-fields {
    display: grid;
    grid-template-columns: 1fr;
}
.form-fields > label {
}

.span-all {
    grid-column: 1 / -1;
}

.gap0 { gap: 0; }
.gap1 { gap: .25rem; }
.gap2 { gap: .5rem; }
.gap3 { gap: 1rem; }
.gap4 { gap: 2rem; }
.col-gap0 { column-gap: 0; }
.col-gap1 { column-gap: .25rem; }
.col-gap2 { column-gap: .5rem; }
.col-gap3 { column-gap: 1rem; }
.col-gap4 { column-gap: 2rem; }
.row-gap0 { row-gap: 0; }
.row-gap1 { row-gap: .25rem; }
.row-gap2 { row-gap: .5rem; }
.row-gap3 { row-gap: 1rem; }
.row-gap4 { row-gap: 2rem; }

.current-color {
    color: currentColor;
}
.firebrick {
    color: firebrick;
}
.w-fit {
    width: fit-content;
}
.w2_5 {
    width: 3rem;
}
.w5_5 {
    width: 24rem;
}
.w6 {
    width: 32rem;
}
.flex-basis-100 {
    flex-basis: 100%;
}

.validation-message { color: firebrick; margin-top: .25rem; }

.spinner {
    fill: currentColor;
    transform-origin: center;
    animation: spin .75s infinite linear
}
@keyframes spin {
    100%
    {
        transform: rotate(360deg)
    }
}


.control-panel {
    max-width: 1200px;
}
.metal-panel {
    background: linear-gradient(to bottom, #b0b0b0, #909090, #707070);
    border: 2px solid #8c8c8c;
    border-radius: 12px;
}
.inner-metal-panel
{
    height: 100%;
    border: 2px solid #606060;
    border-radius: 8px;
    background: linear-gradient(to bottom, #6c6c6c, #4a4a4a);
    box-shadow: 
        inset 0 1px 3px rgba(255, 255, 255, 0.1),
        inset 0 -1px 2px rgba(0, 0, 0, 0.2);
}

.control-panel-logout-btn {
    background-color: #fff1;
    border: 1px solid transparent;
    border-radius: .25rem;
    color: #333;
    cursor: pointer;
    padding: .25rem 1rem;
    text-decoration: none;
    text-shadow: 1px 1px #888;
}

.control-panel-logout-btn:hover {
    background-color: #fff2;
    border-color: #666;
}

.vintage-button {
    background: linear-gradient(180deg, #404146 0%, #272729 100%);
    border: 0;
    border-radius: 12px;
    box-shadow: rgba(255, 255, 255, 0.2) 0 1px 1px 0 inset, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.9) 0px 0px 0px 1px;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 26px 12px;
}

.vintage-button:hover {
    filter: brightness(1.1);
}

.vintage-button:active {
    transform: scale(.95);
    transition: all 150ms ease-in-out;
}


.crt {
    background-color: black; /* Black background for CRT */
    color: #00ff00; /* Bright green text */
    font-family: "Courier New", Courier, monospace; /* Monospace font for retro look */
    padding: 1rem; /* Padding inside the CRT screen */
    border: 0.5rem solid #333; /* Dark border to simulate the CRT frame */
    border-radius: 0.5rem; /* Rounded corners for the CRT frame */
    position: relative; /* For scanline overlay */
    overflow: hidden; /* Hide scanlines outside the div */
}

.crt .cursor {
    display: inline-block;
    width: 0.6rem;
    height: 1.2rem;
    background-color: #00ff00;
    animation: blink 1s infinite;
    vertical-align: bottom;
}

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

.crt .validation-message {
    color: #0E0;
}
.crt .validation-message::before 
{
    content: '⚠ ';
}

.crt-btn {
    background-color: #009b00;
    border: none;
    border-radius: 0;
    color: black;
    padding: .15rem .5rem;
    font-size: 110%;
    font-variant-caps: small-caps;
    font-weight: bold;
}
.crt-btn:hover {
    background-color: #0b0;
}
.crt-btn.selected {
    outline: 2px solid lightgreen;
    background-color: #0080009c;
    color: lightgreen;
}
.crt-btn.unselected {
    background-color: transparent;
    border: 1px solid green;
    color: green;
}
.crt-btn:disabled {
    background-color: gray;
    color: #444;
    cursor: not-allowed;
}
.crt-btn.slim {
}

.crt-editor input,
.crt-editor select {
    color: green;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid green;
    font-weight: bold;
    outline: none;
    resize: none;
    padding: 0;
}
.crt-editor textarea {
    color: green;
    background-color: transparent;
    border: none;
    border: 1px solid green;
    border-bottom-width: 2px;
    font-weight: bold;
    outline: none;
    resize: none;
    padding: .25rem;
}

.crt-input {
    color: green;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid green;
    font-weight: bold;
    outline: none;
    resize: none;
}

.crt-editor input[type="text"]::placeholder,
.crt-input::placeholder 
{
    color: #040;
}

.crt-editor input[type=checkbox] {
    background-color: inherit;
    border: 1px solid currentColor;
}





.switch-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.switch {
  background-color: black;
  width: 35px;
  height: 45.5px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black;
  border-radius: 5px;
  padding: 20px;
  perspective: 700px;
}
.switch input {
  display: none;
}
.switch .switch-btn.on {
  transform: translateZ(25px) rotateX(15deg);
  box-shadow: 0 -10px 20px #ff1818;
}
.switch .switch-btn.on .light {
  animation: flicker 0.2s infinite 0.3s;
}
.switch .switch-btn.on .shine {
  opacity: 1;
}
.switch .switch-btn.on .shadow {
  opacity: 0;
}
.switch .switch-btn {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  transform-origin: center center -25px;
  transform: translateZ(25px) rotateX(-15deg);
  transform-style: preserve-3d;
  background-color: #9b0621;
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
  background: linear-gradient(#980000 0%, #6f0000 30%, #6f0000 70%, #980000 100%);
  background-repeat: no-repeat;
}
.switch .switch-btn::before {
  content: "";
  background: linear-gradient(rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.3) 30%, #650000 75%, #320000) 50% 50%/97% 97%, #b10000;
  background-repeat: no-repeat;
  width: 100%;
  height: 50px;
  transform-origin: top;
  transform: rotateX(-90deg);
  position: absolute;
  top: 0;
}
.switch .switch-btn::after {
  content: "";
  background-image: linear-gradient(#650000, #320000);
  width: 100%;
  height: 50px;
  transform-origin: top;
  transform: translateY(50px) rotateX(-90deg);
  position: absolute;
  bottom: 0;
  box-shadow: 0 50px 8px 0px black, 0 80px 20px 0px rgba(0, 0, 0, 0.5);
}
.switch .light {
  opacity: 0;
  animation: light-off 1s;
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#ffc97e, #ff1818 40%, transparent 70%);
}
.switch .dots {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(transparent 30%, rgba(101, 0, 0, 0.7) 70%);
  background-size: 5px 5px;
}
.switch .characters {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(white, white) 50% 20%/5% 20%, radial-gradient(circle, transparent 50%, white 52%, white 70%, transparent 72%) 50% 80%/33% 25%;
  background-repeat: no-repeat;
}
.switch .shine {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  opacity: 0.3;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%, linear-gradient(rgba(255, 255, 255, 0.5), transparent 50%, transparent 80%, rgba(255, 255, 255, 0.5)) 50% 50%/97% 97%;
  background-repeat: no-repeat;
}
.switch .shadow {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  opacity: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent 70%, rgba(0, 0, 0, 0.8));
  background-repeat: no-repeat;
}

@keyframes flicker {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}
@keyframes light-off {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
}

/* -ns, not-small */
@media screen and (min-width: 30em) {
    .gap0-ns { gap: 0; }
    .gap1-ns { gap: .25rem; }
    .gap2-ns { gap: .5rem; }
    .gap3-ns { gap: 1rem; }
    .gap4-ns { gap: 2rem; }
    .col-gap0-ns { column-gap: 0; }
    .col-gap1-ns { column-gap: .25rem; }
    .col-gap2-ns { column-gap: .5rem; }
    .col-gap3-ns { column-gap: 1rem; }
    .col-gap4-ns { column-gap: 2rem; }
    .row-gap0-ns { row-gap: 0; }
    .row-gap1-ns { row-gap: .25rem; }
    .row-gap2-ns { row-gap: .5rem; }
    .row-gap3-ns { row-gap: 1rem; }
    .row-gap4-ns { row-gap: 2rem; }

    .engineer-paper-grid {
        grid-template-columns: 4rem 1fr 1fr 1fr 4rem; 
        grid-template-rows: 2rem 1fr 2rem;
    }

    .form-fields {
        grid-template-columns: max-content 1fr;
    }
    .form-fields > label {
        text-align: right;
    }
}

/* -m, medium */
@media screen and (min-width: 30em) and (max-width: 60em) {
    .gap0-m { gap: 0; }
    .gap1-m { gap: .25rem; }
    .gap2-m { gap: .5rem; }
    .gap3-m { gap: 1rem; }
    .gap4-m { gap: 2rem; }
    .col-gap0-m { column-gap: 0; }
    .col-gap1-m { column-gap: .25rem; }
    .col-gap2-m { column-gap: .5rem; }
    .col-gap3-m { column-gap: 1rem; }
    .col-gap4-m { column-gap: 2rem; }
    .row-gap0-m { row-gap: 0; }
    .row-gap1-m { row-gap: .25rem; }
    .row-gap2-m { row-gap: .5rem; }
    .row-gap3-m { row-gap: 1rem; }
    .row-gap4-m { row-gap: 2rem; }
}

/* -l, large */
@media screen and (min-width: 60em) {
    .gap0-l { gap: 0; }
    .gap1-l { gap: .25rem; }
    .gap2-l { gap: .5rem; }
    .gap3-l { gap: 1rem; }
    .gap4-l { gap: 2rem; }
    .col-gap0-l { column-gap: 0; }
    .col-gap1-l { column-gap: .25rem; }
    .col-gap2-l { column-gap: .5rem; }
    .col-gap3-l { column-gap: 1rem; }
    .col-gap4-l { column-gap: 2rem; }
    .row-gap0-l { row-gap: 0; }
    .row-gap1-l { row-gap: .25rem; }
    .row-gap2-l { row-gap: .5rem; }
    .row-gap3-l { row-gap: 1rem; }
    .row-gap4-l { row-gap: 2rem; }

    .nav-width-l { width: 28rem; }
}