:root {
    --font-weight-medium: 600;
    overscroll-behavior: none;
}

@view-transition {
    navigation: auto;
}

.muted {
    color: var(--color-muted-foreground);
}

.sidebar nav > header {
    padding: calc(var(--spacing) * 3);
    padding-left: calc(var(--spacing) * 4);
    gap: calc(var(--spacing) * 1.5);
    flex-direction: row;
    background: #fff;
}

.sidebar nav a > img {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    flex-shrink: 0;
}

.sidebar nav footer img {
    height: 48px;
    width: fit-content;
    margin-left: calc(var(--spacing) * 3);
    border: solid 8px #fff;
    border-radius: 8px;
    background: #fff;
    filter: saturate(0) brightness(0.875);
}

.sidebar nav footer img + div {
    padding: 0 calc(var(--spacing) * 3) calc(var(--spacing) * 3);
}

button > img {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
}

button {
    cursor: pointer;
}

main > header {
    background: var(--color-sidebar);
}

table.user-journeys-table th:first-child,
table.user-journeys-table td:first-child {
    width: 0px;
}

table.playground-table th:first-child,
table.playground-table td:first-child {
    width: 288px;
}

table.playground-table th:nth-child(2),
table.playground-table td:nth-child(2) {
    width: 432px;
}

table.playground-table td {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

table.playground-table tr {
    height: 11.25vh;
}

table.playground-table tr:hover {
    background: transparent;
}

table.playground-table td {
    vertical-align: top;
    color: var(--color-muted-foreground);
}

table.playground-table td {
    border-left-style: var(--tw-border-style);
    border-left-color: hsl(0, 0%, 67.5%);
    border-left-width: 1px;
}

table.playground-table tr:first-of-type td:first-of-type {
    border-left-style: none;
}

table.playground-table-prepend td {
    border-left-style: none;
    border-bottom-style: var(--tw-border-style);
    border-bottom-color: hsl(0, 0%, 67.5%);
    border-bottom-width: 1px;
}

td.truncate {
    max-width: 0px;
}

.badge-secondary:not(.signal-stack .badge-secondary) {
    float: left;
}

#login img {
    width: 72px;
    margin-bottom: 1em;
}

#loading {
    font-family: monospace;
    width: 100%;
    text-align: center;
    opacity: 0.5;
}

.card {
    width: 192px;
    height: 256px;
    display: inline-flex;
    transition-property: background-color;
    transition-timing-function: var(
        --tw-ease,
        var(--default-transition-timing-function)
    );
    transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.card:hover {
    background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
}

.card h2 {
    word-break: break-all;
    opacity: 0.5;
}

.square {
    width: 221.7px;
    height: 221.7px;
}

.landscape {
    width: 256px;
    height: 192px;
}

.user-journey-badge {
    opacity: 0.5;
    color: #0d5134;
    background: #d8e861;
    transition: none;
}

.user-journey-badge:first-of-type,
.matrix-badge:first-of-type {
    opacity: 0.5;
    color: #0d5134;
    background: #d8e861;
    transition: none;
    filter: saturate(0);
}

.user-journey-badge.selected {
    color: #d8e861;
    background: #0d5134;
}

.content-badge {
    opacity: 0.5;
    color: #6d0f0f;
    background: #f9a66e;
    transition: none;
    height: 0.4375rem;
    width: 0.4375rem;
    padding: 0;
    border-radius: 0.21875rem;
}

.content-badge.selected {
    color: #f9a66e;
    background: #6d0f0f;
}

.matrix-badge {
    opacity: 0.5;
    color: #6d0f0f;
    background: #f9b2c6;
    transition: none;
}

.matrix-badge.selected {
    color: #f9b2c6;
    background: #6d0f0f;
}

textarea {
    resize: none;
    height: 15vh;
}

td[inert] {
    background: #f6f6f6;
}

input[readonly],
:is(.form label, .label):has(+ [readonly]) {
    cursor: not-allowed;
    opacity: 0.5;
}

iframe {
    width: 300%;
    height: 1200px;
    margin-bottom: -600px;
    transform: scale(0.33333333);
    transform-origin: top left;
    border: none;
}