.grid-page-container,
.widget-nav-bar,
.widget-page-panel,
.widget-grid {
    --grid-cell-size: 8vw;
    --grid-width: calc((var(--grid-cell-size) * 8) + (20px * 7));
}

.grid-page-container,
.widget-nav-bar,
.widget-page-panel,
.widget-grid {
    --grid-preferred-width: 1600px;
    --grid-viewport-gutter: 20px;
}

.widget-nav-bar,
.widget-page-panel {
    box-sizing: border-box;
    max-width: min(var(--grid-preferred-width), calc(100vw - (var(--grid-viewport-gutter) * 2)));
    width: min(100%, var(--grid-preferred-width));
}

.grid-viewport-placeholder:has(.widget-grid) {
    --grid-viewport-gutter: 20px;
    padding: var(--grid-viewport-gutter);
}

.grid-viewport-placeholder {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    overflow: visible;
    padding-bottom: var(--grid-page-bottom-spacing, 20px);
    position: relative;
    width: 100%;
}

.grid-page-container {
    box-sizing: border-box;
    display: block;
    width: 100%;
}

.widget-grid-placeholder {
    box-sizing: border-box;
    display: block;
}

.grid-viewport-placeholder[data-grid-viewport-mode="desktop"]:has(.widget-grid),
.grid-viewport-placeholder[data-grid-viewport-mode="clamped"]:has(.widget-grid) {
    --grid-viewport-gutter: 20px;
}

.grid-viewport-placeholder:has(.widget-grid-mobile) {
    --grid-viewport-gutter: 8px;
}

.grid-viewport-placeholder[data-grid-viewport-mode="mobile"]:has(.widget-grid),
.grid-viewport-placeholder[data-grid-viewport-mode="mobile"]:has(.widget-grid-mobile) {
    --grid-viewport-gutter: 8px;
}

.widget-grid {
    --grid-columns: 8;
    --grid-gap: 20px;
    --grid-height: 0px;
    --grid-default-row-height: 80px;
    --grid-column-width: calc((100% - ((var(--grid-columns) - 1) * var(--grid-gap))) / var(--grid-columns));
    box-sizing: border-box;
    margin-inline: auto;
    max-width: var(--grid-preferred-width);
    min-height: var(--grid-height);
    position: relative;
    width: min(100%, var(--grid-preferred-width));
}

.widget-grid[data-grid-viewport-mode="desktop"] {
    max-width: var(--grid-preferred-width);
    width: min(100%, var(--grid-preferred-width));
}

.widget-grid[data-grid-viewport-mode="clamped"] {
    max-width: 100%;
    width: 100%;
}

.widget-manager-mobile-preview .widget-resize-handle {
    display: none !important;
}

.widget-manager-mobile-priority-control {
    align-items: center;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    background-color: rgba(90, 90, 90, 0.5);
    border-radius: 7px;
    box-shadow: inset 0 0 0 1px rgba(175, 175, 175, 0.35), 0 0 5px black;
    box-sizing: border-box;
    color: rgb(205, 205, 205);
    display: flex;
    gap: 8px;
    height: 40px;
    left: 10px;
    padding: 5px 6px 5px 10px;
    position: absolute;
    text-shadow: 0 0 5px black;
    top: 10px;
    transition: 0.5s ease;
    z-index: 8;
}

.widget-manager-mobile-priority-control > span {
    font-size: 18px;
    white-space: nowrap;
}

.widget-manager-mobile-priority-control > input {
    background-color: rgba(65, 65, 65, 0.78);
    border: 0;
    border-radius: 5px;
    box-sizing: border-box;
    color: rgb(220, 220, 220);
    height: 30px;
    margin: 0;
    outline: 1px solid rgba(205, 205, 205, 0.28);
    padding: 0 6px;
    text-align: center;
    text-shadow: 0 0 5px black;
    transition: 0.5s ease;
    width: 52px;
}

.widget-manager-mobile-priority-control > input:hover {
    background-color: rgba(80, 80, 80, 0.82);
    outline-color: rgba(220, 220, 220, 0.42);
}

.widget-manager-mobile-priority-control:focus-within {
    outline: 1px solid rgba(175, 175, 175, 0.55);
    outline-offset: 1px;
}

.widget-nav-mobile-order-toggle {
    align-items: center;
    align-self: center;
    display: inline-flex;
    font-size: 18px;
    gap: 10px;
    height: 40px;
    margin-left: auto;
    padding: 0 10px;
    text-shadow: 0 0 5px black;
    white-space: nowrap;
}

.widget-nav-mobile-order-toggle[hidden] {
    display: none;
}

.widget-nav-mobile-order-toggle .widget-toggle-switch {
    flex: 0 0 60px;
}

.widget-nav-mobile-order-toggle input:checked + .widget-toggle-slider {
    background-color: rgb(40, 80, 60);
}

.widget-nav-mobile-order-toggle input:hover:checked + .widget-toggle-slider,
.widget-nav-mobile-order-toggle input:checked + .widget-toggle-slider:hover {
    background-color: rgb(50, 95, 70);
}

.widget-nav-mobile-order-toggle input:focus + .widget-toggle-slider {
    box-shadow: inset 0 0 5px black, 0 0 1px rgb(40, 80, 60);
}

.widget-manager-mobile-preview-notice {
    align-items: center;
    background-color: rgba(90, 90, 90, 0.42);
    -webkit-backdrop-filter: blur(10px) saturate(125%);
    backdrop-filter: blur(10px) saturate(125%);
    border-radius: 8px;
    bottom: 16px;
    box-sizing: border-box;
    display: flex;
    gap: 10px;
    left: 50%;
    line-height: 1.35;
    max-width: calc(100vw - 32px);
    padding: 12px 16px;
    position: fixed;
    box-shadow: 0 0 9px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    text-align: left;
    text-shadow: 0 0 5px black;
    transform: translateX(-50%);
    width: max-content;
    z-index: 10000;
}

.widget-manager-mobile-preview-notice i {
    flex: 0 0 auto;
}

.widget-grid-table {
    position: relative;
    padding: 0px;
    /* Absolute children do not give this div a natural table width, so keep
     * the old table footprint explicit for centering and snapping math. */
    width: var(--grid-width);
    min-height: var(--grid-cell-size);
    box-sizing: content-box;
    transition: none;
}

.widget-grid-cell {
    position: absolute;
    border-radius: 7px;
    text-align: center;
    overflow: hidden;
    width: var(--grid-cell-size);
    height: var(--grid-cell-size);
    min-width: var(--grid-cell-size);
    min-height: var(--grid-cell-size);
    box-sizing: border-box;
    transition: none;
}

.widget-placement-ghost {
    position: absolute;
    z-index: 1200;
    pointer-events: none;
    border: 2px solid rgba(90, 190, 110, 0.95);
    border-radius: 7px;
    box-sizing: border-box;
    background-color: rgba(90, 190, 110, 0.16);
    box-shadow: 0 0 12px rgba(90, 190, 110, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.widget-placement-ghost-invalid {
    border-color: rgba(210, 80, 80, 0.95);
    background-color: rgba(210, 80, 80, 0.18);
    box-shadow: 0 0 12px rgba(210, 80, 80, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.grid-widget-resizable {
    position: absolute;
}

.widget-resize-handle {
    position: absolute;
    z-index: 5;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.widget-resize-handle-east {
    top: 10px;
    right: 0;
    bottom: 10px;
    width: 10px;
    cursor: ew-resize;
}

.grid-widget-resizable-horizontal-only .widget-resize-handle-east::after {
    content: "";
    position: absolute;
    right: 3px;
    top: 50%;
    width: 2px;
    height: 28px;
    border-left: 2px solid currentColor;
    border-right: 2px solid currentColor;
    opacity: 0.45;
    transform: translateY(-50%);
}

.widget-resize-handle-south {
    right: 10px;
    bottom: 0;
    left: 10px;
    height: 10px;
    cursor: ns-resize;
}

.widget-resize-handle-southeast {
    right: 0;
    bottom: 0;
    width: 18px;
    height: 18px;
    cursor: nwse-resize;
}

.widget-resize-handle-southeast::after {
    content: "";
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    opacity: 0.55;
}

.widget-resize-invalid {
    outline: 2px solid rgb(210, 80, 80);
    outline-offset: -2px;
}

.widget-placement-invalid {
    outline: 2px solid rgb(210, 80, 80);
    outline-offset: -2px;
}

.widget-resize-ghost {
    position: absolute;
    z-index: 1200;
    pointer-events: none;
    border: 2px dashed rgba(90, 190, 110, 0.95);
    border-radius: 7px;
    box-sizing: border-box;
    background-color: rgba(90, 190, 110, 0.08);
    box-shadow: 0 0 10px rgba(90, 190, 110, 0.35);
    opacity: 0.8;
}

.widget-preview-ghost-row {
    position: absolute;
    border-radius: 7px;
    border: 1px solid rgba(90, 190, 110, 0.72);
    box-sizing: border-box;
    background-color: rgba(90, 190, 110, 0.06);
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.65);
    transition: top 0.5s ease, height 0.5s ease;
}

.widget-resize-ghost-invalid {
    border-color: rgba(210, 80, 80, 0.95);
    background-color: rgba(210, 80, 80, 0.1);
    box-shadow: 0 0 10px rgba(210, 80, 80, 0.4);
    opacity: 0.85;
}

.widget-placement-ghost-invalid .widget-preview-ghost-row,
.widget-resize-ghost-invalid .widget-preview-ghost-row {
    border-color: rgba(210, 80, 80, 0.72);
    background-color: rgba(210, 80, 80, 0.08);
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.65);
}

.grid-widget {
    box-sizing: border-box;
    overflow: hidden;
    position: absolute;
    transition: background-color 0.5s ease, box-shadow 0.5s ease, color 0.5s ease, text-shadow 0.5s ease, border-color 0.5s ease;
    z-index: 1;
}

.grid-widget-shell {
    --grid-widget-column: 1;
    --grid-widget-columns: 2;
    --grid-widget-drag-translate-x: 0px;
    --grid-widget-drag-translate-y: 0px;
    --grid-widget-top: 0px;
    --grid-widget-height: auto;
    box-sizing: border-box;
    left: calc((var(--grid-widget-column) - 1) * (var(--grid-column-width) + var(--grid-gap)));
    min-width: 0;
    position: absolute;
    top: var(--grid-widget-top);
    transform: translate(var(--grid-widget-drag-translate-x), var(--grid-widget-drag-translate-y));
    transition: left 0.5s ease, top 0.5s ease, width 0.5s ease, min-height 0.5s ease;
    will-change: left, top, width, transform;
    width: calc((var(--grid-column-width) * var(--grid-widget-columns)) + (var(--grid-gap) * (var(--grid-widget-columns) - 1)));
    z-index: 1;
}

.grid-widget-shell-dragging {
    transition: none;
    z-index: 50;
}

.grid-widget-shell-dragging-root {
    cursor: grabbing;
}

.grid-widget-shell-parked {
    z-index: 2;
}

.grid-widget-shell > .grid-widget {
    left: auto !important;
    position: relative !important;
    top: auto !important;
    width: 100%;
}

.grid-widget-shell[data-grid-height-policy] {
    min-height: var(--grid-widget-height);
}

.grid-widget-shell[data-grid-height-policy="auto"] > .grid-widget {
    height: var(--grid-widget-height);
    min-height: var(--grid-widget-height);
}

.widget-grid-cell-layer {
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 0;
}

.widget-grid .widget-grid-cell-preview {
    --grid-cell-column: 1;
    --grid-cell-height: var(--grid-default-row-height, 80px);
    --grid-cell-row: 0;
    --grid-cell-top: calc(var(--grid-cell-row) * (var(--grid-default-row-height, 80px) + var(--grid-gap)));
    background-color: rgb(27, 27, 27);
    border: 0;
    border-radius: 7px;
    box-sizing: border-box;
    display: block;
    height: var(--grid-default-row-height, 80px);
    left: calc((var(--grid-cell-column) - 1) * (var(--grid-column-width) + var(--grid-gap)));
    margin: 0;
    min-height: var(--grid-default-row-height, 80px);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
    position: absolute;
    box-shadow: inset 0 0 3px black;
    top: calc(var(--grid-cell-row) * (var(--grid-default-row-height, 80px) + var(--grid-gap)));
    transition: top 0.5s ease, height 0.5s ease, min-height 0.5s ease;
    width: var(--grid-column-width);
}

.widget-grid .widget-placement-ghost,
.widget-grid .widget-resize-ghost {
    transition: left 0.5s ease, top 0.5s ease, width 0.5s ease, height 0.5s ease;
}

.widget-grid[data-grid-loading="true"] .grid-widget-shell,
.widget-grid[data-grid-loading="true"] .widget-grid-cell-preview,
.widget-grid[data-grid-loading="true"] .widget-placement-ghost,
.widget-grid[data-grid-loading="true"] .widget-resize-ghost {
    transition: none !important;
}

.widget-grid-mobile {
    --grid-columns: 2;
    --grid-gap: 8px;
    --grid-viewport-gutter: 8px;
    display: flex;
    flex-direction: column;
    gap: var(--grid-gap);
    margin-inline: 0;
    max-width: 100%;
    min-height: 0;
    padding-bottom: var(--grid-gap);
    width: 100%;
}

.widget-grid-mobile .grid-widget-shell {
    left: auto;
    order: var(--grid-widget-order, 0);
    position: relative;
    top: auto;
    width: 100%;
}

.widget-grid-mobile .widget-grid-cell-layer {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .grid-widget-shell,
    .grid-widget-shell-dragging {
        transition: none;
        will-change: auto;
    }
}