/* Make size include padding
 * https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing */
* {
    box-sizing: border-box;
}

* {
    font: 15px 'Clear Sans';
}

:root {
    /* https://coolors.co/020203-1b1c28-7f85a3-bc9bf8-fa5084-e2b06a-c1cbf5-b8c1e9 */
    /* inspiration https://mbuffett.com/posts/rust-2030/ */
    --grid-bg-color: #020203;

    --cell-bg-color: #1b1c28;
    --cell-border-color: #7f85a3;
    --cell-border-hover: #c1cbf5;
    --cell-border-selected: #bc9bf8;

    --cell-id-color: #e2b06a;
    --cell-value-raw-color: #b8c1e9;
    --cell-value-edit-color: #c1cbf5;

    /* --eval-fg-color: #47ff5a; */
    --eval-fg-color: #a0e7c7;
    --eval-bg-color: #020203;
}

html,
body {
    background-color: var(--grid-bg-color);
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
}

.canvas {
    height: 100%;
    width: 100%;
    background-color: var(--grid-bg-color);
    padding: 10px;
}



.cell-wrapper {
    border-radius: 5px;
    border: 2px solid var(--cell-border-color);
    border-left-width: 4px;
    padding: 1px 5px 1px;
    /* top | left+right | bottom */
    background-color: var(--cell-bg-color);
    /* allow cell-id to be positioned top right
   * https://css-tricks.com/absolute-positioning-inside-relative-positioning/ */
    position: absolute;
    /* shadow effect */
    box-shadow: 0 0 8px 0 rgba(255, 255, 255, 0.2), 0 0 16px 0 rgba(255, 255, 255, 0.1);
}



.cell-selected {
    border: 2px solid var(--cell-border-selected);
    border-left-width: 4px;
}

/* hover only if not highlighted */
.cell-wrapper:hover:not(.cell-selected) {
    border: 2px solid var(--cell-border-hover);
    border-left-width: 4px;
}

.cell-handle {
    width: 12px;
    height: 12px;
    position: absolute;
    right: 0;
    bottom: 0;
    cursor: se-resize;
    clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
    background: repeating-linear-gradient(-45deg,
            var(--cell-border-hover),
            var(--cell-border-hover) 1px,
            var(--cell-bg-color) 2px,
            var(--cell-bg-color) 4px);
}



.cell-content {
    overflow: auto;
    width: 100%;
    height: 100%;
    /* Hide scrollbar for all browsers */
    scrollbar-width: none;
    -ms-overflow-style: none;
}



.cell-content::-webkit-scrollbar {
    width: 0;
}

.cell-id {
    color: var(--cell-id-color);
    position: absolute;
    /* within cell */
    right: 2px;
    top: 0px;
    font-size: 13px;
    font-weight: bold;
    user-select: none;
    /* prevent 2x click select */
}

.cell-value-raw {
    color: var(--cell-value-raw-color);
    width: calc(100% - 20px);
    /* make raw value cut off nicely if it doesn't fit, requires these 3 props */
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}



/* the input text element */
.cell-input-textarea {
    display: block;
    overflow: auto;
    resize: none;
    border: none;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    outline: none;
    background-color: var(--cell-bg-color);
    color: var(--cell-value-edit-color);
}

.eval-expr {
    all: unset;
    display: inline-block;
    background-color: var(--eval-bg-color);
    color: var(--eval-fg-color);
    border-radius: 5px;
    white-space: nowrap;
    padding: 0px 5px;
}

.help-overlay {
    position: fixed;
    top: 10px;
    right: 10px;
    background: var(--cell-bg-color);
    border: 1px solid var(--cell-border-color);
    padding: 10px;
    border-radius: 5px;
    font-size: 12px;
    color: var(--cell-value-raw-color);
    opacity: 0.8;
    z-index: 1000;
}

.help-overlay h4 {
    margin: 0 0 8px 0;
    color: var(--cell-id-color);
    font-size: 13px;
}

.help-overlay div {
    margin: 2px 0;
}

.help-overlay kbd {
    background: var(--eval-bg-color);
    color: var(--eval-fg-color);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 11px;
}

/* Desktop-only visibility classes */
.desktop-only {
    display: block;
}

.mobile-only {
    display: none;
}

.version-label {
    position: fixed;
    top: 10px;
    left: 10px;
    background: var(--cell-bg-color);
    border: 1px solid var(--cell-border-color);
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 11px;
    color: var(--cell-id-color);
    opacity: 0.7;
    z-index: 1000;
    user-select: none;
    font-family: monospace;
}