/*
  ----------------------------------------
  UI Components
  ----------------------------------------
*/

@layer styles {
    /* PWA Shell
  ---------------------------------- */
    html.ui-pwa-root {
        height: 100%;
        overflow: hidden;
        overscroll-behavior: none;
        background: var(--lighter);
    }

    body.ui-pwa-body {
        box-sizing: border-box;
        display: flex;
        height: 100dvh;
        min-height: 0;
        flex-direction: column;
        overflow: hidden;
        overscroll-behavior: none;
    }

    body.ui-pwa-edge-to-edge-body {
        padding-bottom: 0;
    }

    body.ui-pwa-clipped-main-body > main {
        overflow: hidden;
    }

    body.ui-pwa-locked-main-body {
        height: 100dvh;
        overflow: hidden;
        overscroll-behavior: none;
    }

    body.ui-pwa-locked-main-body > main {
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
    }

    .ui-pwa-main {
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: none;
        -webkit-overflow-scrolling: touch;
    }

    .ui-pwa-main .overflow-y-auto {
        overscroll-behavior-y: none;
        -webkit-overflow-scrolling: touch;
    }

    .ui-pwa-viewport-page {
        display: flex;
        min-height: 100dvh;
        height: 100dvh;
        flex-direction: column;
        overflow: hidden;
        background: var(--lighter);
    }

    .ui-pwa-fluid-fields .ui-field {
        min-width: 0;
        max-width: 100%;
    }

    /* Buttons
  ---------------------------------- */

    .ui-button {
        display: inline-flex;
        width: 100%;
        align-items: center;
        font-size: var(--text-lg);
        justify-content: center;
        padding: var(--space-xs) var(--space-sm);
        line-height: 2.2;
        border: none;
        border-radius: var(--rounded);
        box-shadow: var(--shadow-sm);
        font-weight: 800;
        color: var(--white);
        cursor: pointer;
        background: var(--darker);
        text-decoration: none;
        transition: all 200ms ease;
        margin: 0;

        &:hover {
            filter: brightness(1.1);
            box-shadow: var(--shadow);
        }

        &.ui-pin-bottom {
            z-index: 10;
            margin-top: auto;
            transform: translateY(calc(var(--space-md) * -1));
        }

        &:active {
            transform: translateY(0.5px);
            box-shadow: none;
        }

        &:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        &.ui-brand-2,
        &.ui-brand-3,
        &.ui-brand-4,
        &.ui-neutral,
        &.ui-info,
        &.ui-success,
        &.ui-warning,
        &.ui-error {
            color: var(--white);
            border-color: var(--white);
        }

        &.ui-brand-1 {
            color: var(--darker);
            background: var(--brand-1);
        }
        &.ui-brand-2 {
            background: var(--brand-2);
        }
        &.ui-brand-3 {
            background: var(--brand-3);
        }
        &.ui-brand-4 {
            background: var(--brand-4);
        }
        &.ui-neutral {
            background: var(--midtone);
        }
        &.ui-info {
            background: var(--info);
        }
        &.ui-success {
            background: var(--success);
        }
        &.ui-warning {
            background: var(--warning);
        }
        &.ui-error {
            background: var(--error);
        }
    }

    /* Desktop admin buttons */
    .admin .ui-button {
        width: auto;
        font-size: var(--text-base);
        line-height: 1.25;
        padding: var(--space-2xs) var(--space-sm);
        font-weight: 700;
    }

    .admin .ui-button.ui-button-large {
        width: 100%;
        font-size: var(--text-lg);
        line-height: 2.2;
        padding: var(--space-xs) var(--space-sm);
        font-weight: 800;
    }

    .ui-button-plain {
        border: 0;
        background: transparent;
        font: inherit;
    }

    /* Buttons mini-round */
    .ui-button-mini-round {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: var(--rounded-full);
        background: var(--lighter);
        color: var(--brand-1);
        box-shadow: var(--shadow-sm);
        transition: all 250ms ease;

        &:hover {
            background: var(--brand-1);
            color: var(--lighter);
        }
    }

    /* Hamburger Button
  ---------------------------------- */
    .ui-hamburger-button {
        --button-width: 30px;
        --button-height: 24px;
        --line-thickness: 3px;
        --line-color: var(--darker);
        --line-radius: 2px;
        --number-of-spins: 5;
        --duration: 0.15s;
        --focus-color: rgba(0, 0, 0, 0.2);

        position: relative;
        display: block;
        width: var(--button-width);
        height: var(--button-height);
        cursor: pointer;
        outline: none;

        .line-1,
        .line-2,
        .line-3 {
            position: absolute;
            display: block;
            width: 100%;
            height: var(--line-thickness);
            background-color: var(--line-color);
            border-radius: var(--line-radius);
            transition: all var(--duration) ease-in-out;
        }

        .line-2 {
            top: calc(50% - var(--line-thickness) / 2);
        }

        .line-3 {
            bottom: 0;
        }

        /* Hamburger animate */
        [data-ui-hamburger-open-value="true"] & {
            .line-1 {
                transform: translateY(
                        calc(
                            var(--button-height) / 2 - var(--line-thickness) / 2
                        )
                    )
                    rotate(calc(-1 * 45deg * var(--number-of-spins)));
            }
            .line-2 {
                opacity: 0;
            }
            .line-3 {
                transform: translateY(
                        calc(
                            -1 *
                                (
                                    var(--button-height) / 2 -
                                        var(--line-thickness) / 2
                                )
                        )
                    )
                    rotate(calc(45deg * var(--number-of-spins)));
            }
        }
    }

    /* Hamburger Menu
    ---------------------------------- */
    .ui-hamburger-menu {
        position: fixed;
        right: 0;
        top: 4rem;
        bottom: 0;
        z-index: 90;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        backdrop-filter: blur(10px);
        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
        transition:
            transform 120ms ease-in-out,
            visibility 0s 120ms;
        transform: translateX(100%);
        overflow-y: auto;
        visibility: hidden;

        /* Show menu when hamburger is open */
        [data-ui-hamburger-open-value="true"] & {
            visibility: visible;
            transform: translateX(0);
            transition:
                transform 120ms ease-in-out,
                visibility 0s 0s;
        }
    }

    /* PWA Mobile Drawer
    ---------------------------------- */
    .ui-pwa-drawer-overlay {
        position: fixed;
        inset: 0;
        z-index: 89;
        background-color: black;
        opacity: 0;
        visibility: hidden;
        transition:
            opacity 150ms ease-in-out,
            visibility 0s 150ms;

        [data-ui-hamburger-open-value="true"] & {
            opacity: 0.5;
            visibility: visible;
            transition:
                opacity 150ms ease-in-out,
                visibility 0s 0s;
        }
    }

    .ui-pwa-drawer {
        width: 75%;
        border-top-right-radius: 2rem;
        border-bottom-right-radius: 2rem;
        transform: translateX(-100%);
        visibility: hidden;
        transition:
            transform 150ms ease-in-out,
            visibility 0s 150ms;

        [data-ui-hamburger-open-value="true"] & {
            transform: translateX(0);
            visibility: visible;
            transition:
                transform 150ms ease-in-out,
                visibility 0s 0s;
        }
    }

    /* Avatar
    ---------------------------------- */
    .ui-avatar {
        &[data-size="sm"] {
            --avatar-size: 1.5rem;
            --initials-font-size: 0.7rem;
        }

        /* Medium is the default */
        &[data-size="md"] {
            --avatar-size: 2.5rem;
            --initials-font-size: 1rem;
        }

        &[data-size="lg"] {
            --avatar-size: 7.5rem;
            --initials-font-size: 3rem;
        }

        width: var(--avatar-size);
        height: var(--avatar-size);
        border-radius: var(--rounded-full);
        background: var(--brand-1);
        color: var(--white);
        overflow: hidden;
        box-shadow: var(--shadow-sm);

        .initials {
            font-size: var(--initials-font-size);
            line-height: 1;
        }
    }
    /* Avatar Upload Field
    ---------------------------------- */
    .avatar-upload-field {
        align-items: center;

        .avatar-upload-zone {
            cursor: pointer;
            transition: transform 150ms ease;

            &:hover {
                transform: scale(1.05);
            }

            &.dragging .avatar-upload-circle {
                outline: 2px dashed var(--brand-1);
                outline-offset: 4px;
            }
        }

        .avatar-upload-circle {
            width: 6rem;
            height: 6rem;
            border-radius: var(--rounded-full);
            background: var(--brand-1);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            transition: box-shadow 150ms ease;
            box-shadow: var(--shadow);
        }

        .avatar-upload-initials {
            font-size: 2rem;
            font-weight: var(--font-semibold);
            color: var(--white);
            line-height: 1;
            user-select: none;
        }

        .avatar-upload-preview {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .avatar-upload-prompt {
            font-size: var(--text-sm);
            color: var(--brand-1);
            font-weight: var(--font-semibold);
            margin-top: var(--space-2xs);
            cursor: pointer;
        }
    }
    /* Toast
  ---------------------------------- */
    .ui-toast {
        position: fixed;
        display: flex;
        top: 1rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: 9999;
        align-items: center;
        gap: var(--space-xs);
        min-width: 24rem;
        padding: var(--space-sm) var(--space-sm);
        border-radius: var(--rounded);
        box-shadow: var(--shadow);
        background: var(--darker);
        color: var(--light);
        border-left: 6px solid;
        animation: ephemeral 8s both;

        svg {
            flex-shrink: 0;
            border-radius: 50%;
        }

        span {
            flex: 1;
        }

        .ui-toast-close {
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            border-radius: 100%;
            width: 1.6rem;
            height: 1.6rem;

            &:hover {
                color: var(--white);
                background-color: var(--black);
            }
        }

        &.ui-toast-success {
            border-left-color: var(--success);

            svg.icon {
                color: var(--success);
            }
        }

        &.ui-toast-error {
            border-left-color: var(--error);

            svg.icon {
                color: var(--error);
            }
        }
    }

    .ui-pwa-toast-region .ui-toast {
        top: calc(env(safe-area-inset-top) + var(--space-sm));
        right: var(--space-sm);
        left: var(--space-sm);
        width: auto;
        min-width: 0;
        transform: none;
    }

    /* Dropdown
  ---------------------------------- */
    .ui-dropdown {
        position: relative;
        display: inline-block;

        menu,
        ul {
            position: absolute;
            top: 100%;
            right: 0;
            z-index: 100;
            min-width: 12rem;
            margin-top: var(--space-2xs);
            padding: var(--space-2xs);
            background: var(--white);
            border-radius: var(--rounded);
            box-shadow: var(--shadow);
            list-style: none;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-8px);
            transition:
                opacity 150ms ease-in-out,
                transform 150ms ease-in-out,
                visibility 0s 150ms;

            li {
                margin: 0;
            }

            a,
            button {
                display: flex;
                align-items: center;
                gap: var(--space-2xs);
                width: 100%;
                padding: var(--space-2xs) var(--space-xs);
                border-radius: var(--rounded-sm);
                text-decoration: none;
                color: var(--darker);
                background: transparent;
                border: none;
                cursor: pointer;
                transition: background-color 100ms ease;

                &:hover {
                    background-color: var(--lighter);
                }

                svg {
                    flex-shrink: 0;
                }
            }
        }

        /* Show menu when dropdown is open */
        &.is-open menu,
        &.is-open ul {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            transition:
                opacity 150ms ease-in-out,
                transform 150ms ease-in-out,
                visibility 0s 0s;
        }
    }

    /* Auth Verify OTP Input
  ---------------------------------- */
    .ui-auth-verify {
        display: flex;
        justify-content: center;

        .ui-auth-verify-digits {
            display: flex;
            gap: var(--space-xs);

            input {
                width: 3rem;
                height: 3.5rem;
                padding: 0;
                font-size: 1.5rem;
                font-weight: 700;
                text-align: center;
                border: var(--border-lg) solid var(--light);
                border-radius: var(--rounded);
                background: var(--white);
                color: var(--darker);
                transition:
                    border-color 150ms ease,
                    box-shadow 150ms ease;

                &:focus {
                    outline: none;
                    border-color: var(--brand-1);
                    box-shadow: 0 0 0 3px
                        color-mix(in srgb, var(--brand-1) 20%, transparent);
                }

                &::placeholder {
                    color: var(--midtone);
                }
            }
        }
    }

    /* Shared form logo
   ---------------------------------- */
    .ui-form-logo {
        width: 12rem;
        max-width: 100%;
    }

    .ui-form-logo img {
        display: block;
        width: 100%;
        height: auto;
    }

    /* Dialog
   ---------------------------------- */
    .ui-dialog {
        border: none;
        border-radius: var(--rounded);
        padding: 0;
        margin: auto;
        max-width: calc(100vw - 2rem);
        max-height: calc(100dvh - 2rem);
        overflow: hidden;
        background: var(--white);
        box-shadow: var(--shadow-lg);

        &::backdrop {
            background: rgba(0, 0, 0, 0.5);
        }
    }

    .project-dialog {
        width: min(1120px, calc(100vw - 2rem));
    }

    .ui-dialog-sheet {
        width: min(26rem, calc(100vw - 1rem));
    }

    .ui-modal-header-bar {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        padding: var(--space-sm) var(--space-md);
        border-bottom: 1px solid var(--light);
        background: var(--lighter);
    }

    .project-modal-shell {
        width: 100%;
        height: min(52rem, calc(100dvh - 2rem));
        max-height: calc(100dvh - 2rem);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .project-form-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(24rem, 28rem);
        flex-direction: unset !important;
        gap: 0;
        max-width: none !important;
        width: 100%;
        min-height: 0;
        align-items: stretch;
    }

    .project-form-layout--modal {
        flex: 1 1 auto;
        overflow: hidden;
    }

    .project-form-panel {
        padding: var(--space-md) var(--space-lg);
        min-width: 0;
    }

    .project-form-layout--modal .project-form-panel {
        overflow-y: auto;
    }

    .project-form-map-panel {
        position: relative;
        padding: var(--space-md);
        border-left: 1px solid var(--light);
        background: var(--lighter);
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
        min-width: 0;
        min-height: 0;
    }

    .project-map-frame {
        position: relative;
        flex: 1 1 auto;
        min-height: 24rem;
    }

    .project-map-canvas {
        position: absolute;
        inset: 0;
        border-radius: var(--rounded-sm);
        overflow: hidden;
        background:
            radial-gradient(
                circle at top left,
                rgb(15 118 110 / 25%),
                transparent 48%
            ),
            linear-gradient(160deg, #0f172a 0%, #1e293b 100%);
    }

    .ui-map-status-chip {
        position: absolute;
        top: var(--space-sm);
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
        padding: 0.45rem 0.8rem;
        border-radius: 999px;
        background: rgb(15 23 42 / 88%);
        color: var(--white);
        font-size: 0.8rem;
        box-shadow: var(--shadow);
    }

    .ui-map-empty-card {
        width: min(26rem, 100%);
        padding: var(--space-md);
        border-radius: var(--rounded);
        text-align: center;
        background: rgb(255 255 255 / 94%);
        box-shadow: var(--shadow);
    }

    .ui-map-warning-banner {
        padding: 0.7rem 0.9rem;
        border-radius: var(--rounded-sm);
        background: color-mix(in srgb, var(--warning) 14%, var(--white));
        border: 1px solid color-mix(in srgb, var(--warning) 28%, transparent);
        color: var(--darker);
        box-shadow: var(--shadow-sm);
    }

    /* Desktop project header
    ---------------------------------- */
    .ui-project-desktop-tab {
        transition: color 150ms ease;
    }

    .ui-project-desktop-tab::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: calc(var(--border) * -1);
        left: 0;
        height: 3px;
        background: transparent;
        transition: background 150ms ease;
    }

    .ui-project-desktop-tab:hover,
    .ui-project-desktop-tab.is-active {
        color: var(--darker);
    }

    .ui-project-desktop-tab.is-active::after {
        background: var(--brand-1);
    }

    /* Desktop project overview
    ---------------------------------- */
    .ui-project-overview-workspace {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.9fr);
        align-items: start;
    }

    .ui-project-overview-detail-list {
        display: grid;
        gap: var(--space-xs);
    }

    .ui-project-overview-detail-list > div {
        display: grid;
        grid-template-columns: minmax(8rem, 0.35fr) minmax(0, 1fr);
        gap: var(--space-xs);
        padding-bottom: var(--space-xs);
        border-bottom: var(--border) solid var(--light);
    }

    .ui-project-overview-detail-list > div:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .ui-project-overview-detail-list dt {
        color: var(--midtone);
        font-size: var(--text-sm);
        font-weight: var(--font-bold);
        text-transform: uppercase;
    }

    .ui-project-overview-detail-list dd {
        margin: 0;
        min-width: 0;
        color: var(--darker);
    }

    .ui-project-overview-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ui-project-overview-stat:hover {
        border-color: var(--brand-1);
    }

    .ui-project-overview-map-canvas {
        min-height: 22rem;
    }

    .ui-project-overview-stat-icon {
        width: 2.25rem;
        height: 2.25rem;
    }

    .ui-project-overview-activity-icon,
    .ui-project-overview-activity-thumbnail {
        width: 2.5rem;
        height: 2.5rem;
    }

    @media (max-width: 900px) {
        .ui-project-overview-workspace,
        .ui-project-overview-detail-list > div,
        .ui-project-overview-stats {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    /* Desktop project journal
    ---------------------------------- */
    .ui-project-journal-workspace {
        display: grid;
        grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
        align-items: start;
    }

    .ui-project-journal-summary-rail {
        position: sticky;
        top: var(--space-sm);
    }

    .ui-field-session-frame {
        display: block;
        min-width: 0;
    }

    @media (max-width: 900px) {
        .ui-project-journal-workspace {
            grid-template-columns: minmax(0, 1fr);
        }

        .ui-project-journal-summary-rail {
            position: static;
        }
    }

    /* Desktop project forms
    ---------------------------------- */
    .ui-project-forms-workspace {
        display: grid;
        grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
        align-items: start;
    }

    .ui-project-forms-summary-rail {
        position: sticky;
        top: var(--space-sm);
    }

    .ui-project-forms-table {
        table-layout: fixed;
    }

    .ui-project-forms-table th:first-child,
    .ui-project-forms-table td:first-child {
        width: 40%;
        white-space: normal;
    }

    .ui-project-forms-table td {
        vertical-align: middle;
    }

    .ui-project-forms-table tbody tr:hover {
        background: var(--lighter);
    }

    .ui-project-forms-table-link:hover .ui-project-forms-row-title {
        color: var(--brand-2);
    }

    @media (max-width: 900px) {
        .ui-project-forms-workspace {
            grid-template-columns: minmax(0, 1fr);
        }

        .ui-project-forms-summary-rail {
            position: static;
        }
    }

    /* PWA Header + Tabs
    ---------------------------------- */
    .ui-pwa-header-action {
        position: absolute;
        top: 50%;
        display: flex;
        align-items: center;
        min-width: 0;
        max-width: calc(50% - var(--space-md));
        transform: translateY(-50%);
    }

    .ui-pwa-header-action-left {
        left: max(var(--space-md), env(safe-area-inset-left));
        justify-content: flex-start;
    }

    .ui-pwa-header-action-right {
        right: max(var(--space-md), env(safe-area-inset-right));
        justify-content: flex-end;
    }

    .ui-pwa-header-control {
        width: 2.5rem;
        height: 2.5rem;
        flex: 0 0 2.5rem;
        padding: 0;
        border: 0;
        appearance: none;
        background: transparent;
        font: inherit;
        line-height: 1;
    }

    .ui-pwa-header-control:focus-visible {
        outline: 2px solid var(--brand-1);
        outline-offset: 2px;
    }

    .ui-pwa-header-control svg {
        flex-shrink: 0;
    }

    .ui-pwa-header-control-textual {
        width: auto;
        height: 2.5rem;
        min-width: max-content;
        flex: 0 0 auto;
        gap: var(--space-2xs);
        padding: 0 var(--space-xs);
        font-size: var(--text-sm);
        font-weight: var(--font-bold);
        line-height: 1;
        white-space: nowrap;
    }

    .ui-pwa-header-control-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .ui-pwa-header-control-text {
        display: inline-flex;
        align-items: center;
    }

    .ui-pwa-header-control-icon.hidden,
    .ui-pwa-header-control-text.hidden {
        display: none;
    }

    .ui-pwa-tab {
        -webkit-tap-highlight-color: transparent;
        transition:
            color 150ms ease,
            background 150ms ease;

        &.active::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--brand-1);
        }
    }

    /* Field code guide
    ---------------------------------- */
    .ui-field-code-category-track {
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;

        &::-webkit-scrollbar {
            display: none;
        }
    }

    .ui-field-code-category-chip {
        line-height: 1;

        .count {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding-left: 10px;
            padding-right: 10px;
            min-width: 1.35rem;
            height: 1.35rem;
            border-radius: var(--rounded-full);
            color: var(--white);
            background: var(--darker);
            font-size: 0.65rem;
            line-height: 1;
        }

        &.is-active {
            .count {
                color: var(--brand-1);
            }
        }
    }

    .ui-field-code-table-wrap {
        -webkit-overflow-scrolling: touch;
    }

    .ui-field-code-table {
        min-width: 42rem;
        border-collapse: collapse;

        th,
        td {
            padding: var(--space-xs) var(--space-md);
            border-bottom: 1px solid var(--light);
            text-align: left;
            vertical-align: top;
        }

        th {
            color: var(--midtone);
            background: var(--lighter);
            font-size: 0.7rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        tbody tr:last-child td {
            border-bottom: 0;
        }

        .code {
            width: 5rem;
            font-weight: 800;
            white-space: nowrap;
        }
    }

    /* Report forms
    ---------------------------------- */
    .ui-report-photo-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .ui-accident-report-form,
    .ui-report-form,
    .ui-restaking-form,
    .ui-request-survey-form {
        --ui-field-label-color: var(--darker);
        --ui-field-placeholder-color: var(--dark);
        --ui-field-value-color: var(--darker);
    }

    .ui-field-session-desktop-detail .ui-accident-report-form,
    .ui-field-session-desktop-detail .ui-report-form,
    .ui-field-session-desktop-detail .ui-restaking-form,
    .ui-field-session-desktop-detail .ui-request-survey-form {
        width: 100%;
        max-width: none;
    }

    .ui-accident-report-form .ui-field > label,
    .ui-report-form .ui-field > label,
    .ui-restaking-form .ui-field > label,
    .ui-request-survey-form .ui-field > label {
        font-size: var(--text-lg);
        line-height: 1.1;
    }

    .ui-restaking-form .ui-restaking-field-pair {
        display: flex;
        flex-wrap: nowrap;
        gap: var(--space-md);
    }

    .ui-restaking-form .ui-restaking-field-pair .ui-field,
    .ui-restaking-form .ui-restaking-duration-field .ui-field {
        min-width: 0;
    }

    .ui-restaking-form .ui-restaking-field-pair .ui-field {
        flex: 1 1 0;
    }

    .ui-restaking-form .ui-restaking-duration-field .ui-field {
        flex: 0 1 8rem;
    }

    .ui-signature-pad {
        --ui-signature-pad-height: 7rem;
    }

    .ui-signature-pad-box {
        min-height: var(--ui-signature-pad-height);
    }

    .ui-signature-pad-canvas {
        height: var(--ui-signature-pad-height);
    }

    .ui-signature-pad-placeholder {
        transition: opacity 160ms ease;
    }

    .ui-signature-pad.is-signing .ui-signature-pad-placeholder,
    .ui-signature-pad.has-signature .ui-signature-pad-placeholder {
        opacity: 0;
    }

    .ui-signature-pad-option {
        min-width: 4.25rem;
    }

    .ui-signature-pad-option[aria-pressed="true"] {
        border-color: var(--darker);
        box-shadow: inset 0 0 0 1px var(--darker);
    }

    .ui-signature-image {
        display: block;
        width: 100%;
        min-height: var(--ui-signature-pad-height, 7rem);
        object-fit: contain;
    }

    /* Weather Override
    ---------------------------------- */
    .ui-weather-page {
        .ui-weather-live-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-sm);
            padding: 0 var(--space-md) var(--space-sm);
        }

        .ui-weather-live-status {
            flex: 1;
            min-height: 1.2rem;
            font-size: var(--text-sm);
            font-weight: 600;
            color: var(--midtone);
        }

        .ui-weather-live-location {
            padding: 0 var(--space-md);
            font-size: var(--text-sm);
            font-weight: 600;
            color: var(--darker);
            word-break: break-word;
        }

        .ui-weather-live-refresh {
            padding: 0;
            color: var(--brand-1);
            font-size: var(--text-sm);
            font-weight: 800;
            background: transparent;
            border: none;
            text-decoration: underline;
            text-underline-offset: 0.12em;

            &:disabled {
                color: var(--midtone);
                cursor: wait;
                text-decoration: none;
            }
        }

        .ui-weather-editor {
            display: flex;
            flex-direction: column;
            gap: var(--space-md);
        }

        .ui-weather-section {
            display: flex;
            flex-direction: column;
            gap: var(--space-xs);
        }

        .ui-weather-section-title {
            font-size: var(--text-lg);
            font-weight: 800;
            color: var(--darker);
        }

        .ui-weather-observation,
        .ui-weather-option-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: var(--space-sm);
        }

        .ui-weather-choice {
            position: relative;
        }

        .ui-weather-choice-input {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        .ui-weather-choice-label {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 4rem;
            padding: 0.7rem 0.45rem;
            border: 1px solid var(--light);
            border-radius: var(--rounded-sm);
            background: var(--white);
            color: var(--darker);
            text-align: center;
            font-size: var(--text-sm);
            font-weight: var(--font-bold);
            line-height: 1.05;
            box-shadow: var(--shadow-sm);
            cursor: pointer;
            transition:
                border-color 150ms ease,
                background 150ms ease,
                box-shadow 150ms ease,
                transform 150ms ease,
                color 150ms ease;

            span {
                display: block;
            }
        }

        .ui-weather-choice-label--observation {
            min-height: 7.25rem;
            gap: var(--space-xs);
            padding: var(--space-sm) var(--space-xs);

            img {
                display: block;
                width: 2.5rem;
                height: 2.5rem;
                object-fit: contain;
            }
        }

        .ui-weather-observation-label {
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-height: 2.4em;
        }

        .ui-weather-choice-input:checked + .ui-weather-choice-label {
            border-color: var(--brand-1);
            background: color-mix(in srgb, var(--brand-1) 14%, var(--white));
            box-shadow: none;
        }

        .ui-weather-choice-input:focus-visible + .ui-weather-choice-label {
            outline: 2px solid var(--brand-1);
            outline-offset: 2px;
        }

        .ui-weather-choice-input:not(:disabled)
            + .ui-weather-choice-label:hover {
            transform: translateY(-1px);
            box-shadow: var(--shadow);
        }

        .ui-weather-choice-input:disabled + .ui-weather-choice-label {
            color: var(--midtone);
            cursor: not-allowed;
            box-shadow: none;
        }

        .ui-weather-choice-input:disabled:checked + .ui-weather-choice-label {
            border-color: var(--midtone);
            background: color-mix(in srgb, var(--midtone) 18%, var(--white));
            color: var(--darker);
        }

        .ui-weather-temperature {
            display: inline-flex;
            align-self: flex-start;
            align-items: center;
            width: auto;
            min-width: 8.5rem;
            border: 1px solid var(--light);
            border-radius: var(--rounded-sm);
            background: var(--white);
            box-shadow: var(--shadow-sm);
            overflow: hidden;
        }

        .ui-weather-temperature-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2.6rem;
            height: 3rem;
            color: var(--darker);
            font-size: 1.65rem;
            font-weight: 700;
            line-height: 1;
            background: var(--white);
            transition:
                background 150ms ease,
                color 150ms ease;

            &:hover:not(:disabled) {
                background: color-mix(
                    in srgb,
                    var(--brand-1) 12%,
                    var(--white)
                );
            }

            &:disabled {
                color: var(--midtone);
                cursor: not-allowed;
            }
        }

        .ui-weather-temperature-value {
            min-width: 3.3rem;
            text-align: center;
            font-size: var(--text-lg);
            font-weight: 800;
            color: var(--darker);
        }

        &.is-override-disabled {
            .ui-weather-temperature {
                border-color: var(--midtone);
                background: color-mix(
                    in srgb,
                    var(--midtone) 18%,
                    var(--white)
                );
                box-shadow: none;
            }
        }
    }

    /* Field Session Flow
    ---------------------------------- */

    /* Shared section primitives.
       - .ui-section-panel: vertical stack with a 1px hairline separator strip
         between rows (achieved via gap on a tinted bg) and top/bottom borders.
       - .ui-section-list: same hairline-separator strip without the borders.
       - .ui-section-label: typographic style for small uppercase headings.
         Combine with utilities like `bg-white px-md py-xs` to create a panel
         header row. */
    .ui-section-panel {
        display: flex;
        flex-direction: column;
        gap: 1px;
        background: var(--light);
        border-top: 1px solid var(--light);
        border-bottom: 1px solid var(--light);
    }

    .ui-section-list {
        display: flex;
        flex-direction: column;
        gap: 1px;
        background: var(--light);
    }

    .ui-section-label {
        color: var(--darker);
        font-size: var(--text-sm);
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    /* Form layout reset used by the field-session screens. The default form
       styling adds max-width and gaps that don't suit these full-bleed PWA
       flows. */
    form.ui-form-flat {
        display: block;
        max-width: none;
        gap: 0;
    }

    /* Reusable bottom spacing for PWA screens with a fixed primary action. */
    .ui-pwa-fixed-cta-space {
        padding-bottom: calc(env(safe-area-inset-bottom) + 3rem);
    }

    /* Reusable fixed bottom action for full-bleed PWA flows. */
    .ui-pwa-fixed-cta {
        position: fixed;
        left: var(--space-md);
        right: var(--space-md);
        bottom: calc(env(safe-area-inset-bottom) + 1rem);
        width: auto;
        z-index: 40;
    }

    .ui-field-session-add-crew-field {
        .ui-field {
            min-width: 0;
        }

        input:not([type="checkbox"], [type="radio"]) {
            height: 2.25rem;
            padding: 0 var(--space-xs);
            border-radius: var(--rounded-sm);
            font-size: var(--text-sm);
        }
    }

    .ui-field-session-add-crew-role-input:checked
        + .ui-field-session-crew-role {
        background: var(--brand-1);
        color: var(--brand-1-content);
    }

    .ui-field-session-add-crew-role-input:focus-visible
        + .ui-field-session-crew-role {
        outline: 2px solid var(--brand-1);
        outline-offset: 2px;
    }

    .ui-field-session-add-crew-secondary {
        min-height: 2.75rem;
        padding: 0 var(--space-sm);
        border: 0;
        line-height: 1;
    }

    .ui-field-session-crew-summary {
        padding: var(--space-xs) var(--space-md);
        background: var(--white);
    }

    .ui-field-session-crew-summary-line {
        color: var(--darker);
        font-size: var(--text-base);
        font-weight: 800;
        line-height: 1.25;
        white-space: normal;
    }

    .ui-field-session-crew-summary-entry {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        flex-wrap: wrap;
    }

    .ui-field-session-crew-summary-separator {
        color: var(--darker);
    }

    .ui-field-session-crew-summary-name {
        color: var(--darker);
    }

    /* Crew member row used inside the "Company Roster" .ui-section-list. All
       children are intentionally generic names scoped under the parent. */
    .ui-crew-member {
        display: flex;
        flex-direction: column;
        gap: var(--space-2xs);
        padding: var(--space-xs) var(--space-md);
        background: var(--white);
        transition:
            background 150ms ease,
            box-shadow 150ms ease;

        .button {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-sm);
            width: 100%;
            color: inherit;
            text-align: left;
        }

        .main {
            display: flex;
            align-items: center;
            gap: var(--space-xs);
            min-width: 0;
            flex: 1;
        }

        .copy {
            display: flex;
            flex-direction: column;
            gap: 0.05rem;
            min-width: 0;
        }

        .name {
            color: var(--darker);
            font-size: var(--text-base);
            font-weight: 800;
            line-height: 1.1;
        }

        .subtitle {
            color: var(--midtone);
            font-size: var(--text-sm);
            line-height: 1.1;
        }

        .ui-field-session-crew-role-switch.hidden {
            display: none;
        }

        .control {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.5rem;
            height: 1.5rem;
            border: 1.5px solid var(--midtone);
            border-radius: var(--rounded-full);
            color: transparent;
            font-size: 0.85rem;
            font-weight: 800;
            flex-shrink: 0;
            transition:
                border-color 150ms ease,
                background 150ms ease,
                color 150ms ease;
        }

        .control svg {
            width: 1rem;
            height: 1rem;
            stroke-width: 3;
        }

        .footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-sm);
            padding-left: calc(2.5rem + var(--space-sm));
        }

        &.is-selected {
            background: color-mix(in srgb, var(--brand-1) 10%, var(--white));

            .control {
                border-color: var(--brand-1);
                background: var(--white);
                color: var(--brand-1);
            }
        }
    }

    .ui-field-session-crew-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.1rem 0.25rem;
        background: var(--brand-1);
        color: var(--white);
        font-size: 0.6rem;
        font-weight: 500;
        text-transform: uppercase;
    }

    .ui-field-session-crew-role {
        min-width: 2.75rem;
        min-height: 1.75rem;
        padding: 0 var(--space-sm);
        border: 0;
        background: transparent;
        font: inherit;
        line-height: 1;
        text-align: center;
    }

    button.ui-field-session-crew-role {
        cursor: pointer;
    }

    button.ui-field-session-crew-role:disabled {
        cursor: default;
    }

    .ui-field-session-crew-role.is-active {
        background: var(--brand-1);
        color: var(--brand-1-content);
    }

    .ui-field-session-crew-empty {
        margin: 0;
        padding: var(--space-sm) var(--space-md) var(--space-lg);
        color: var(--midtone);
        font-size: var(--text-sm);
        background: var(--white);
    }

    /* Instrument row used inside the equipment list. Children are scoped under
       the parent; .ui-instrument-icon and .ui-instrument-name are kept as
       standalone classes because the "Setup A New Device" link reuses them. */
    .ui-instrument-row {
        background: var(--white);
        transition: background 150ms ease;

        .button {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-sm);
            width: 100%;
            padding: var(--space-xs) var(--space-md);
            color: inherit;
            text-align: left;
        }

        .main {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            min-width: 0;
            flex: 1;
        }

        .copy {
            display: flex;
            flex-direction: column;
            gap: 0.08rem;
            min-width: 0;
            flex: 1;
        }

        .serial {
            color: var(--midtone);
            font-size: var(--text-sm);
            line-height: 1.1;
        }

        .status {
            font-size: var(--text-sm);
            font-weight: 700;
            line-height: 1.1;
        }

        .control {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.5rem;
            height: 1.5rem;
            border: 1.5px solid var(--midtone);
            border-radius: var(--rounded-full);
            color: transparent;
            font-size: 0.85rem;
            font-weight: 800;
            flex-shrink: 0;
            transition:
                border-color 150ms ease,
                background 150ms ease,
                color 150ms ease;
        }

        &.is-selected {
            background: color-mix(in srgb, var(--brand-1) 10%, var(--white));

            .control {
                border-color: var(--brand-1);
                background: var(--white);
                color: var(--brand-1);
            }
        }
    }

    /* Shared between .ui-instrument-row and the "Setup A New Device" link. */
    .ui-instrument-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        border-radius: var(--rounded-sm);
        background: var(--lighter);
        color: var(--darker);
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.03em;
        flex-shrink: 0;
    }

    .ui-instrument-svg-icon {
        display: block;
        width: auto;
        height: 1.35rem;
        max-width: 1.45rem;
        color: var(--darker);
    }

    .ui-instrument-name {
        color: var(--darker);
        font-size: var(--text-base);
        font-weight: 800;
        line-height: 1.1;
    }

    /* "Setup A New Device" entry — sibling to .ui-instrument-row but
       structurally a link, so it gets its own component name. */
    .ui-instrument-other-button {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-sm);
        width: 100%;
        padding: var(--space-xs) var(--space-md);
        color: inherit;
        text-align: left;

        .copy {
            display: flex;
            flex-direction: column;
            gap: 0.08rem;
            min-width: 0;
            flex: 1;
        }

        .arrow {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--darker);
            flex-shrink: 0;
        }
    }

    .ui-choice-card-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-sm);
    }

    .ui-choice-card-icon {
        display: block;
        width: auto;
        height: 2rem;
        max-width: 2rem;
        transition: color 150ms ease;
    }

    .ui-choice-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-xs);
        width: 100%;
        min-height: 6rem;
        padding: var(--space-sm);
        border: 1px solid var(--light);
        border-radius: var(--rounded);
        background: var(--white);
        color: var(--darker);
        transition:
            border-color 150ms ease,
            background 150ms ease,
            box-shadow 150ms ease,
            transform 150ms ease;

        &:hover {
            transform: translateY(-1px);
            box-shadow: var(--shadow);
        }

        &:disabled {
            opacity: 0.45;
            cursor: not-allowed;
            transform: none;
            box-shadow: var(--shadow-sm);
        }

        &.is-selected {
            border-color: var(--brand-1);
            background: color-mix(in srgb, var(--brand-1) 12%, var(--white));
            box-shadow: none;
        }
    }

    .ui-choice-card-mark {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.4rem;
        height: 2.4rem;
        border-radius: var(--rounded-sm);
        background: var(--lighter);
        color: var(--darker);
        font-size: 0.8rem;
        font-weight: 800;
        letter-spacing: 0.04em;
    }

    .ui-choice-card-label {
        font-size: var(--text-sm);
        font-weight: 800;
        line-height: 1.2;
        text-align: center;
    }

    body.ui-field-session-shot-body,
    body.ui-total-station-sideshot-body {
        position: fixed;
        inset: 0;
        width: 100%;
        touch-action: none;
    }

    /* Data entry pane (GPS RTK / GPS Static / Total Station collection
       screens). Provides the shared 2x2 entry-box grid + right action rail.
       The active / filled / empty border colors and display text colors are
       still toggled by the per-screen Stimulus controllers via Prewind utility
       classes, so this layer only owns sizing that Prewind cannot express cleanly.
       See the shared `org/field_sessions/data_entry_box` partial for the
       per-box markup. */
    .ui-data-entry-pane {
        height: 18rem;
    }

    .ui-field-session-shot-pane {
        --ui-field-height: calc(var(--space-md) + var(--space-sm));
        --ui-field-padding: var(--space-xs);
        --ui-field-font-size: var(--text-base);
        --ui-field-border-radius: var(--rounded-sm);
        --ui-field-label-color: var(--darker);
        --ui-field-placeholder-color: var(--midtone);
        --ui-field-value-color: var(--darker);

        height: calc(
            18rem + var(--space-2xl) + var(--space-lg) + var(--space-sm)
        );
        overflow: hidden;
        overscroll-behavior: none;
    }

    .ui-field-session-shot-pane .ui-field {
        min-width: 0;
        max-width: 100%;
        gap: var(--space-3xs);
    }

    .ui-rtk-shot-select {
        flex-basis: 7.75rem;
    }

    .ui-field-session-shot-pane .ui-rtk-shot-select .ui-field {
        width: 100%;
        min-width: 0;
        flex: none;
    }

    .ui-field-session-shot-description .ui-field,
    .ui-field-session-shot-description .ui-field-control {
        display: flex;
        flex: 1;
        min-height: 0;
    }

    .ui-field-session-shot-description textarea {
        flex: 1;
        min-height: 0;
        resize: none;
    }

    .ui-data-entry-fields {
        display: grid;
        height: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(0, 1fr));
        gap: var(--space-xs);
    }

    .ui-data-entry-fields--gps-static {
        grid-template-rows: minmax(0, 0.78fr) repeat(2, minmax(0, 1fr));
    }

    .ui-data-entry-box--full {
        grid-column: 1 / -1;
    }

    .ui-data-entry-box {
        min-width: 0;
        min-height: 0;
    }

    .ui-data-entry-rail {
        width: clamp(5.25rem, 20vw, 5.75rem);
        flex-shrink: 0;
    }

    .ui-data-entry-rail-icon {
        width: 56px;
        height: 56px;
        appearance: none;
        -webkit-appearance: none;

        &:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
    }

    .ui-camera-shutter {
        width: 4.5rem;
        height: 4.5rem;
        border: 4px solid color-mix(in srgb, var(--brand-1) 76%, var(--dark));
        background: var(--brand-1);
        appearance: none;
        -webkit-appearance: none;
    }

    .ui-camera-photo-queue {
        min-height: 2rem;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .ui-camera-photo-queue-tile {
        width: 1.35rem;
        height: 1.35rem;
        flex: 0 0 auto;
        overflow: hidden;
        border: 1px solid color-mix(in srgb, var(--white) 78%, transparent);
        border-radius: var(--radius-sm);
        background: color-mix(in srgb, var(--white) 24%, transparent);
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--black) 24%, transparent);
    }

    .ui-camera-photo-queue-image {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .ui-camera-photo-queue-tile.is-new {
        animation: ui-camera-photo-queue-pop 180ms ease-out;
    }

    .ui-camera-photo-queue--saving .ui-camera-photo-queue-tile {
        animation: ui-camera-photo-queue-pulse 900ms ease-in-out infinite;
    }

    @keyframes ui-camera-photo-queue-pop {
        0% {
            opacity: 0;
            transform: translateY(0.3rem) scale(0.82);
        }

        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    @keyframes ui-camera-photo-queue-pulse {
        0%,
        100% {
            opacity: 1;
            transform: scale(1);
        }

        50% {
            opacity: 0.64;
            transform: scale(0.94);
        }
    }

    .ui-field-notes-back-button {
        border: 0;
        background: transparent;
        appearance: none;
        -webkit-appearance: none;
    }

    .ui-field-notes-header-spacer {
        width: 2rem;
        flex-shrink: 0;
    }

    .ui-field-notes-textarea {
        min-height: 7.5rem;
    }

    .ui-measurement-keypad {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: repeat(4, minmax(0, 1fr));
        gap: var(--border);
    }

    .ui-measurement-keypad-key,
    .ui-measurement-keypad-action,
    .ui-measurement-keypad-primary {
        appearance: none;
        -webkit-appearance: none;
        border: 0;
        font-family: inherit;
        line-height: 1;
    }

    .ui-measurement-keypad-primary:disabled {
        cursor: not-allowed;
    }

    .ui-measurement-keypad-shell {
        max-height: 100dvh;
        overflow: hidden;
    }

    .ui-measurement-keypad-shell.is-native-keyboard-open {
        flex: 0 0 auto;
        max-height: 0;
        min-height: 0;
    }

    .ui-native-keyboard-input {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 1;
        width: 1px;
        height: 1px;
        padding: 0;
        border: 0;
        opacity: 0.01;
        font-size: 16px;
        color: transparent;
        background: transparent;
        caret-color: transparent;
        pointer-events: none;
    }

    /* Journal card — one entry per completed field session on the project
       page. Header (with optional .is-flagged tint) + optional flag banner +
       body (label + stats row) + footer (crew). Per-stat markup is shared
       via the org/field_sessions/journal/_stat partial. */
    .ui-journal-card {
        --ui-journal-card-action-column: 5.25rem;

        scroll-margin-top: calc(6rem + var(--space-sm));
        display: block;
        margin-bottom: var(--ui-journal-card-gap);
        background: var(--ui-journal-card-bg);
        border: var(--ui-journal-card-border-width) solid
            var(--ui-journal-card-border-color);
        border-radius: var(--ui-journal-card-radius);
        font-size: var(--ui-journal-card-text-size);
    }

    .ui-journal-card--session-rows,
    .ui-journal-card--total-station {
        --ui-journal-card-action-column: 5.75rem;

        overflow: hidden;
    }

    .ui-journal-card-link {
        color: inherit;
        text-decoration: none;
    }

    .ui-journal-card-link:active {
        transform: translateY(1px);
    }

    .ui-journal-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--ui-journal-card-padding);
        border-bottom: var(--ui-journal-card-divider-width) solid
            var(--ui-journal-card-border-color);

        &.is-flagged {
            background: color-mix(in srgb, var(--warning) 30%, transparent);
        }
    }

    .ui-journal-card-header--compact {
        padding: var(--space-sm) var(--ui-journal-card-padding-wide)
            var(--space-xs);
        border-bottom: 0;
    }

    .ui-journal-card--session-rows .ui-journal-card-header--compact,
    .ui-journal-card--total-station .ui-journal-card-header--compact {
        background: var(--lighter);
        border-bottom: var(--ui-journal-card-divider-width) solid
            var(--ui-journal-card-border-color);
    }

    .ui-journal-card-title-group {
        display: flex;
        align-items: center;
        gap: var(--space-2xs);
    }

    /* Title text + session label live in the same group. The title swaps
       to warning color when the parent header has .is-flagged so the markup
       doesn't have to repeat that conditional. */
    .ui-journal-card-title {
        color: var(--brand-1);
        font-weight: 700;
        text-transform: uppercase;
    }

    .ui-journal-card-header.is-flagged .ui-journal-card-title {
        color: var(--warning);
    }

    .ui-journal-card-session {
        color: var(--dark);
        font-weight: 700;
    }

    .ui-journal-card-meta {
        display: flex;
        align-items: center;
        gap: var(--space-xs);
        color: var(--midtone);
    }

    .ui-journal-card-edit {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--darker);
        text-decoration: none;
    }

    .ui-journal-card-edit:active {
        transform: translateY(1px);
    }

    /* Warm banner under the header on flagged sessions. The previous markup
       had a stray `border-black` here — the color change between banner and
       body is the separator now, no hairline. */
    .ui-journal-card-flag-banner {
        padding: var(--ui-journal-card-padding);
        background: color-mix(in srgb, var(--warning) 30%, transparent);
        color: var(--warning);
        font-weight: 700;
    }

    .ui-journal-card-body {
        padding: var(--ui-journal-card-padding);
        border-bottom: var(--ui-journal-card-divider-width) solid
            var(--ui-journal-card-border-color);
    }

    .ui-journal-card-body-eyebrow {
        color: var(--midtone);
        font-weight: 700;
        text-transform: uppercase;
    }

    .ui-journal-card-footer {
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(
                --ui-journal-card-action-column
            );
        align-items: center;
        gap: var(--space-xs);
        padding: var(--ui-journal-card-padding);
    }

    .ui-journal-card-crew {
        min-width: 0;
        display: inline-flex;
        align-items: center;
        gap: var(--space-xs);
    }

    .ui-journal-card-view {
        justify-self: end;
        margin-right: var(--space-2xs);
        color: var(--brand-2);
        font-weight: 700;
        text-decoration: none;
    }

    .ui-journal-rework-summary {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--space-sm);
        padding: var(--ui-journal-card-padding)
            var(--ui-journal-card-padding-wide);
        border-bottom: var(--ui-journal-card-divider-width) solid
            var(--ui-journal-card-border-color);
    }

    .ui-journal-rework-summary-item {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: var(--space-3xs);
    }

    .ui-journal-rework-summary-item span {
        color: var(--dark);
        font-size: var(--text-sm);
        font-weight: 800;
        line-height: 1.1;
        text-transform: uppercase;
    }

    .ui-journal-rework-summary-item strong {
        min-width: 0;
        color: var(--darker);
        font-weight: 800;
        line-height: 1.15;
        overflow-wrap: anywhere;
    }

    .ui-journal-rework-signature-status--signed {
        color: var(--success) !important;
    }

    .ui-journal-rework-signature-status--pending {
        color: var(--midtone) !important;
        font-style: italic;
    }

    /* Form cards show compact photo previews below the summary. */
    .ui-journal-card-photo-preview {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        justify-content: start;
        gap: var(--space-xs);
        padding: var(--space-sm) var(--ui-journal-card-padding-wide);
        border-bottom: var(--ui-journal-card-divider-width) solid
            var(--ui-journal-card-border-color);
    }

    .ui-journal-card-photo-preview-item,
    .ui-journal-card-photo-preview-overflow {
        aspect-ratio: 1;
        overflow: hidden;
        border-radius: var(--rounded-sm);
        background: var(--light);
    }

    .ui-journal-card-photo-preview-overflow {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--darker);
        font-weight: 800;
    }

    .ui-journal-setup-list {
        display: flex;
        flex-direction: column;
    }

    .ui-journal-setup-heading {
        padding: var(--ui-journal-card-padding)
            var(--ui-journal-card-padding-wide);
        border-bottom: var(--ui-journal-card-divider-width) solid
            var(--ui-journal-card-border-color);
    }

    .ui-journal-setup-title {
        color: var(--dark);
        font-weight: 800;
        line-height: 1.1;
        text-transform: uppercase;
    }

    .ui-journal-setup-meta {
        margin-top: var(--space-3xs);
        color: var(--midtone);
        font-size: var(--text-sm);
        font-weight: 700;
        line-height: 1.2;
    }

    .ui-journal-setup-table-header {
        display: grid;
        grid-template-columns:
            2.5rem minmax(5.4rem, 0.9fr) minmax(0, 1.15fr)
            var(--ui-journal-card-action-column);
        align-items: center;
        column-gap: var(--space-xs);
        padding: var(--space-2xs) var(--ui-journal-card-padding-wide);
        color: var(--dark);
        font-size: var(--text-sm);
        font-weight: 800;
        line-height: 1.1;
        text-transform: uppercase;
        background: var(--lighter);
        border-bottom: var(--ui-journal-card-divider-width) solid
            var(--ui-journal-card-border-color);
    }

    .ui-journal-setup-table-header span:last-child {
        text-align: right;
    }

    .ui-journal-setup-row {
        display: grid;
        grid-template-columns:
            2.5rem minmax(5.4rem, 0.9fr) minmax(0, 1.15fr)
            var(--ui-journal-card-action-column);
        align-items: center;
        column-gap: var(--space-xs);
        padding: var(--ui-journal-card-padding)
            var(--ui-journal-card-padding-wide);
        color: var(--midtone);
        text-decoration: none;
        border-bottom: var(--ui-journal-card-divider-width) solid
            var(--ui-journal-card-border-color);
    }

    .ui-journal-setup-row:active {
        background: var(--lighter);
    }

    .ui-journal-card--gps-rtk .ui-journal-setup-table-header,
    .ui-journal-card--gps-rtk
        .ui-journal-setup-row:not(.ui-journal-setup-row--add) {
        grid-template-columns:
            3.25rem minmax(5.1rem, 0.85fr) minmax(0, 1fr)
            var(--ui-journal-card-action-column);
    }

    .ui-journal-card--gps-rtk .ui-journal-setup-table-header span:first-child {
        white-space: nowrap;
    }

    .ui-journal-card--gps-rtk .ui-journal-setup-table-header--with-edit,
    .ui-journal-card--gps-rtk
        .ui-journal-setup-row--with-edit:not(.ui-journal-setup-row--add) {
        grid-template-columns:
            3.25rem minmax(5.1rem, 0.85fr) minmax(0, 1fr)
            var(--ui-journal-card-action-column) 2rem;
    }

    .ui-journal-setup-row-edit {
        justify-self: end;
    }

    .ui-journal-setup-row--add {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        color: var(--dark);
        font-weight: 800;
        text-align: center;
    }

    .ui-journal-setup-index {
        color: var(--midtone);
        font-weight: 800;
    }

    .ui-journal-setup-main,
    .ui-journal-setup-detail,
    .ui-journal-setup-status,
    .ui-journal-setup-media {
        min-width: 0;
        line-height: 1.2;
    }

    .ui-journal-setup-main {
        font-weight: 800;
    }

    .ui-journal-setup-detail {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-3xs);
        color: var(--midtone);
    }

    .ui-journal-setup-status {
        justify-self: end;
        font-weight: 800;
        text-align: right;
        white-space: nowrap;
    }

    .ui-journal-setup-status.is-pass {
        color: var(--success);
    }

    .ui-journal-setup-status.is-flagged {
        color: var(--warning);
    }

    .ui-journal-shot-chip {
        display: inline-flex;
        align-items: center;
        min-height: 1.45rem;
        padding: 0 var(--space-2xs);
        color: var(--dark);
        background: var(--lighter);
        border: var(--ui-journal-card-divider-width) solid var(--light);
        border-radius: var(--rounded-full);
        font-size: var(--text-sm);
        font-weight: 800;
        line-height: 1;
    }

    .ui-journal-setup-empty {
        color: var(--midtone);
        font-weight: 800;
    }

    .ui-journal-setup-media {
        justify-self: end;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: var(--space-xs);
        color: var(--midtone);
        font-weight: 700;
        text-align: right;
    }

    .ui-journal-setup-media-item {
        display: inline-flex;
        align-items: center;
        gap: var(--space-3xs);
        white-space: nowrap;
    }

    .ui-journal-setup-chevron {
        flex: 0 0 auto;
        color: var(--midtone);
    }

    .ui-journal-static-observation-list {
        padding: 0;
    }

    .ui-journal-static-observation-list .ui-journal-setup-heading {
        padding: var(--ui-journal-card-padding)
            var(--ui-journal-card-padding-wide);
    }

    .ui-journal-static-observation-list .ui-static-observation-label {
        color: var(--dark);
    }

    .ui-journal-static-observation-summary {
        display: block;
        color: inherit;
        text-decoration: none;
    }

    .ui-journal-static-observation-summary:active {
        background: var(--lighter);
    }

    .ui-journal-static-observation-point-block {
        display: flex;
        align-items: center;
        gap: var(--space-xs);
        padding: var(--space-sm) var(--ui-journal-card-padding-wide);
    }

    .ui-journal-static-observation-point-value {
        color: var(--midtone);
        font-size: var(--text-lg);
        font-weight: 800;
        line-height: 1.1;
    }

    .ui-journal-static-observation-metrics {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border-top: var(--ui-journal-card-divider-width) solid
            var(--ui-journal-card-border-color);
        border-bottom: var(--ui-journal-card-divider-width) solid
            var(--ui-journal-card-border-color);
    }

    .ui-journal-static-observation-metric {
        min-width: 0;
        padding: var(--space-sm) var(--space-xs);
        text-align: center;
    }

    .ui-journal-static-observation-metric
        + .ui-journal-static-observation-metric {
        border-left: var(--ui-journal-card-divider-width) solid
            var(--ui-journal-card-border-color);
    }

    .ui-journal-static-observation-metric strong,
    .ui-journal-static-observation-detail-row strong {
        display: block;
        min-width: 0;
        color: var(--midtone);
        font-size: var(--text-base);
        font-weight: 800;
        line-height: 1.15;
    }

    .ui-journal-static-observation-metric strong {
        margin-top: var(--space-2xs);
    }

    .ui-journal-static-observation-detail-row {
        padding: var(--space-sm) var(--ui-journal-card-padding-wide);
        border-bottom: var(--ui-journal-card-divider-width) solid
            var(--ui-journal-card-border-color);
    }

    .ui-journal-static-observation-detail-row:last-child {
        border-bottom: 0;
    }

    .ui-journal-detail-list {
        display: flex;
        flex-direction: column;
    }

    .ui-journal-detail-panel {
        padding: var(--ui-journal-card-padding)
            var(--ui-journal-card-padding-wide);
    }

    .ui-journal-detail-panel + .ui-journal-detail-panel {
        border-top: var(--ui-journal-card-divider-width) solid
            var(--ui-journal-card-border-color);
    }

    .ui-journal-detail-label {
        display: block;
        color: var(--dark);
        font-size: var(--text-sm);
        font-weight: 800;
        line-height: 1.1;
        text-transform: uppercase;
    }

    .ui-journal-detail-value {
        display: block;
        margin-top: var(--space-3xs);
        color: var(--midtone);
        font-weight: 700;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    @media (max-width: 420px) {
        .ui-journal-card--total-station {
            --ui-journal-card-action-column: 5.25rem;
        }

        .ui-journal-setup-table-header,
        .ui-journal-setup-row {
            grid-template-columns:
                2rem minmax(4.9rem, 0.75fr) minmax(0, 0.85fr)
                var(--ui-journal-card-action-column);
            column-gap: var(--space-2xs);
        }

        .ui-journal-card--gps-rtk .ui-journal-setup-table-header,
        .ui-journal-card--gps-rtk
            .ui-journal-setup-row:not(.ui-journal-setup-row--add) {
            grid-template-columns:
                3.25rem minmax(4.9rem, 0.75fr) minmax(0, 0.85fr)
                var(--ui-journal-card-action-column);
        }

        .ui-journal-card--gps-rtk .ui-journal-setup-table-header--with-edit,
        .ui-journal-card--gps-rtk
            .ui-journal-setup-row--with-edit:not(.ui-journal-setup-row--add) {
            grid-template-columns:
                3.25rem minmax(4.9rem, 0.75fr) minmax(0, 0.85fr)
                var(--ui-journal-card-action-column) 2rem;
        }

        .ui-journal-setup-media {
            gap: var(--space-2xs);
        }
    }

    /* Stats row used inside the journal card body by every workflow summary. */
    .ui-journal-stats {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-md);
    }

    .ui-journal-stat {
        display: flex;
        flex-direction: column;
    }

    .ui-journal-stat-label {
        color: var(--midtone);
        font-weight: 700;
        text-transform: uppercase;
    }

    .ui-journal-stat-value {
        color: var(--dark);

        &.ui-journal-stat-value--bold {
            font-weight: 700;
        }

        &.ui-journal-stat-value--success {
            color: var(--success);
            font-weight: 700;
        }

        &.ui-journal-stat-value--warning {
            color: var(--warning);
            font-weight: 700;
        }
    }

    /* Project photo scrolling hides mobile scrollbars; sizing stays in utilities. */
    .ui-project-photo-content {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .ui-project-photo-content::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    /* Desktop project photos use compact controls and a denser responsive grid. */
    .ui-project-photo-workspace {
        --ui-field-height: calc(var(--space-md) + var(--space-xs));
        --ui-field-padding: var(--space-xs);
        --ui-field-font-size: var(--text-base);
        --ui-field-border-radius: var(--rounded-sm);
        --ui-project-photo-sticky-offset: var(--space-sm);
        --ui-project-photo-filter-sticky-height: 6.75rem;
    }

    form.ui-project-photo-filters {
        position: sticky;
        top: var(--ui-project-photo-sticky-offset);
        z-index: 20;
        width: 100%;
        max-width: none;
        gap: var(--space-xs);
        box-shadow: var(--shadow-sm);
    }

    form.ui-project-photo-filters .ui-project-photo-filter-row.form-row {
        display: grid;
        grid-template-columns: minmax(14rem, 1.15fr) minmax(9rem, 0.7fr) minmax(14rem, 1fr) auto;
        align-items: flex-end;
        gap: var(--space-2xs);
    }

    form.ui-project-photo-filters .ui-project-photo-filter-row .ui-field {
        min-width: 0;
    }

    .ui-project-photo-filter-actions {
        flex: 0 0 auto;
        flex-wrap: nowrap;
    }

    .ui-project-photo-filter-submit,
    .ui-project-photo-filter-clear {
        min-height: var(--ui-field-height);
        gap: var(--space-2xs);
        padding-top: 0;
        padding-bottom: 0;
        font-size: var(--text-base);
        line-height: 1;
    }

    /* Project photo grid uses CSS Grid because Prewind does not provide grid utilities. */
    .ui-project-photo-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ui-project-photo-upload-handoff {
        top: 6rem;
        overflow-y: auto;
        background: color-mix(in srgb, var(--white) 94%, transparent);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        animation: ui-project-photo-upload-handoff-in 180ms ease-out;
    }

    .ui-project-photo-upload-surface {
        min-height: 100%;
        padding: var(--space-sm);
    }

    .ui-project-photo-upload-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-xs);
    }

    .ui-project-photo-upload-tile {
        aspect-ratio: 1;
        overflow: hidden;
        border: 1px solid var(--light);
        border-radius: var(--radius-sm);
        background: var(--lighter);
        box-shadow: var(--shadow-sm);
        animation: ui-project-photo-upload-tile-in 220ms ease-out both;
    }

    .ui-project-photo-upload-image {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    @keyframes ui-project-photo-upload-handoff-in {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes ui-project-photo-upload-tile-in {
        0% {
            opacity: 0;
            transform: translateY(0.4rem) scale(0.96);
        }

        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    .ui-project-photo-grid--desktop {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
    }

    .ui-project-photo-page-frame {
        display: contents;
    }

    .ui-project-photo-load-more-frame {
        grid-column: 1 / -1;
    }

    /* Desktop project photos reserve a persistent map rail beside the grid. */
    .ui-project-photo-layout {
        display: grid;
        grid-template-columns: minmax(0, 3fr) minmax(20rem, 2fr);
        gap: var(--space-sm);
        align-items: start;
    }

    .ui-project-photo-map-column {
        position: sticky;
        top: calc(var(--ui-project-photo-sticky-offset) + var(--ui-project-photo-filter-sticky-height) + var(--space-sm));
        height: clamp(24rem, calc(100dvh - 15rem), 42rem);
    }

    .ui-project-photo-preview-trigger {
        display: block;
        width: 100%;
        padding: 0;
        border: 0;
        color: inherit;
        background: transparent;
        text-align: left;
        cursor: pointer;
    }

    .ui-project-photo-preview-trigger.is-selected {
        outline: var(--border-lg) solid var(--brand-1);
        outline-offset: calc(var(--border-lg) * -1);
    }

    .ui-project-photo-preview-trigger:focus-visible {
        outline: var(--border-lg) solid var(--brand-1);
        outline-offset: calc(var(--border-lg) * -1);
    }

    .ui-project-photo-detail-stage {
        flex-basis: 100%;
        min-height: 100%;
    }

    .ui-project-photo-detail-workspace {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.4fr);
        align-items: start;
    }

    .ui-project-photo-detail-image {
        max-height: min(56vh, 36rem);
    }

    .ui-project-photo-detail-annotation-panel {
        max-height: min(56vh, 36rem);
    }

    @media (max-width: 900px) {
        .ui-project-photo-detail-workspace {
            grid-template-columns: minmax(0, 1fr);
        }

        .ui-project-photo-detail-annotation-panel {
            max-height: none;
        }
    }

    .ui-project-photo-annotation-frame {
        cursor: crosshair;
    }

    .ui-project-photo-annotation-pin,
    .ui-project-photo-annotation-badge {
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.5rem;
        height: 1.5rem;
        padding: 0.0625rem 0 0;
        border-radius: var(--rounded-full);
        color: var(--white);
        font-size: var(--text-sm);
        font-weight: var(--font-bold);
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum";
        line-height: 1;
        text-align: center;
        box-shadow: var(--shadow-sm);
        flex-shrink: 0;
    }

    .ui-project-photo-annotation-pin {
        position: absolute;
        z-index: 1;
        appearance: none;
        border: 0;
        transform: translate(-50%, -50%);
        cursor: pointer;
        pointer-events: auto;
    }

    .ui-project-photo-annotation-temp-pin {
        position: absolute;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: var(--rounded-full);
        transform: translate(-50%, -50%);
        pointer-events: none;
    }

    .ui-project-photo-annotation-popover {
        width: min(16rem, calc(100vw - var(--space-xl)));
        transform: translateX(-50%);
    }

    .ui-projects-list-scroll {
        padding-bottom: calc(env(safe-area-inset-bottom) + 7rem);
    }

    .ui-projects-load-more {
        min-height: calc(var(--space-lg) + var(--space-sm));
    }

    .ui-projects-load-more > .ui-projects-load-more-indicator {
        opacity: 0.72;
        transform: translateY(var(--space-xs));
        transition:
            opacity 180ms ease,
            transform 180ms ease;
    }

    .ui-projects-load-more.is-pulling > .ui-projects-load-more-indicator,
    .ui-projects-load-more.is-loading > .ui-projects-load-more-indicator {
        opacity: 1;
        transform: translateY(0);
    }

    .ui-projects-load-more-spinner {
        width: 1.25rem;
        height: 1.25rem;
        border: var(--border-lg) solid
            color-mix(in oklab, var(--midtone) 28%, transparent);
        border-top-color: var(--brand-1);
        border-radius: var(--rounded-full);
        transform: rotate(0deg);
        transition: transform 180ms ease;
    }

    .ui-projects-load-more.is-pulling
        > .ui-projects-load-more-indicator
        .ui-projects-load-more-spinner {
        transform: rotate(45deg);
    }

    .ui-projects-load-more.is-loading
        > .ui-projects-load-more-indicator
        .ui-projects-load-more-spinner {
        animation: ui-projects-load-more-spin 800ms linear infinite;
    }

    @keyframes ui-projects-load-more-spin {
        to {
            transform: rotate(360deg);
        }
    }

    /* Project photo map keeps clamp sizing and Google Maps overrides in component CSS. */
    .ui-project-photo-map-panel {
        flex: 0 0 clamp(11rem, 30dvh, 15.5rem);
    }

    .ui-project-photo-map-panel--desktop {
        flex: 0 1 auto;
    }

    .ui-project-photo-map-view {
        height: min(50dvh, 24rem);
        transition:
            opacity 120ms ease,
            visibility 120ms ease,
            transform 160ms ease;
    }

    .ui-project-photo-map-view-full {
        top: 0;
        height: auto;
    }

    .ui-project-photo-map-view-preview {
        height: min(58dvh, 30rem);
        transform: translateY(0);
    }

    .ui-project-photo-map-view-hidden {
        visibility: hidden;
        opacity: 0;
        transform: translateY(var(--space-lg));
        pointer-events: none;
    }

    @media (max-width: 1100px) {
        .ui-project-photo-layout {
            grid-template-columns: minmax(0, 1fr);
        }

        .ui-project-photo-map-column {
            position: static;
            height: min(50dvh, 24rem);
            min-height: 20rem;
        }

        form.ui-project-photo-filters {
            position: static;
        }
    }

    .ui-project-photo-map-panel .gm-style-iw-d {
        overflow: hidden !important;
    }

    .ui-project-photo-map-panel .gm-style-iw-c {
        padding: 0 !important;
        overflow: hidden;
        pointer-events: none;
    }

    .ui-project-photo-map-panel .gm-style-iw-c:focus,
    .ui-project-photo-map-panel .gm-style-iw-c:focus-visible {
        outline: 0 !important;
    }

    .ui-project-photo-map-panel .gm-style-iw-tc {
        pointer-events: none;
    }

    .ui-project-photo-map-panel .gm-style-iw-tc::after {
        background: var(--white);
    }

    .ui-project-photo-map-panel .gm-style-iw-chr {
        position: absolute;
        top: var(--space-3xs);
        right: var(--space-3xs);
        z-index: 3;
        height: 0 !important;
        min-height: 0 !important;
        overflow: visible;
    }

    .ui-project-photo-map-panel .gm-style-iw-ch {
        display: none;
    }

    .ui-project-photo-map-panel .gm-ui-hover-effect {
        width: 1.75rem !important;
        height: 1.75rem !important;
        border-radius: var(--rounded-full);
        background: transparent !important;
        opacity: 1;
        pointer-events: auto;
    }

    .ui-project-photo-map-panel .gm-ui-hover-effect > span {
        margin: 0.375rem !important;
        background-color: var(--white) !important;
    }

    /* Photo map markers are generated by Stimulus and need component-level styling. */
    .ui-photo-map-marker {
        box-sizing: border-box;
        display: inline-flex;
        width: 2rem;
        height: 2rem;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--white);
        border-radius: var(--rounded-full);
        background: var(--brand-1);
        color: var(--black);
        font-family: var(--font-body);
        font-size: 0.8rem;
        font-weight: var(--font-bold);
        line-height: 1;
        box-shadow: var(--shadow-sm);
        cursor: pointer;
        user-select: none;
    }

    .ui-photo-map-marker.is-empty {
        width: 1rem;
        height: 1rem;
        background: var(--brand-1);
        color: transparent;
    }

    .ui-photo-map-marker.is-selected {
        box-shadow: 0 0 0 1px var(--white), var(--shadow-sm);
    }

    .ui-photo-map-marker:focus-visible {
        outline: 2px solid var(--brand-1);
        outline-offset: 2px;
    }

    .ui-photo-map-card {
        box-sizing: border-box;
        width: min(15rem, 72vw);
        height: min(26rem, 72dvh);
        position: relative;
        overflow: hidden;
        border-radius: var(--rounded-sm);
        background: var(--dark);
        color: var(--white);
        font-family: var(--font-body);
        box-shadow: var(--shadow);
        pointer-events: none;
    }

    .ui-photo-map-card-compact {
        width: min(7.5rem, 36vw);
        height: min(13rem, 36dvh);
    }

    .ui-photo-map-card-compact .ui-photo-map-card-body {
        padding: var(--space-xs) var(--space-sm);
    }

    .ui-photo-map-card-compact .ui-photo-map-card-link {
        margin-top: 0;
    }

    .ui-photo-map-card-image {
        box-sizing: border-box;
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        background: var(--dark);
    }

    .ui-photo-map-card-body {
        box-sizing: border-box;
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        padding: var(--space-xs) var(--space-sm) var(--space-sm);
        background: rgb(31 41 51 / 92%);
    }

    .ui-photo-map-card-detail {
        margin: var(--space-3xs) 0 0;
        color: rgb(255 255 255 / 88%);
        font-size: var(--text-sm);
        line-height: 1.25;
    }

    .ui-photo-map-card-label {
        color: rgb(255 255 255 / 72%);
        font-weight: var(--font-semibold);
    }

    .ui-photo-map-card-link {
        display: inline-flex;
        margin-top: var(--space-xs);
        align-items: center;
        color: var(--white);
        font-size: var(--text-sm);
        font-weight: var(--font-bold);
        text-decoration: underline;
        pointer-events: auto;
    }

    .ui-project-photo-detail-overlay {
        text-shadow: 0 1px 2px rgb(0 0 0 / 45%);
    }

    .ui-illustrated-empty-state {
        display: flex;
        flex: 1 1 auto;
        min-height: 16rem;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: var(--space-2xl) var(--space-xl);
        color: var(--darker);
        text-align: center;

        img {
            display: block;
            width: min(100%, 20rem);
            height: auto;
        }
    }

    .ui-pwa-raised-empty-state {
        /* Raise PWA empty states above fixed action areas. */
        padding-bottom: 225px;
    }

    .ui-illustrated-empty-state-copy {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-sm);
        max-width: 20rem;
        margin-top: var(--space-xl);

        p {
            margin: 0;
            color: var(--darker);
            font-size: var(--text-base);
            line-height: 1.25;
        }
    }

    .ui-project-chat-sidebar {
        flex: 0 0 min(18rem, 34vw);
    }

    .ui-project-chat-bubble {
        max-width: 75%;
    }

    .ui-setup-logged-scroll {
        overflow-y: auto;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* Setup logged page - shared by persisted Total Station, RTK, and Static
       setup confirmations. */
    .ui-setup-logged-banner {
        background: color-mix(in srgb, var(--success) 18%, var(--white));
    }

    .ui-setup-logged-banner.is-warning {
        background: var(--warning-light);
    }

    .ui-setup-logged-icon {
        width: 2.5rem;
        height: 2.5rem;
        border: 1.5px solid currentColor;
    }

    .ui-setup-logged-row {
        min-height: 2.6rem;
    }

    .ui-setup-logged--gps-static {
        background: var(--white);
    }

    .ui-setup-logged-banner--static {
        min-height: 7rem;
        justify-content: center;
    }

    .ui-setup-logged-banner--static .ui-setup-logged-icon {
        border: 0;
    }

    .ui-static-observation-shell {
        background: var(--white);
    }

    .ui-static-observation-card {
        display: block;
        overflow: hidden;
        border: 1px solid var(--light);
        border-radius: var(--rounded-lg);
        background: var(--white);
    }

    .ui-static-observation-card--link {
        color: inherit;
    }

    .ui-static-observation-point-block,
    .ui-static-observation-notes {
        padding: var(--space-sm);
    }

    .ui-static-observation-point-block {
        padding-bottom: var(--space-xs);
    }

    .ui-static-observation-label {
        display: block;
        color: var(--midtone);
        font-size: var(--text-sm);
        font-weight: 800;
        line-height: 1.1;
        text-transform: uppercase;
    }

    .ui-static-observation-metrics {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin: 0 var(--space-sm);
        border-top: 1px solid var(--light);
        border-bottom: 1px solid var(--light);
    }

    .ui-static-observation-metric {
        min-width: 0;
        padding: var(--space-sm) var(--space-xs);
        text-align: center;
    }

    .ui-static-observation-metric + .ui-static-observation-metric {
        border-left: 1px solid var(--light);
    }

    .ui-static-observation-metric strong,
    .ui-static-observation-row strong {
        display: block;
        min-width: 0;
        color: var(--darker);
        font-size: var(--text-base);
        font-weight: 800;
        line-height: 1.1;
    }

    .ui-static-observation-metric strong {
        margin-top: var(--space-2xs);
    }

    .ui-static-observation-photo {
        display: flex;
        justify-content: center;
        padding: var(--space-sm);
    }

    .ui-static-observation-photo img {
        display: block;
        width: auto;
        max-width: min(9rem, 46vw);
        max-height: 7.25rem;
        border-radius: var(--rounded-sm);
        object-fit: contain;
    }

    .ui-static-observation-notes {
        border-top: 1px solid var(--light);
    }

    .ui-static-observation-notes p {
        margin: var(--space-2xs) 0 0;
        color: var(--darker);
        font-size: var(--text-base);
        line-height: 1.25;
    }

    .ui-static-observation-card-title {
        margin: 0;
        padding: var(--space-sm) var(--space-sm) var(--space-xs);
        color: var(--darker);
        font-size: var(--text-lg);
        font-weight: 900;
        line-height: 1.1;
    }

    .ui-static-observation-row {
        display: flex;
        min-height: 2.8rem;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-sm);
        margin: 0 var(--space-sm);
        border-top: 1px solid var(--light);
        color: var(--midtone);
        font-size: var(--text-sm);
        font-weight: 800;
        line-height: 1.1;
        text-transform: uppercase;
    }

    .ui-static-observation-row strong {
        text-align: right;
        text-transform: none;
    }

    .ui-setup-photo-link {
        display: inline-flex;
        overflow: hidden;
        width: 3.25rem;
        height: 3.25rem;
        border: 1px solid var(--light);
        border-radius: var(--rounded-sm);
        background: var(--lighter);
    }

    .ui-setup-photo-thumb {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Floating Action Button
    ---------------------------------- */
    .ui-fab {
        position: fixed;
        right: var(--space-md);
        bottom: calc(var(--space-lg) + env(safe-area-inset-bottom));
        z-index: 80;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: var(--space-xs);
        pointer-events: none;
    }

    .ui-fab-actions {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: var(--space-sm);
        opacity: 0;
        transform: translateY(8px) scale(0.95);
        pointer-events: none;
        transition:
            opacity 180ms ease,
            transform 180ms ease;
    }

    [data-ui-fab-open-value="true"] .ui-fab-actions {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

    .ui-fab-action,
    .ui-fab-toggle {
        border: none;
        background: var(--brand-1);
        color: var(--brand-1-content);
        box-shadow: var(--shadow);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        outline: none;

        &:hover {
            filter: brightness(1.08);
        }
    }

    .ui-fab-action {
        display: inline-flex;
        align-items: center;
        gap: var(--space-xs);
        min-height: 3rem;
        padding: var(--space-sm) var(--space-md);
        border-radius: 1.15rem;
        font-weight: 600;
        font-size: var(--text-base);
        text-decoration: none;
        white-space: nowrap;
        pointer-events: none;
        transition: filter 150ms ease;

        &:active {
            transform: translateY(0.5px);
        }

        svg {
            flex: 0 0 auto;
        }
    }

    [data-ui-fab-open-value="true"] .ui-fab-action {
        pointer-events: auto;
    }

    .ui-fab-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 4rem;
        height: 4rem;
        border-radius: var(--rounded-lg);
        pointer-events: auto;
        transition:
            transform 250ms ease,
            filter 150ms ease;

        &:active {
            transform: scale(0.95);
        }

        .ui-fab-icon-open {
            transition: transform 250ms ease;
        }
    }

    [data-ui-fab-open-value="true"] .ui-fab-toggle .ui-fab-icon-open {
        transform: rotate(135deg);
    }

    @media (max-width: 780px) {
        .project-dialog {
            width: min(42rem, calc(100vw - 1rem));
        }

        .project-modal-shell {
            height: auto;
            max-height: calc(100dvh - 1rem);
        }

        .project-form-layout {
            grid-template-columns: 1fr;
        }

        .project-form-layout--modal {
            overflow: auto;
        }

        .project-form-layout--modal .project-form-panel {
            overflow: visible;
        }

        .project-form-map-panel {
            border-left: 0;
            border-top: 1px solid var(--light);
        }

        .project-map-frame {
            min-height: 18rem;
        }
    }

    /* ---- Org switcher trigger ---- */
    .org-sidebar-org-trigger {
        width: 100%;
        display: flex;
        align-items: center;
        gap: var(--space-2xs);
        border: 1px solid color-mix(in srgb, var(--white) 22%, transparent);
        border-radius: var(--rounded);
        padding: 0.45rem 0.55rem;
        background: color-mix(in srgb, var(--white) 5%, transparent);
        color: var(--white);
        text-align: left;
        cursor: pointer;
        transition:
            background-color 180ms ease,
            border-color 180ms ease;

        &:hover {
            background: color-mix(in srgb, var(--white) 12%, transparent);
            border-color: color-mix(in srgb, var(--white) 35%, transparent);
        }
    }

    /* ---- User menu (bottom-left flyout) ---- */
    .org-sidebar-user-menu {
        width: 100%;
        display: block;
        z-index: 160;
    }

    .org-sidebar-user-trigger {
        width: 100%;
        display: flex;
        align-items: center;
        gap: var(--space-2xs);
        border: 0;
        border-radius: var(--rounded);
        padding: 0.45rem 0.4rem;
        background: transparent;
        color: var(--white);
        text-align: left;
        cursor: pointer;
        transition: background-color 180ms ease;

        &:hover {
            background: color-mix(in srgb, var(--white) 12%, transparent);
        }
    }

    .org-sidebar-user-menu menu {
        top: auto;
        bottom: 0;
        left: calc(100% + var(--space-2xs));
        right: auto;
        z-index: 170;
        min-width: 13rem;
        margin-top: 0;
        transform: translateX(-8px);
    }

    .org-sidebar-user-menu.is-open menu {
        transform: translateX(0);
    }

    /* Toggle Button */
    .ui-toggle {
        --toggle-width: 3.5rem;
        --toggle-height: 2rem;
        --toggle-text-size: 1.25rem;
        --toggle-padding: 0.25rem;
        --toggle-off-bg: #c8c8c8;
        --toggle-on-bg: var(--brand-1);
        --toggle-thumb-bg: var(--white);
        --toggle-text-color: #b3b3b3;
        --toggle-text-size: 1rem;

        display: inline-flex;
        align-items: center;
        gap: 1rem;
        cursor: pointer;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }

    .ui-toggle-input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .ui-toggle-switch {
        position: relative;
        flex: 0 0 auto;
        width: var(--toggle-width);
        height: var(--toggle-height);
        border-radius: 9999px;
        background: var(--toggle-off-bg);
        transition: background 180ms ease;
    }

    .ui-toggle-switch::after {
        content: "";
        position: absolute;
        top: var(--toggle-padding);
        left: var(--toggle-padding);
        width: calc(var(--toggle-height) - (var(--toggle-padding) * 2));
        height: calc(var(--toggle-height) - (var(--toggle-padding) * 2));
        border-radius: 9999px;
        background: var(--toggle-thumb-bg);
        box-shadow: var(--shadow-sm);
        transition: transform 180ms ease;
    }

    .ui-toggle-text {
        color: var(--toggle-text-color);
        font-size: var(--toggle-text-size);
        font-weight: 700;
        line-height: 1.2;
    }

    .ui-toggle-input:checked + .ui-toggle-switch {
        background: var(--toggle-on-bg);
    }

    .ui-toggle-input:checked + .ui-toggle-switch::after {
        transform: translateX(calc(var(--toggle-width) - var(--toggle-height)));
    }

    .ui-toggle-input:focus-visible + .ui-toggle-switch {
        outline: 2px solid var(--brand-1);
        outline-offset: 2px;
    }

    /* Scoped override of the shared ui-toggle used by antenna measurement
       switches. Shrinks the switch so it fits in the right rail and swaps the
       on-state color to the info blue used for Vertical. */
    .ui-antenna-toggle .ui-toggle {
        --toggle-width: 2rem;
        --toggle-height: 1.125rem;
        --toggle-padding: 0.125rem;
        --toggle-on-bg: var(--info);
        gap: 0;
    }
}

/* Debug highlight — rendered only when config.x.show_debug_highlights is on.
   Wraps a region in a bright dashed outline with a floating label so
   not-yet-designed / not-yet-wired UI is obvious during dev walkthroughs. */
@layer components {
    .ui-debug-note {
        position: relative;
        outline: 2px dashed oklch(70% 0.2 330);
        outline-offset: 2px;
        border-radius: 4px;
    }

    .ui-debug-note::before {
        content: "? " attr(data-label);
        position: absolute;
        top: -0.75rem;
        left: 0.25rem;
        padding: 0 0.375rem;
        font-size: 0.625rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: white;
        background: oklch(60% 0.22 330);
        border-radius: 4px;
        z-index: 1;
        pointer-events: none;
        max-width: 90%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Choice group (see shared/_choice_group.html.erb + choice_group_controller.js)
   Compact, square-corner button group used for COMPENSATOR CHECK, ROD TYPE,
   and ROD CONDITION on the static setup screens. Designed to reuse the same
   visual language as the instrument-type cards on the equipment page. */
@layer components {
    .ui-choice-group {
        background: var(--white);
        border-top: 1px solid var(--light);
        border-bottom: 1px solid var(--light);
        padding: var(--space-md);
    }

    .ui-choice-group-title {
        font-size: var(--text-sm);
        font-weight: 700;
        text-transform: uppercase;
        text-align: center;
        color: var(--dark);
        margin-bottom: var(--space-sm);
    }

    .ui-choice-group-options {
        display: flex;
        justify-content: center;
        gap: var(--space-sm);
        flex-wrap: wrap;
    }

    .ui-choice-group-option {
        flex: 1 1 0;
        min-width: 5rem;
        padding: var(--space-md) var(--space-sm);
        background: var(--white);
        border: 1px solid var(--light);
        border-radius: var(--rounded);
        font-weight: 700;
        color: var(--dark);
        cursor: pointer;
        transition:
            background 150ms ease,
            border-color 150ms ease;
    }

    .ui-choice-group-option:hover {
        border-color: var(--midtone);
    }

    .ui-choice-group-option.is-selected {
        background: var(--brand-1-light);
        border-color: var(--brand-1);
    }

    .ui-choice-group-option-label {
        display: block;
        text-align: center;
        font-size: var(--text-sm);
    }
}