:root {
    color-scheme: light;

    --loom-primary: #5b4636;
    --loom-primary-hover: #4a3729;
    --loom-primary-active: #3b2a20;
    --loom-accent: #b87333;
    --loom-accent-hover: #9f6028;
    --loom-accent-soft: #f3dfcc;
    --loom-secondary: #7a8b5c;
    --loom-secondary-soft: #e7ecd9;
    --loom-success: #2e7d32;
    --loom-success-soft: #e1f0dd;
    --loom-warning: #d49a2e;
    --loom-warning-soft: #f7e8c8;
    --loom-info: #4a6d8c;
    --loom-info-soft: #dce8f1;
    --loom-error: #c0392b;
    --loom-error-soft: #f7ddd8;

    --loom-background: #faf7f2;
    --loom-background-warm: #f5efe5;
    --loom-surface: #ffffff;
    --loom-surface-alt: #f2efe8;
    --loom-border: #e2ded6;
    --loom-border-strong: #d1ccc2;

    --loom-text-primary: #2b211a;
    --loom-text-secondary: #6f685f;
    --loom-text-muted: #91877c;
    --loom-disabled: #d9d4ca;

    --loom-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
    --loom-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --loom-font-numeric: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --loom-weight-regular: 400;
    --loom-weight-muted: 500;
    --loom-weight-row: 600;
    --loom-weight-strong: 700;
    --loom-weight-display: 700;

    --loom-space-1: 0.25rem;
    --loom-space-2: 0.5rem;
    --loom-space-3: 0.75rem;
    --loom-space-4: 1rem;
    --loom-space-5: 1.25rem;
    --loom-space-6: 1.5rem;
    --loom-space-8: 2rem;
    --loom-space-10: 2.5rem;
    --loom-space-12: 3rem;
    --loom-space-16: 4rem;

    --loom-width-app: 76rem;
    --loom-width-app-wide: 84rem;
    --loom-width-form: 92rem;
    --loom-width-workspace: 96rem;
    --loom-width-workspace-wide: 100rem;
    --loom-width-header: 96rem;

    --loom-radius-sm: 0.25rem;
    --loom-radius-md: 0.5rem;
    --loom-radius-lg: 0.75rem;
    --loom-radius-xl: 1rem;
    --loom-radius-pill: 999px;
    --loom-radius-circle: 50%;

    --loom-shadow-xs: 0 1px 2px rgba(43, 33, 26, 0.05);
    --loom-shadow-sm: 0 4px 12px rgba(43, 33, 26, 0.07);
    --loom-shadow-md: 0 12px 24px rgba(43, 33, 26, 0.08);
    --loom-shadow-lg: 0 18px 42px rgba(43, 33, 26, 0.10);

    --loom-focus-ring: 0 0 0 3px rgba(184, 115, 51, 0.22);
    --loom-transition-fast: 120ms ease;
    --loom-transition-base: 180ms ease;
    --loom-transition-slow: 260ms ease;
}

@keyframes loom-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes loom-loading-stripe {
    to {
        background-position: -180% 0;
    }
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    background:
        radial-gradient(circle at 14% 0%, rgba(184, 115, 51, 0.10), transparent 30rem),
        linear-gradient(180deg, var(--loom-background) 0%, var(--loom-background-warm) 100%);
    color: var(--loom-text-primary);
    font-family: var(--loom-font-body);
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
    min-height: 100%;
    overflow-x: hidden;
}

.loom-page-loader {
    background: linear-gradient(90deg, var(--loom-accent), var(--loom-secondary), var(--loom-accent));
    background-size: 180% 100%;
    box-shadow: 0 0 12px rgba(184, 115, 51, 0.28);
    height: 3px;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    right: 0;
    top: 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition:
        opacity var(--loom-transition-fast),
        transform 420ms ease;
    z-index: 200;
}

html.loom-is-loading .loom-page-loader {
    animation: loom-loading-stripe 920ms linear infinite;
    opacity: 1;
    transform: scaleX(0.72);
}

.loom-app-shell {
    min-height: 100vh;
}

.loom-app-container {
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--loom-space-4);
    padding-right: var(--loom-space-4);
    width: min(100%, var(--loom-width-app));
}

.loom-app-main {
    padding-bottom: var(--loom-space-4);
    padding-top: 5.9rem;
}

.loom-app-container.loom-workflow-main,
.loom-app-container.loom-form-main {
    width: min(100%, var(--loom-width-form));
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: var(--loom-focus-ring);
}

.loom-app-header {
    left: 50%;
    position: fixed;
    top: var(--loom-space-4);
    transform: translateX(-50%);
    width: min(calc(100% - 3rem), var(--loom-width-header));
    z-index: 40;
}

.loom-app-header-inner {
    -webkit-backdrop-filter: blur(20px) saturate(116%);
    align-items: center;
    backdrop-filter: blur(20px) saturate(116%);
    background:
        radial-gradient(circle at 8% 50%, rgba(184, 115, 51, 0.14), transparent 24%),
        radial-gradient(circle at 94% 50%, rgba(91, 70, 54, 0.08), transparent 26%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 250, 243, 0.74)),
        rgba(250, 247, 242, 0.78);
    border: 1px solid rgba(209, 204, 194, 0.72);
    border-radius: var(--loom-radius-xl);
    box-shadow:
        0 18px 44px rgba(43, 33, 26, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.70),
        inset 0 -1px 0 rgba(91, 70, 54, 0.06);
    display: flex;
    gap: var(--loom-space-4);
    justify-content: space-between;
    min-height: 4.1rem;
    padding: 0.72rem 0.9rem 0.72rem 1.2rem;
}

.loom-header-brand {
    align-items: flex-start;
    display: inline-grid;
    gap: 0.16rem;
    justify-items: center;
    line-height: 1;
    min-width: 0;
    text-decoration: none;
}

.loom-header-logo {
    display: block;
    height: auto;
    max-height: 2.15rem;
    max-width: min(10rem, 42vw);
    object-fit: contain;
    width: auto;
}

.loom-header-codex-line {
    color: rgba(91, 70, 54, 0.64);
    display: block;
    font-family: var(--loom-font-sans);
    font-size: 0.54rem;
    font-weight: var(--loom-weight-strong);
    letter-spacing: 0.18em;
    line-height: 1;
    white-space: nowrap;
}

.loom-header-codex-line span {
    color: var(--loom-accent);
}

.loom-header-account {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: var(--loom-space-3);
    justify-content: flex-end;
    min-width: 0;
    position: relative;
}

.loom-branch-menu {
    position: relative;
}

.loom-branch-trigger,
.loom-branch-static {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--loom-radius-lg);
    display: inline-flex;
    gap: 0.62rem;
    min-height: 2.65rem;
    max-width: min(20rem, 44vw);
    padding: 0.28rem 0.42rem 0.28rem 0.3rem;
}

.loom-branch-trigger {
    cursor: pointer;
    list-style: none;
    transition:
        background-color var(--loom-transition-base),
        border-color var(--loom-transition-base),
        box-shadow var(--loom-transition-base);
}

.loom-branch-trigger::-webkit-details-marker {
    display: none;
}

.loom-branch-trigger:hover,
.loom-branch-menu[open] .loom-branch-trigger {
    background: rgba(255, 250, 243, 0.48);
    border-color: rgba(184, 115, 51, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.loom-location-mark {
    align-items: center;
    background:
        linear-gradient(180deg, rgba(255, 250, 243, 0.78), rgba(243, 223, 204, 0.58));
    border: 1px solid rgba(184, 115, 51, 0.18);
    border-radius: var(--loom-radius-circle);
    color: var(--loom-accent);
    display: inline-flex;
    flex: 0 0 auto;
    height: 2.08rem;
    justify-content: center;
    width: 2.08rem;
}

.loom-location-mark svg {
    height: 1.02rem;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 1.02rem;
}

.loom-branch-copy {
    display: grid;
    line-height: 1.08;
    min-width: 0;
}

.loom-branch-shop-name,
.loom-branch-location {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.loom-branch-shop-name {
    color: var(--loom-text-primary);
    font-size: 0.88rem;
    font-weight: var(--loom-weight-strong);
}

.loom-branch-location {
    color: var(--loom-accent);
    font-size: 0.64rem;
    font-weight: var(--loom-weight-strong);
    letter-spacing: 0.13em;
    margin-top: 0.16rem;
    text-transform: uppercase;
}

.loom-header-divider {
    background: linear-gradient(180deg, transparent, rgba(91, 70, 54, 0.18), transparent);
    display: inline-block;
    flex: 0 0 auto;
    height: 2.2rem;
    width: 1px;
}

.loom-branch-menu[open] .loom-user-chevron {
    transform: rotate(180deg);
}

.loom-branch-menu-panel {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 250, 243, 0.96)),
        var(--loom-surface);
    border: 1px solid rgba(209, 204, 194, 0.86);
    border-radius: var(--loom-radius-lg);
    box-shadow:
        0 16px 34px rgba(43, 33, 26, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);
    min-width: 14rem;
    padding: 0.42rem;
    position: absolute;
    right: 0;
    top: calc(100% + 0.7rem);
    z-index: 50;
}

.loom-branch-option-form {
    margin: 0;
}

.loom-branch-option {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--loom-radius-md);
    color: var(--loom-text-primary);
    cursor: pointer;
    display: grid;
    gap: 0.12rem;
    line-height: 1.15;
    padding: 0.72rem 0.82rem 0.72rem 2rem;
    position: relative;
    text-align: left;
    transition:
        background-color var(--loom-transition-base),
        border-color var(--loom-transition-base),
        color var(--loom-transition-base);
    width: 100%;
}

.loom-branch-option:hover,
.loom-branch-option.is-active {
    background: rgba(250, 247, 242, 0.88);
    border-color: rgba(184, 115, 51, 0.14);
}

.loom-branch-option::before {
    background: rgba(145, 135, 124, 0.28);
    border-radius: var(--loom-radius-circle);
    content: "";
    height: 0.42rem;
    left: 0.82rem;
    position: absolute;
    top: 1rem;
    width: 0.42rem;
}

.loom-branch-option.is-active::before {
    background: var(--loom-accent);
    box-shadow: 0 0 0 0.25rem rgba(184, 115, 51, 0.10);
}

.loom-branch-option span {
    font-size: 0.9rem;
    font-weight: var(--loom-weight-row);
}

.loom-branch-option small {
    color: var(--loom-text-secondary);
    font-size: 0.66rem;
    font-weight: var(--loom-weight-strong);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.loom-header-user {
    color: var(--loom-text-primary);
    font-size: 0.92rem;
    font-weight: var(--loom-weight-row);
    line-height: 1;
    max-width: min(12rem, 38vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.loom-user-menu {
    position: relative;
}

.loom-user-menu-trigger {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--loom-radius-pill);
    cursor: pointer;
    display: inline-flex;
    gap: var(--loom-space-2);
    list-style: none;
    min-height: 2.65rem;
    padding: 0.22rem 0.52rem 0.22rem 0.24rem;
    transition:
        background-color var(--loom-transition-base),
        border-color var(--loom-transition-base),
        box-shadow var(--loom-transition-base);
}

.loom-user-menu-trigger::-webkit-details-marker {
    display: none;
}

.loom-user-menu-trigger:hover,
.loom-user-menu[open] .loom-user-menu-trigger {
    background: rgba(184, 115, 51, 0.08);
    border-color: rgba(184, 115, 51, 0.18);
}

.loom-user-avatar {
    align-items: center;
    background:
        linear-gradient(180deg, rgba(184, 115, 51, 0.96), rgba(91, 70, 54, 0.98));
    border: 1px solid rgba(255, 250, 243, 0.50);
    border-radius: var(--loom-radius-circle);
    box-shadow:
        0 8px 16px rgba(91, 70, 54, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    color: #fffaf3;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.92rem;
    font-weight: var(--loom-weight-strong);
    height: 2.1rem;
    justify-content: center;
    line-height: 1;
    width: 2.1rem;
}

.loom-user-chevron {
    color: var(--loom-primary);
    flex: 0 0 auto;
    height: 1rem;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.4;
    transition: transform var(--loom-transition-base);
    width: 1rem;
}

.loom-user-menu[open] .loom-user-chevron {
    transform: rotate(180deg);
}

.loom-user-menu-panel {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 250, 243, 0.94)),
        var(--loom-surface);
    border: 1px solid rgba(209, 204, 194, 0.86);
    border-radius: var(--loom-radius-lg);
    box-shadow: var(--loom-shadow-md);
    min-width: 10rem;
    padding: var(--loom-space-2);
    position: absolute;
    right: 0;
    top: calc(100% + 0.55rem);
    z-index: 50;
}

.loom-header-logout-form {
    margin: 0;
}

.loom-header-logout {
    background: rgba(250, 247, 242, 0.72);
    border: 0;
    border-radius: var(--loom-radius-md);
    color: var(--loom-primary);
    cursor: pointer;
    display: block;
    font-size: 0.9rem;
    font-weight: var(--loom-weight-row);
    line-height: 1.2;
    padding: 0.72rem 0.8rem;
    text-align: left;
    transition:
        background-color var(--loom-transition-base),
        color var(--loom-transition-base);
    width: 100%;
}

.loom-header-logout:hover {
    background: rgba(184, 115, 51, 0.10);
    color: var(--loom-primary);
}

.loom-brand-mark {
    align-items: center;
    background:
        linear-gradient(135deg, rgba(91, 70, 54, 0.98), rgba(184, 115, 51, 0.92));
    border: 1px solid rgba(91, 70, 54, 0.20);
    border-radius: var(--loom-radius-lg);
    color: #fffaf3;
    display: inline-flex;
    font-family: var(--loom-font-display);
    font-size: 1.35rem;
    font-weight: 700;
    height: 2.5rem;
    justify-content: center;
    line-height: 1;
    width: 2.5rem;
}

.loom-brand-mark-large {
    font-size: 2rem;
    height: 4rem;
    width: 4rem;
}

.loom-brand-name {
    color: var(--loom-text-primary);
    display: block;
    font-family: var(--loom-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}

.loom-brand-subtitle {
    color: var(--loom-accent);
    display: block;
    font-size: 0.68rem;
    font-weight: var(--loom-weight-strong);
    letter-spacing: 0.22em;
    line-height: 1.2;
    margin-top: 0.2rem;
    text-transform: uppercase;
}

.loom-page-title,
.loom-heading {
    color: var(--loom-text-primary);
    font-family: var(--loom-font-display);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.18;
}

.loom-page-title {
    font-size: clamp(2rem, 3vw, 2.5rem);
}

.loom-heading {
    font-size: clamp(1.45rem, 2.2vw, 1.9rem);
}

.loom-subheading {
    color: var(--loom-text-primary);
    font-size: 1.12rem;
    font-weight: var(--loom-weight-strong);
    letter-spacing: 0;
    line-height: 1.3;
}

.loom-section-action {
    align-items: center;
    color: var(--loom-accent);
    display: inline-flex;
    font-size: 0.74rem;
    font-weight: var(--loom-weight-strong);
    gap: 0.32rem;
    letter-spacing: 0.12em;
    line-height: 1;
    min-height: 2rem;
    padding: 0.3rem 0;
    text-decoration: none;
    text-transform: uppercase;
    transition:
        color var(--loom-transition-base),
        transform var(--loom-transition-fast);
    white-space: nowrap;
}

.loom-section-action:hover {
    color: var(--loom-primary);
    transform: translateX(2px);
}

.loom-section-action svg {
    height: 0.9rem;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.1;
    width: 0.9rem;
}

.loom-copy {
    color: var(--loom-text-secondary);
    font-size: 0.95rem;
    font-weight: 500;
}

.loom-muted {
    color: var(--loom-text-muted);
}

.loom-strong {
    color: var(--loom-text-primary);
}

.loom-primary-text {
    color: var(--loom-primary);
}

.loom-dashboard-main {
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--loom-space-4);
    padding-right: var(--loom-space-4);
    width: min(100%, var(--loom-width-workspace));
}

.loom-dashboard-main.loom-app-main {
    padding-top: 5.25rem;
}

.loom-dashboard {
    --dashboard-side-width: clamp(8rem, 12vw, 12rem);
    isolation: isolate;
    position: relative;
}

.loom-dashboard-backdrop {
    display: none;
}

.loom-dashboard-stage,
.loom-dashboard-content,
.loom-dashboard-left,
.loom-dashboard-hero,
.loom-dashboard-rail {
    display: grid;
    gap: var(--loom-space-4);
    min-width: 0;
}

.loom-dashboard-stage {
    background: none;
    border: 0;
    box-shadow: none;
    overflow: visible;
    position: relative;
}

.loom-dashboard-content,
.loom-dashboard-rail {
    align-content: start;
    align-items: start;
}

.loom-dashboard-rail {
    align-self: start;
}

.loom-dashboard-context-stacked {
    display: none;
}

.loom-dashboard-context-rail {
    display: grid;
    min-width: 0;
}

.loom-dashboard-recent {
    min-width: 0;
}

.loom-dashboard-visual {
    display: none;
}

.loom-dashboard .paper-card {
    -webkit-backdrop-filter: blur(10px) saturate(108%);
    backdrop-filter: blur(10px) saturate(108%);
    background: rgba(255, 255, 255, 0.88);
}

.loom-location-panel {
    overflow: visible;
    padding: var(--loom-space-4);
    width: 100%;
}

.loom-location-panel-switch {
    position: relative;
}

.loom-location-panel-summary {
    align-items: center;
    display: flex;
    gap: var(--loom-space-3);
    justify-content: space-between;
    list-style: none;
    min-width: 0;
    width: 100%;
}

.loom-location-panel-switch .loom-location-panel-summary {
    cursor: pointer;
}

.loom-location-panel-summary::-webkit-details-marker {
    display: none;
}

.loom-location-panel-main {
    align-items: center;
    display: flex;
    gap: 0.85rem;
    min-width: 0;
}

.loom-location-panel-icon {
    align-items: center;
    background:
        linear-gradient(180deg, rgba(184, 115, 51, 0.96), rgba(91, 70, 54, 0.98));
    border: 1px solid rgba(255, 250, 243, 0.55);
    border-radius: var(--loom-radius-lg);
    box-shadow:
        0 10px 18px rgba(91, 70, 54, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    color: #fffaf3;
    display: inline-flex;
    flex: 0 0 auto;
    height: 2.85rem;
    justify-content: center;
    width: 2.85rem;
}

.loom-location-panel-icon.is-logo {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    overflow: hidden;
    padding: 0.15rem;
}

.loom-location-panel-icon svg {
    height: 1.22rem;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 1.22rem;
}

.loom-location-panel-logo {
    display: block;
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.loom-location-panel-copy {
    display: grid;
    min-width: 0;
}

.loom-location-panel-shop,
.loom-location-panel-branch {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.loom-location-panel-shop {
    color: var(--loom-text-primary);
    font-family: var(--loom-font-display);
    font-size: 1.1rem;
    font-weight: var(--loom-weight-strong);
    line-height: 1.18;
}

.loom-location-panel-branch {
    color: var(--loom-text-secondary);
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.2;
    margin-top: 0.18rem;
}

.loom-location-change-pill {
    align-items: center;
    background:
        linear-gradient(180deg, rgba(255, 250, 243, 0.86), rgba(243, 223, 204, 0.54));
    border: 1px solid rgba(184, 115, 51, 0.16);
    border-radius: var(--loom-radius-pill);
    color: var(--loom-primary);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.76rem;
    font-weight: var(--loom-weight-strong);
    gap: 0.34rem;
    min-height: 2.1rem;
    padding: 0.45rem 0.7rem;
}

.loom-location-change-pill svg {
    height: 0.92rem;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.4;
    transition: transform var(--loom-transition-base);
    width: 0.92rem;
}

.loom-location-panel[open] .loom-location-change-pill svg {
    transform: rotate(180deg);
}

.loom-location-options {
    border-top: 1px solid rgba(209, 204, 194, 0.64);
    display: grid;
    gap: var(--loom-space-2);
    margin-top: var(--loom-space-4);
    padding-top: var(--loom-space-3);
}

.loom-location-option-form {
    margin: 0;
}

.loom-location-option {
    align-items: center;
    background: rgba(255, 250, 243, 0.46);
    border: 1px solid transparent;
    border-radius: var(--loom-radius-md);
    color: var(--loom-text-primary);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: var(--loom-space-3);
    min-height: 2.75rem;
    padding: 0.62rem 0.78rem;
    text-align: left;
    transition:
        background-color var(--loom-transition-base),
        border-color var(--loom-transition-base),
        box-shadow var(--loom-transition-base);
    width: 100%;
}

.loom-location-option:hover,
.loom-location-option.is-active {
    background: rgba(250, 247, 242, 0.92);
    border-color: rgba(184, 115, 51, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.loom-location-option span {
    font-size: 0.9rem;
    font-weight: var(--loom-weight-row);
}

.loom-location-option small {
    color: var(--loom-text-secondary);
    font-size: 0.68rem;
    font-weight: var(--loom-weight-strong);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.loom-dashboard-greeting {
    position: relative;
}

.loom-dashboard-greeting .loom-page-title {
    font-size: clamp(1.62rem, 2.3vw, 2.05rem);
    line-height: 1.12;
}

.loom-dashboard .loom-copy,
.loom-dashboard .loom-action-card small,
.loom-dashboard .loom-status-card small,
.loom-dashboard .loom-due-main small,
.loom-dashboard .loom-summary-tile span,
.loom-dashboard .loom-dashboard-mini-label,
.loom-dashboard .loom-overview-card-header span {
    font-weight: 500;
}

.loom-rail-card {
    display: grid;
    gap: 0;
}

.loom-rail-section {
    min-width: 0;
}

.loom-rail-section + .loom-rail-section {
    border-top: 1px solid rgba(226, 222, 214, 0.82);
    margin-top: var(--loom-space-5);
    padding-top: var(--loom-space-5);
}

.loom-overview-card {
    overflow: hidden;
    position: relative;
}

.loom-overview-card::before {
    content: none;
}

.loom-overview-card > * {
    position: relative;
    z-index: 1;
}

.loom-overview-card-header {
    align-items: end;
    display: flex;
    gap: var(--loom-space-3);
    justify-content: space-between;
}

.loom-overview-card-header span {
    color: var(--loom-text-secondary);
    font-size: 0.82rem;
    line-height: 1.2;
}

.loom-overview-tone-overdue {
    --overview-soft: var(--loom-error-soft);
    --overview-tint: rgba(192, 57, 43, 0.22);
    --overview-tone: var(--loom-error);
}

.loom-overview-tone-due {
    --overview-soft: var(--loom-warning-soft);
    --overview-tint: rgba(212, 154, 46, 0.26);
    --overview-tone: var(--loom-warning);
}

.loom-overview-tone-ready {
    --overview-soft: var(--loom-success-soft);
    --overview-tint: rgba(46, 125, 50, 0.22);
    --overview-tone: var(--loom-success);
}

.loom-overview-tone-stitching {
    --overview-soft: var(--loom-accent-soft);
    --overview-tint: rgba(184, 115, 51, 0.26);
    --overview-tone: var(--loom-accent);
}

.loom-overview-matrix {
    background: transparent;
    border: 0;
    border-radius: var(--loom-radius-lg);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: var(--loom-space-3);
    overflow: hidden;
}

.loom-overview-tile {
    align-items: center;
    display: grid;
    gap: 1rem;
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 6.4rem;
    padding: 1.12rem 1rem;
}

.loom-overview-tile:nth-child(odd) {
    border-right: 1px solid rgba(226, 222, 214, 0.88);
}

.loom-overview-tile:nth-child(n + 3) {
    border-top: 1px solid rgba(226, 222, 214, 0.88);
}

.loom-overview-tile-icon {
    align-items: center;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0)),
        var(--overview-soft);
    border: 1px solid var(--overview-tint);
    border-radius: 1.1rem;
    color: var(--overview-tone);
    display: inline-flex;
    height: 3.35rem;
    justify-content: center;
    width: 3.35rem;
}

.loom-overview-tile-icon svg {
    height: 1.38rem;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
    width: 1.38rem;
}

.loom-overview-tile-copy {
    display: grid;
    min-width: 0;
}

.loom-overview-tile strong {
    color: var(--loom-text-primary);
    font-family: var(--loom-font-numeric);
    font-size: 1.95rem;
    font-variant-numeric: tabular-nums;
    font-weight: var(--loom-weight-strong);
    letter-spacing: 0;
    line-height: 1;
}

.loom-overview-tile-label {
    color: var(--loom-text-primary);
    font-size: 0.9rem;
    font-weight: var(--loom-weight-row);
    line-height: 1.18;
    margin-top: 0.35rem;
}

.loom-dashboard-actions {
    display: grid;
    gap: var(--loom-space-3);
}

.loom-action-card {
    align-items: center;
    color: var(--loom-text-primary);
    display: flex;
    gap: var(--loom-space-4);
    min-height: 8.35rem;
    overflow: hidden;
    padding-bottom: 1.18rem;
    padding-right: 4.25rem;
    position: relative;
    text-decoration: none;
    transition:
        background-color var(--loom-transition-base),
        border-color var(--loom-transition-base),
        box-shadow var(--loom-transition-base),
        transform var(--loom-transition-fast);
}

.loom-action-card:hover {
    background: rgba(255, 250, 243, 0.94);
    border-color: rgba(184, 115, 51, 0.38);
    box-shadow: var(--loom-shadow-md);
    transform: translateY(-1px);
}

.loom-action-card strong,
.loom-action-card small {
    display: block;
}

.loom-action-card strong {
    font-size: 1.08rem;
    font-weight: var(--loom-weight-strong);
    line-height: 1.18;
}

.loom-action-card small {
    color: var(--loom-text-secondary);
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.35;
    margin-top: 0.34rem;
}

.paper-card.loom-action-card-primary {
    background:
        radial-gradient(circle at 12% 14%, rgba(255, 250, 243, 0.22), transparent 34%),
        linear-gradient(135deg, rgba(184, 115, 51, 0.98), rgba(91, 70, 54, 0.97));
    border-color: rgba(91, 70, 54, 0.20);
    box-shadow:
        0 16px 30px rgba(91, 70, 54, 0.16),
        inset 0 1px 0 rgba(255, 250, 243, 0.24);
    color: #fffaf3;
}

.paper-card.loom-measurement-cta {
    isolation: isolate;
}

.paper-card.loom-measurement-cta::before {
    border: 1px dashed rgba(255, 250, 243, 0.34);
    border-radius: calc(var(--loom-radius-xl) - 0.35rem);
    content: "";
    inset: 0.4rem;
    pointer-events: none;
    position: absolute;
    z-index: 0;
}

.loom-measurement-cta > span:not(.loom-action-arrow) {
    position: relative;
    z-index: 1;
}

.paper-card.loom-action-card-primary:hover {
    background:
        radial-gradient(circle at 12% 14%, rgba(255, 250, 243, 0.25), transparent 34%),
        linear-gradient(135deg, rgba(191, 122, 56, 0.98), rgba(91, 70, 54, 0.98));
    border-color: rgba(91, 70, 54, 0.24);
}

.paper-card.loom-action-card-primary small {
    color: rgba(255, 250, 243, 0.82);
}

.loom-action-icon {
    align-items: center;
    background: rgba(184, 115, 51, 0.12);
    border: 1px solid rgba(184, 115, 51, 0.16);
    border-radius: var(--loom-radius-lg);
    color: var(--loom-accent);
    display: inline-flex;
    flex: 0 0 auto;
    height: 3.85rem;
    justify-content: center;
    width: 3.85rem;
}

.paper-card.loom-action-card-primary .loom-action-icon {
    background: rgba(255, 250, 243, 0.18);
    border-color: rgba(255, 250, 243, 0.22);
    color: #fffaf3;
}

.paper-card.loom-measurement-cta .loom-action-icon {
    -webkit-backdrop-filter: blur(8px) saturate(112%);
    backdrop-filter: blur(8px) saturate(112%);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent),
        rgba(255, 250, 243, 0.20);
    border-color: rgba(255, 250, 243, 0.34);
    box-shadow:
        0 0.65rem 1.25rem rgba(43, 33, 26, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
    color: #fffaf3;
}

.loom-action-icon svg {
    height: 1.66rem;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
    width: 1.66rem;
}

.loom-action-arrow {
    align-items: center;
    background: rgba(184, 115, 51, 0.10);
    border: 1px solid rgba(184, 115, 51, 0.16);
    border-radius: var(--loom-radius-circle);
    bottom: 0.95rem;
    color: var(--loom-accent);
    display: inline-flex;
    height: 2.08rem;
    justify-content: center;
    position: absolute;
    right: 0.95rem;
    transition:
        background-color var(--loom-transition-base),
        border-color var(--loom-transition-base),
        color var(--loom-transition-base),
        transform var(--loom-transition-fast);
    width: 2.08rem;
}

.loom-action-arrow svg {
    height: 1.02rem;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.15;
    width: 1.02rem;
}

.paper-card.loom-action-card-primary .loom-action-arrow {
    background: rgba(255, 250, 243, 0.16);
    border-color: rgba(255, 250, 243, 0.20);
    color: #fffaf3;
}

.loom-action-card:hover .loom-action-arrow {
    background: rgba(184, 115, 51, 0.16);
    border-color: rgba(184, 115, 51, 0.24);
    transform: translateX(2px);
}

.paper-card.loom-action-card-primary:hover .loom-action-arrow {
    background: rgba(255, 250, 243, 0.22);
    border-color: rgba(255, 250, 243, 0.30);
}

.loom-status-grid {
    display: grid;
    gap: var(--loom-space-3);
}

.loom-status-card {
    background: rgba(250, 247, 242, 0.68);
    border: 1px solid var(--loom-border);
    border-radius: var(--loom-radius-lg);
    display: grid;
    gap: 0.4rem;
    min-height: 8rem;
    padding: var(--loom-space-4);
}

.loom-status-card strong {
    color: var(--loom-text-primary);
    font-family: var(--loom-font-numeric);
    font-size: 2rem;
    font-variant-numeric: tabular-nums;
    font-weight: var(--loom-weight-strong);
    line-height: 1;
}

.loom-status-card small {
    color: var(--loom-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
}

.loom-due-list {
    display: grid;
}

.loom-due-card {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--loom-radius-md);
    color: var(--loom-text-primary);
    display: grid;
    gap: var(--loom-space-3);
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 4.55rem;
    padding: 0.76rem 0.18rem;
    text-decoration: none;
    transition:
        background-color var(--loom-transition-base),
        transform var(--loom-transition-fast);
}

.loom-due-card + .loom-due-card {
    border-top: 1px solid rgba(226, 222, 214, 0.74);
}

.loom-due-card:hover {
    background: rgba(255, 250, 243, 0.58);
}

.loom-due-card strong,
.loom-due-card small {
    display: block;
}

.loom-due-main {
    display: grid;
    gap: 0.08rem;
}

.loom-due-main strong {
    font-size: 0.91rem;
    font-weight: var(--loom-weight-strong);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.loom-due-main small {
    color: var(--loom-text-secondary);
    font-size: 0.74rem;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.loom-due-main .loom-due-detail {
    color: var(--loom-text-muted);
}

.loom-due-date {
    align-items: center;
    align-content: center;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.24), transparent),
        var(--loom-accent-soft);
    border: 1px solid rgba(184, 115, 51, 0.14);
    border-radius: var(--loom-radius-md);
    color: var(--loom-primary);
    display: inline-grid;
    height: 3.05rem;
    justify-content: center;
    justify-items: center;
    line-height: 1;
    text-align: center;
    width: 3.05rem;
}

.loom-due-date strong {
    font-family: var(--loom-font-numeric);
    font-size: 1.32rem;
    font-variant-numeric: tabular-nums;
    font-weight: var(--loom-weight-strong);
}

.loom-due-date small {
    font-size: 0.62rem;
    font-weight: var(--loom-weight-strong);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.loom-garment-icon {
    align-items: center;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.32), transparent),
        var(--loom-surface-alt);
    border: 1px solid rgba(209, 204, 194, 0.7);
    border-radius: var(--loom-radius-md);
    color: var(--loom-primary);
    display: inline-flex;
    flex: 0 0 auto;
    height: 2.15rem;
    justify-content: center;
    overflow: hidden;
    width: 2.15rem;
}

.loom-garment-icon img {
    display: block;
    height: 1.35rem;
    object-fit: contain;
    opacity: 0.88;
    width: 1.35rem;
}

.loom-due-label {
    align-self: start;
    border-radius: var(--loom-radius-pill);
    border: 1px solid transparent;
    font-size: 0.66rem;
    font-weight: var(--loom-weight-strong);
    justify-self: end;
    line-height: 1;
    padding: 0.34rem 0.54rem;
    white-space: nowrap;
}

.loom-due-overdue {
    background: var(--loom-error-soft);
    border-color: rgba(192, 57, 43, 0.18);
    color: #8d261d;
}

.loom-due-today {
    background: var(--loom-warning-soft);
    border-color: rgba(212, 154, 46, 0.20);
    color: #7b4f0d;
}

.loom-due-upcoming {
    background: var(--loom-secondary-soft);
    border-color: rgba(122, 139, 92, 0.22);
    color: #52653a;
}

.loom-recent-measurements-card {
    overflow: hidden;
    padding: 0.2rem 0;
}

.loom-recent-customer {
    align-items: center;
    display: flex;
    grid-column: 1;
    gap: var(--loom-space-3);
    min-width: 0;
}

.loom-recent-list {
    display: grid;
}

.loom-recent-row {
    align-items: center;
    color: var(--loom-text-primary);
    contain-intrinsic-size: 5.5rem;
    content-visibility: auto;
    cursor: pointer;
    display: grid;
    gap: 0.45rem var(--loom-space-3);
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 5.5rem;
    padding: 0.95rem 1rem;
    text-decoration: none;
    transition:
        background-color var(--loom-transition-base),
        transform var(--loom-transition-fast);
}

.loom-recent-row + .loom-recent-row {
    border-top: 1px solid rgba(226, 222, 214, 0.68);
}

.loom-recent-row:hover {
    background: rgba(255, 250, 243, 0.58);
}

.loom-recent-avatar {
    align-items: center;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.34), transparent),
        var(--loom-surface-alt);
    border: 1px solid rgba(209, 204, 194, 0.72);
    border-radius: var(--loom-radius-circle);
    color: var(--loom-primary);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.82rem;
    font-weight: var(--loom-weight-strong);
    height: 2.15rem;
    justify-content: center;
    line-height: 1;
    text-transform: uppercase;
    width: 2.15rem;
}

.loom-recent-customer-copy,
.loom-recent-main,
.loom-recent-delivery {
    display: grid;
    gap: 0.16rem;
    min-width: 0;
}

.loom-recent-customer-copy strong,
.loom-recent-title-line strong {
    font-size: 0.92rem;
    font-weight: var(--loom-weight-strong);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.loom-recent-customer-copy small,
.loom-recent-detail-line,
.loom-recent-delivery span {
    color: var(--loom-text-secondary);
    font-size: 0.74rem;
    font-weight: 500;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.loom-recent-title-line {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.55rem;
    min-width: 0;
}

.loom-recent-detail-line {
    align-items: center;
    display: flex;
    gap: 0.35rem;
}

.loom-recent-garment-list {
    display: grid;
    gap: 0.32rem;
    grid-column: 1 / -1;
    margin-left: calc(2.15rem + var(--loom-space-3));
    margin-top: 0.12rem;
    max-width: 18rem;
}

.loom-recent-garment-row {
    align-items: center;
    color: var(--loom-text-primary);
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: var(--loom-weight-muted);
    gap: 0.44rem;
    line-height: 1.2;
    max-width: 100%;
    min-width: 0;
}

.loom-recent-garment-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.loom-recent-garment-count {
    color: var(--loom-text-secondary);
    font-family: var(--loom-font-numeric);
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
    font-weight: var(--loom-weight-row);
    white-space: nowrap;
}

.loom-recent-garment-empty,
.loom-recent-garment-more {
    color: var(--loom-text-muted);
    font-size: 0.76rem;
    font-weight: var(--loom-weight-muted);
}

.loom-recent-garment-icon {
    height: 1.74rem;
    width: 1.74rem;
}

.loom-recent-garment-icon img {
    height: 1.04rem;
    width: 1.04rem;
}

.loom-recent-code {
    white-space: nowrap;
}

.loom-recent-code {
    color: var(--loom-text-secondary);
    font-family: var(--loom-font-numeric);
    font-size: 0.86rem;
    font-variant-numeric: tabular-nums;
    font-weight: var(--loom-weight-row);
}

.loom-recent-delivery {
    grid-column: 1 / -1;
    justify-self: start;
    margin-left: calc(2.15rem + var(--loom-space-3));
}

.loom-recent-delivery strong {
    color: var(--loom-primary);
    font-family: var(--loom-font-numeric);
    font-size: 0.84rem;
    font-variant-numeric: tabular-nums;
    font-weight: var(--loom-weight-row);
    line-height: 1.1;
    white-space: nowrap;
}

.loom-recent-muted {
    color: var(--loom-text-muted);
    font-weight: 500;
}

.loom-recent-action {
    align-items: center;
    border-radius: var(--loom-radius-circle);
    color: var(--loom-primary);
    display: inline-flex;
    grid-column: 2;
    grid-row: 1;
    height: 2rem;
    justify-content: center;
    justify-self: end;
    opacity: 0.72;
    text-decoration: none;
    transition:
        background-color var(--loom-transition-base),
        color var(--loom-transition-base),
        transform var(--loom-transition-fast);
    width: 2rem;
}

.loom-recent-row:hover .loom-recent-action,
.loom-recent-action:hover,
.loom-recent-action:focus-visible {
    background: rgba(184, 115, 51, 0.12);
    color: var(--loom-accent);
    opacity: 1;
    transform: translateX(2px);
}

.loom-recent-action:focus-visible {
    outline: 3px solid var(--loom-focus-ring);
    outline-offset: 2px;
}

.loom-recent-action svg {
    height: 1rem;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.1;
    width: 1rem;
}

@media (min-width: 720px) {
    .loom-recent-row {
        gap: var(--loom-space-4);
        grid-template-columns: minmax(12rem, 1.2fr) minmax(9rem, 0.95fr) minmax(5.25rem, auto) auto;
    }

    .loom-recent-customer,
    .loom-recent-garment-list {
        grid-column: auto;
    }

    .loom-recent-garment-list {
        margin-left: 0;
        margin-top: 0;
        max-width: none;
    }

    .loom-recent-delivery {
        grid-column: auto;
        justify-self: end;
        margin-left: 0;
        text-align: right;
    }

    .loom-recent-action {
        grid-column: auto;
        grid-row: auto;
    }
}

.loom-search-page {
    display: grid;
    gap: var(--loom-space-4);
}

.loom-search-mode-switch {
    align-items: center;
    background: rgba(255, 250, 243, 0.70);
    border: 1px solid rgba(226, 222, 214, 0.82);
    border-radius: var(--loom-radius-pill);
    display: inline-flex;
    gap: 0.2rem;
    padding: 0.25rem;
}

.loom-search-mode-tab {
    border-radius: var(--loom-radius-pill);
    color: var(--loom-text-secondary);
    font-size: 0.82rem;
    font-weight: var(--loom-weight-row);
    line-height: 1;
    min-height: 2.05rem;
    padding: 0.62rem 0.9rem;
    text-decoration: none;
    transition:
        background-color var(--loom-transition-base),
        color var(--loom-transition-base),
        box-shadow var(--loom-transition-base);
}

.loom-search-mode-tab.is-active {
    background: var(--loom-surface);
    box-shadow: 0 0.45rem 1.1rem rgba(82, 54, 34, 0.10);
    color: var(--loom-primary);
}

.loom-search-form {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-self: stretch;
    max-width: none;
    width: 100%;
}

.loom-search-toolbar {
    padding-bottom: 0.15rem;
}

.loom-search-box,
.loom-filter-select,
.loom-clear-filters-button {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 250, 243, 0.76)),
        rgba(255, 250, 243, 0.82);
    border: 1px solid rgba(184, 115, 51, 0.18);
    border-radius: var(--loom-radius-pill);
    color: var(--loom-text-primary);
    min-height: 2.7rem;
    transition:
        background var(--loom-transition-base),
        border-color var(--loom-transition-base),
        box-shadow var(--loom-transition-base),
        color var(--loom-transition-base);
}

.loom-search-box:focus-within,
.loom-filter-select:focus,
.loom-filter-select:hover,
.loom-clear-filters-button:hover,
.loom-clear-filters-button:focus-visible {
    background: var(--loom-surface);
    border-color: rgba(184, 115, 51, 0.42);
    box-shadow: 0 0 0 3px rgba(184, 115, 51, 0.10);
    color: var(--loom-primary);
    outline: 0;
}

.loom-search-box {
    align-items: center;
    display: flex;
    flex: 1 1 20rem;
    gap: 0.62rem;
    min-width: 15rem;
    padding: 0 0.95rem;
}

.loom-search-box-icon {
    align-items: center;
    color: var(--loom-text-secondary);
    display: inline-flex;
    flex: 0 0 auto;
}

.loom-search-box-icon .loom-lucide-icon {
    height: 1rem;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.25;
    width: 1rem;
}

.loom-search-toolbar-input {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--loom-text-primary);
    flex: 1 1 auto;
    font-family: var(--loom-font-body);
    font-size: 0.92rem;
    font-weight: 500;
    min-width: 0;
    outline: 0;
    width: 100%;
}

.loom-search-toolbar-input:focus,
.loom-search-toolbar-input:focus-visible {
    box-shadow: none;
}

.loom-search-toolbar-input::placeholder {
    color: var(--loom-text-muted);
    font-weight: 400;
}

.loom-search-toolbar-input::-webkit-search-cancel-button,
.loom-search-toolbar-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.loom-search-toolbar-input::-ms-clear {
    display: none;
    height: 0;
    width: 0;
}

.loom-filter-select {
    -webkit-appearance: none;
    appearance: none;
    --loom-filter-select-arrow: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%23B87333' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 0.78rem center / 0.9rem 0.9rem no-repeat;
    background:
        var(--loom-filter-select-arrow),
        linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 250, 243, 0.76)),
        rgba(255, 250, 243, 0.82);
    cursor: pointer;
    flex: 0 0 auto;
    font-family: var(--loom-font-body);
    font-size: 0.82rem;
    font-weight: var(--loom-weight-row);
    line-height: 1;
    min-width: 9.6rem;
    outline: 0;
    padding: 0 2.05rem 0 0.85rem;
}

.loom-filter-select:hover,
.loom-filter-select:focus {
    background:
        var(--loom-filter-select-arrow),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 250, 243, 0.88)),
        var(--loom-surface);
}

.loom-filter-select option {
    background: var(--loom-surface);
    color: var(--loom-text-primary);
}

.loom-clear-filters-button {
    align-items: center;
    color: var(--loom-accent);
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: center;
    min-width: 2.7rem;
    padding: 0;
    text-decoration: none;
    width: 2.7rem;
}

.loom-clear-filters-button .loom-lucide-icon {
    height: 1rem;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.25;
    transition: transform var(--loom-transition-fast);
    width: 1rem;
}

.loom-clear-filters-button:hover .loom-lucide-icon,
.loom-clear-filters-button:focus-visible .loom-lucide-icon {
    transform: rotate(-28deg);
}

.loom-search-section {
    display: grid;
    gap: var(--loom-space-3);
}

.loom-search-section-header {
    align-items: end;
    display: flex;
    gap: var(--loom-space-3);
    justify-content: space-between;
    padding: 0 var(--loom-space-1);
}

.loom-search-count {
    color: var(--loom-text-muted);
    font-size: 0.78rem;
    font-weight: var(--loom-weight-row);
    white-space: nowrap;
}

.loom-search-pagination {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: center;
    padding: 0.35rem var(--loom-space-1) 0;
}

.loom-pagination-link {
    align-items: center;
    background: rgba(255, 250, 243, 0.72);
    border: 1px solid rgba(184, 115, 51, 0.18);
    border-radius: var(--loom-radius-pill);
    color: var(--loom-primary);
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: var(--loom-weight-row);
    gap: 0.4rem;
    justify-content: center;
    min-height: 2.45rem;
    min-width: 6.75rem;
    padding: 0 0.9rem;
    text-decoration: none;
    transition:
        background var(--loom-transition-base),
        border-color var(--loom-transition-base),
        box-shadow var(--loom-transition-base),
        color var(--loom-transition-base);
}

.loom-pagination-link:hover,
.loom-pagination-link:focus-visible {
    background: var(--loom-surface);
    border-color: rgba(184, 115, 51, 0.42);
    box-shadow: 0 0 0 3px rgba(184, 115, 51, 0.10);
    color: var(--loom-accent);
    outline: 0;
}

.loom-pagination-link.is-disabled {
    color: var(--loom-text-muted);
    opacity: 0.48;
    pointer-events: none;
}

.loom-pagination-status {
    color: var(--loom-text-secondary);
    font-size: 0.78rem;
    font-weight: var(--loom-weight-row);
    min-width: 5.6rem;
    text-align: center;
}

.loom-search-customer-list,
.loom-search-measurement-list {
    display: grid;
    overflow: hidden;
    padding: 0.2rem 0;
}

.loom-search-customer-row,
.loom-search-measurement-row {
    align-items: center;
    contain-intrinsic-size: 5rem;
    content-visibility: auto;
    cursor: pointer;
    display: grid;
    gap: var(--loom-space-3);
    padding: 0.95rem 1rem;
    position: relative;
    transition:
        background-color var(--loom-transition-base),
        transform var(--loom-transition-fast);
}

.loom-search-customer-row + .loom-search-customer-row,
.loom-search-measurement-row + .loom-search-measurement-row {
    border-top: 1px solid rgba(226, 222, 214, 0.68);
}

.loom-search-customer-row:hover,
.loom-search-measurement-row:hover {
    background: rgba(255, 250, 243, 0.58);
}

.loom-search-customer-identity {
    align-items: center;
    display: flex;
    gap: var(--loom-space-3);
    min-width: 0;
}

.loom-search-avatar {
    align-items: center;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.34), transparent),
        var(--loom-surface-alt);
    border: 1px solid rgba(209, 204, 194, 0.72);
    border-radius: var(--loom-radius-circle);
    color: var(--loom-primary);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.88rem;
    font-weight: var(--loom-weight-strong);
    height: 2.55rem;
    justify-content: center;
    line-height: 1;
    text-transform: uppercase;
    width: 2.55rem;
}

.loom-search-customer-main {
    display: grid;
    gap: 0.16rem;
    min-width: 0;
}

.loom-search-customer-main strong {
    color: var(--loom-text-primary);
    font-size: 0.98rem;
    font-weight: var(--loom-weight-strong);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.loom-search-customer-main span,
.loom-search-customer-main small,
.loom-search-customer-latest span,
.loom-search-muted {
    color: var(--loom-text-secondary);
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.3;
}

.loom-search-customer-main span,
.loom-search-customer-latest strong {
    font-family: var(--loom-font-numeric);
    font-variant-numeric: tabular-nums;
}

.loom-search-customer-meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.28rem 0.42rem;
}

.loom-search-customer-code {
    background: rgba(250, 247, 242, 0.86);
    border: 1px solid rgba(184, 115, 51, 0.24);
    border-radius: 0.35rem;
    color: var(--loom-primary) !important;
    display: inline-flex;
    font-family: var(--loom-font-numeric);
    font-size: 0.68rem !important;
    font-variant-numeric: tabular-nums;
    font-weight: var(--loom-weight-row) !important;
    line-height: 1;
    padding: 0.18rem 0.34rem;
    white-space: nowrap;
}

.loom-search-customer-latest {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.loom-search-customer-latest strong {
    color: var(--loom-primary);
    font-size: 0.86rem;
    font-weight: var(--loom-weight-row);
    line-height: 1.15;
}

.loom-search-meta-label {
    color: var(--loom-text-muted) !important;
    text-transform: uppercase;
}

.loom-search-latest-reference {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.loom-search-garments {
    display: grid;
    gap: 0.32rem;
    min-width: 0;
}

.loom-search-garment-row {
    align-items: center;
    color: var(--loom-text-primary);
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: var(--loom-weight-muted);
    gap: 0.44rem;
    line-height: 1.2;
    max-width: 100%;
    min-width: 0;
}

.loom-search-garment-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.loom-search-garment-count {
    color: var(--loom-text-secondary);
    font-family: var(--loom-font-numeric);
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
    font-weight: var(--loom-weight-row);
    white-space: nowrap;
}

.loom-search-garment-icon {
    height: 1.74rem;
    width: 1.74rem;
}

.loom-search-garment-icon img {
    height: 1.04rem;
    width: 1.04rem;
}

.loom-search-actions {
    align-items: center;
    display: flex;
    gap: 0.45rem;
    justify-content: flex-end;
    min-width: 0;
}

.loom-search-new-measurement {
    color: var(--loom-text-secondary);
    height: 2rem;
    min-height: 2rem;
    position: relative;
    white-space: nowrap;
    width: 2rem;
    z-index: 3;
}

.loom-search-new-measurement:hover,
.loom-search-new-measurement:focus-visible {
    background: rgba(184, 115, 51, 0.08);
    color: var(--loom-accent);
}

.loom-search-row-arrow {
    align-items: center;
    border-radius: var(--loom-radius-circle);
    color: var(--loom-primary);
    display: inline-flex;
    flex: 0 0 auto;
    height: 2rem;
    justify-content: center;
    opacity: 0.72;
    pointer-events: none;
    position: relative;
    transition:
        background-color var(--loom-transition-base),
        color var(--loom-transition-base),
        transform var(--loom-transition-fast);
    width: 2rem;
    z-index: 2;
}

.loom-search-row-arrow-link {
    border-radius: var(--loom-radius-circle);
    color: inherit;
    display: inline-flex;
    position: relative;
    text-decoration: none;
    z-index: 3;
}

.loom-search-row-arrow-link:focus-visible {
    outline: 3px solid var(--loom-focus-ring);
    outline-offset: 2px;
}

.loom-search-customer-row:hover .loom-search-row-arrow,
.loom-search-measurement-row:hover .loom-search-row-arrow,
.loom-search-row-arrow-link:focus-visible .loom-search-row-arrow {
    background: rgba(184, 115, 51, 0.12);
    color: var(--loom-accent);
    opacity: 1;
    transform: translateX(2px);
}

.loom-search-row-arrow svg {
    height: 1rem;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.1;
    width: 1rem;
}

.loom-search-empty {
    align-items: center;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 247, 242, 0.88));
    border-color: rgba(91, 70, 54, 0.12);
    box-shadow: var(--loom-shadow-sm);
    display: grid;
    gap: var(--loom-space-4);
    justify-items: center;
    min-height: 17.5rem;
    overflow: hidden;
    padding: var(--loom-space-8) var(--loom-space-5);
    position: relative;
    text-align: center;
}

.loom-search-empty::before {
    background: linear-gradient(90deg, rgba(184, 115, 51, 0.64), rgba(122, 139, 92, 0.42));
    content: "";
    height: 0.2rem;
    inset: 0 0 auto;
    position: absolute;
}

.loom-search-empty-mark {
    align-items: center;
    background: rgba(184, 115, 51, 0.10);
    border: 1px solid rgba(184, 115, 51, 0.22);
    border-radius: var(--loom-radius-circle);
    color: var(--loom-accent);
    display: inline-flex;
    height: 3.25rem;
    justify-content: center;
    width: 3.25rem;
}

.loom-search-empty-mark svg {
    height: 1.35rem;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 1.35rem;
}

.loom-search-empty-copy {
    display: grid;
    gap: var(--loom-space-2);
    max-width: 28rem;
}

.loom-search-empty-copy p {
    color: var(--loom-text-secondary);
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0;
}

.loom-search-query-chip {
    align-items: center;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid var(--loom-border);
    border-radius: var(--loom-radius-pill);
    color: var(--loom-text-muted);
    display: inline-flex;
    flex-wrap: wrap;
    font-size: 0.78rem;
    font-weight: var(--loom-weight-row);
    gap: 0.38rem;
    justify-content: center;
    line-height: 1.2;
    max-width: min(100%, 28rem);
    padding: 0.48rem 0.75rem;
}

.loom-search-query-chip strong {
    color: var(--loom-text-primary);
    font-weight: var(--loom-weight-strong);
    overflow-wrap: anywhere;
}

.loom-search-empty .loom-search-empty-action {
    margin-top: var(--loom-space-1);
    width: min(100%, 15rem);
}

.loom-search-measurement-main,
.loom-search-measurement-status {
    display: grid;
    gap: 0.16rem;
    min-width: 0;
}

.loom-search-measurement-main strong {
    color: var(--loom-primary);
    font-family: var(--loom-font-numeric);
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
    font-weight: var(--loom-weight-row);
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.loom-search-measurement-main span {
    color: var(--loom-text-secondary);
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.loom-search-measurement-main .loom-search-measurement-match {
    color: var(--loom-accent);
    font-weight: var(--loom-weight-row);
}

.loom-search-measurement-status {
    gap: 0.34rem;
    justify-items: start;
}

.loom-customer-history-page {
    display: grid;
    gap: var(--loom-space-4);
}

.loom-customer-history-title-meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.42rem 0.56rem;
    margin-top: var(--loom-space-2);
}

.loom-customer-history-mobile {
    color: var(--loom-primary);
    font-family: var(--loom-font-numeric);
    font-size: 0.86rem;
    font-variant-numeric: tabular-nums;
    font-weight: var(--loom-weight-strong);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.loom-customer-history-hero-action {
    justify-self: stretch;
    width: auto;
}

.loom-customer-history-section {
    display: grid;
    gap: var(--loom-space-3);
}

.loom-history-list {
    display: grid;
    overflow: hidden;
    padding: 0.2rem 0;
}

.loom-history-row {
    align-items: center;
    contain-intrinsic-size: 5rem;
    content-visibility: auto;
    cursor: pointer;
    display: grid;
    gap: var(--loom-space-3);
    padding: 0.98rem 1rem;
    position: relative;
    transition:
        background-color var(--loom-transition-base),
        transform var(--loom-transition-fast);
}

.loom-history-row + .loom-history-row {
    border-top: 1px solid rgba(226, 222, 214, 0.68);
}

.loom-history-row:hover {
    background: rgba(255, 250, 243, 0.58);
}

.loom-history-row:hover .loom-search-row-arrow,
.loom-history-row .loom-search-row-arrow-link:focus-visible .loom-search-row-arrow {
    background: rgba(184, 115, 51, 0.12);
    color: var(--loom-accent);
    opacity: 1;
    transform: translateX(2px);
}

.loom-history-primary,
.loom-history-status {
    display: grid;
    gap: 0.16rem;
    min-width: 0;
}

.loom-history-primary strong {
    color: var(--loom-text-primary);
    font-family: var(--loom-font-numeric);
    font-size: 0.94rem;
    font-variant-numeric: tabular-nums;
    font-weight: var(--loom-weight-strong);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.loom-history-primary span,
.loom-history-status-summary,
.loom-history-piece-label {
    color: var(--loom-text-secondary);
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.3;
}

.loom-history-garments {
    display: grid;
    gap: 0.32rem;
    min-width: 0;
}

.loom-history-status {
    gap: 0.34rem;
    justify-items: start;
}

.loom-history-status-summary,
.loom-history-piece-pill {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.loom-history-piece-status {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.34rem;
    max-width: 100%;
    min-width: 0;
}

.loom-history-piece-label {
    color: var(--loom-text-muted);
    font-size: 0.66rem;
    font-weight: var(--loom-weight-row);
    line-height: 1;
    text-transform: uppercase;
}

.loom-history-piece-pill {
    background: rgba(250, 247, 242, 0.86);
    border: 1px solid rgba(91, 70, 54, 0.12);
    border-radius: var(--loom-radius-pill);
    color: var(--loom-text-secondary);
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: var(--loom-weight-row);
    line-height: 1.15;
    max-width: 100%;
    padding: 0.28rem 0.5rem;
}

@media (min-width: 560px) and (max-width: 719px) {
    .loom-search-measurement-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    }

    .loom-search-measurement-row .loom-search-actions {
        align-self: center;
        grid-column: 3;
        grid-row: 1 / span 2;
    }
}

@media (min-width: 720px) {
    .loom-customer-history-hero-action {
        justify-self: end;
    }

    .loom-search-customer-row {
        gap: var(--loom-space-3);
        grid-template-columns: minmax(12rem, 1.25fr) minmax(8.25rem, 0.72fr) minmax(9rem, 0.9fr) auto;
    }

    .loom-search-measurement-row {
        gap: var(--loom-space-3);
        grid-template-columns: minmax(9.5rem, 1.1fr) minmax(9rem, 0.95fr) minmax(8rem, 0.85fr) minmax(7.5rem, 0.7fr) auto;
    }

    .loom-history-row {
        gap: var(--loom-space-3);
        grid-template-columns: minmax(11rem, 0.9fr) minmax(11rem, 1fr) minmax(8.75rem, 0.75fr) auto;
    }

    .loom-search-actions {
        justify-self: end;
        min-width: 4.45rem;
    }
}

@media (min-width: 1100px) {
    .loom-search-customer-row {
        gap: var(--loom-space-4);
        grid-template-columns: minmax(14rem, 1.35fr) minmax(10rem, 0.78fr) minmax(12rem, 1fr) auto;
    }

    .loom-search-measurement-row {
        gap: var(--loom-space-4);
        grid-template-columns: minmax(13rem, 1.2fr) minmax(12rem, 0.95fr) minmax(11rem, 0.9fr) minmax(10rem, 0.72fr) auto;
    }

    .loom-history-row {
        gap: var(--loom-space-4);
        grid-template-columns: minmax(13rem, 0.9fr) minmax(13rem, 1fr) minmax(10rem, 0.75fr) auto;
    }
}

.loom-summary-tile {
    background: rgba(250, 247, 242, 0.72);
    border: 1px solid var(--loom-border);
    border-radius: var(--loom-radius-lg);
    display: grid;
    gap: 0.25rem;
    min-height: 6rem;
    padding: var(--loom-space-3);
}

.loom-summary-tile strong {
    color: var(--loom-primary);
    font-family: var(--loom-font-numeric);
    font-size: 1.7rem;
    font-variant-numeric: tabular-nums;
    font-weight: var(--loom-weight-strong);
    line-height: 1;
}

.loom-summary-tile span {
    color: var(--loom-text-secondary);
    font-size: 0.78rem;
    font-weight: var(--loom-weight-muted);
}

.loom-login-main {
    inset: 0;
    margin: 0;
    max-width: none;
    min-height: 100vh;
    min-height: 100svh;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
    position: fixed;
    width: auto;
}

.loom-login-screen {
    align-items: center;
    background: var(--loom-background);
    display: flex;
    isolation: isolate;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    padding: var(--loom-space-4);
    position: relative;
    width: 100%;
}

.loom-login-screen::before,
.loom-login-screen::after {
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.loom-login-screen::before {
    background-image: var(--loom-login-bg);
    background-position: 24% center;
    background-size: cover;
    z-index: -2;
}

.loom-login-screen::after {
    background:
        linear-gradient(180deg, rgba(250, 247, 242, 0.22), rgba(245, 239, 229, 0.54)),
        linear-gradient(90deg, rgba(43, 33, 26, 0.08) 0%, rgba(250, 247, 242, 0.18) 46%, rgba(250, 247, 242, 0.78) 100%);
    z-index: -1;
}

.loom-login-shell {
    display: flex;
    justify-content: center;
    width: min(100%, 76rem);
}

.loom-login-card {
    max-width: 25.5rem;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.loom-login-brand {
    position: relative;
    z-index: 1;
}

.loom-login-logo {
    display: block;
    height: auto;
    max-width: 15rem;
    width: 72%;
}

.loom-login-tagline {
    color: var(--loom-accent);
    font-size: 0.74rem;
    font-weight: var(--loom-weight-strong);
    letter-spacing: 0.24em;
    line-height: 1.25;
    text-transform: uppercase;
}

.section-title,
.label-kicker {
    color: var(--loom-accent);
    font-size: 0.72rem;
    font-weight: var(--loom-weight-strong);
    letter-spacing: 0.16em;
    line-height: 1.25;
    text-transform: uppercase;
}

.section-title {
    color: var(--loom-primary);
}

.paper-card,
.paper-panel,
.loom-card {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--loom-border);
    border-radius: var(--loom-radius-lg);
    box-shadow: var(--loom-shadow-sm);
}

.paper-card.loom-context-card,
.paper-panel.loom-context-card,
.loom-card.loom-context-card {
    -webkit-backdrop-filter: blur(14px) saturate(112%);
    backdrop-filter: blur(14px) saturate(112%);
    background:
        linear-gradient(145deg, rgba(255, 250, 243, 0.92), rgba(250, 241, 229, 0.76)),
        rgba(255, 250, 243, 0.82);
    border-color: rgba(226, 211, 193, 0.78);
    box-shadow:
        0 14px 32px rgba(43, 33, 26, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

.paper-card.loom-login-card {
    -webkit-backdrop-filter: blur(18px) saturate(115%);
    backdrop-filter: blur(18px) saturate(115%);
    background:
        linear-gradient(145deg, rgba(255, 250, 243, 0.92), rgba(250, 241, 229, 0.80)),
        rgba(255, 250, 243, 0.84);
    border-color: rgba(226, 211, 193, 0.78);
    box-shadow:
        0 18px 44px rgba(43, 33, 26, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

.paper-card.loom-login-card::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent 42%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.paper-card.loom-login-card > * {
    position: relative;
    z-index: 1;
}

.loom-card-quiet {
    background: rgba(250, 247, 242, 0.76);
    border: 1px solid var(--loom-border);
    border-radius: var(--loom-radius-lg);
}

.paper-slip,
.loom-slip {
    background:
        linear-gradient(transparent 31px, rgba(91, 70, 54, 0.055) 32px),
        linear-gradient(90deg, rgba(184, 115, 51, 0.08), transparent 9rem),
        var(--loom-surface);
    background-size: 100% 32px, 100% 100%, 100% 100%;
    border: 1px solid var(--loom-border-strong);
    border-left: 4px solid var(--loom-primary);
    border-radius: var(--loom-radius-lg);
    box-shadow: var(--loom-shadow-md);
    position: relative;
}

.loom-divider {
    border-color: var(--loom-border);
}

.field-label {
    color: var(--loom-text-secondary);
    display: grid;
    font-size: 0.74rem;
    font-weight: var(--loom-weight-strong);
    gap: 0.4rem;
    letter-spacing: 0.08em;
    line-height: 1.25;
    text-transform: uppercase;
}

.loom-required-marker {
    color: var(--loom-error);
    display: inline-block;
    font-weight: var(--loom-weight-strong);
    letter-spacing: 0;
    margin-left: 0.14rem;
}

.field-input,
.loom-field {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--loom-border-strong);
    border-radius: var(--loom-radius-md);
    color: var(--loom-text-primary);
    font-size: 1rem;
    font-weight: 500;
    min-height: 2.85rem;
    outline: none;
    padding: 0.62rem 0.78rem;
    text-transform: none;
    transition:
        border-color var(--loom-transition-base),
        box-shadow var(--loom-transition-base),
        background var(--loom-transition-base);
    width: 100%;
}

.field-input::placeholder,
.loom-field::placeholder {
    color: var(--loom-text-muted);
    font-family: var(--loom-font-body);
    font-size: inherit;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0;
    opacity: 1;
    text-transform: none;
}

.field-input:focus,
.loom-field:focus {
    background: var(--loom-surface);
    border-color: var(--loom-accent);
    box-shadow: var(--loom-focus-ring);
}

.loom-input-wrap {
    display: block;
    position: relative;
}

.loom-input-icon {
    align-items: center;
    color: var(--loom-accent);
    display: inline-flex;
    height: 100%;
    justify-content: center;
    left: 0.82rem;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 1.2rem;
}

.loom-input-icon svg,
.loom-password-toggle svg {
    display: block;
    height: 1.08rem;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 1.08rem;
}

.field-input.loom-input-with-icon {
    padding-left: 2.55rem;
}

.field-input.loom-input-with-suffix {
    padding-right: 2.85rem;
}

.loom-password-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--loom-radius-md);
    color: var(--loom-text-muted);
    display: inline-flex;
    height: 2rem;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 0.48rem;
    top: 50%;
    transform: translateY(-50%);
    transition:
        background-color var(--loom-transition-base),
        color var(--loom-transition-base);
    width: 2rem;
}

.loom-password-toggle:hover,
.loom-password-toggle.is-visible {
    background: rgba(184, 115, 51, 0.10);
    color: var(--loom-primary);
}

.touch-button,
.loom-button {
    align-items: center;
    border-radius: var(--loom-radius-md);
    border: 1px solid transparent;
    display: inline-flex;
    font-size: 0.95rem;
    font-weight: var(--loom-weight-strong);
    gap: 0.45rem;
    justify-content: center;
    line-height: 1.1;
    min-height: 2.9rem;
    padding: 0.8rem 1rem;
    text-align: center;
    text-decoration: none;
    transition:
        background-color var(--loom-transition-base),
        border-color var(--loom-transition-base),
        box-shadow var(--loom-transition-base),
        color var(--loom-transition-base),
        transform var(--loom-transition-fast);
    width: 100%;
}

.touch-button:hover,
.loom-button:hover {
    transform: translateY(-1px);
}

.touch-button:active,
.loom-button:active {
    transform: translateY(0);
}

.touch-button.is-loading,
.loom-button.is-loading,
.loom-header-logout.is-loading,
.loom-line-icon-button.is-loading,
.loom-line-status-step.is-loading,
.loom-search-row-arrow-link.is-loading,
.loom-recent-action.is-loading,
.loom-action-card.is-loading,
.loom-due-card.is-loading,
.loom-clear-filters-button.is-loading,
.loom-location-option.is-loading,
.loom-section-action.is-loading,
.loom-form-hero-back.is-loading,
.loom-search-mode-tab.is-loading,
.loom-customer-history-hero-action.is-loading,
.loom-pagination-link.is-loading,
[data-clickable-row].is-loading,
.loom-filter-select.is-loading {
    cursor: wait;
    opacity: 0.78;
    pointer-events: none;
}

.loom-header-logout.is-loading {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
}

.loom-spinner {
    animation: loom-spin 720ms linear infinite;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--loom-radius-circle);
    display: inline-flex;
    flex: 0 0 auto;
    height: 1em;
    width: 1em;
}

.loom-line-icon-button.is-loading,
.loom-form-hero-back.is-loading,
.loom-clear-filters-button.is-loading,
.loom-recent-action.is-loading,
[data-clickable-row].is-loading .loom-recent-action,
[data-clickable-row].is-loading .loom-search-row-arrow {
    position: relative;
}

.loom-line-icon-button.is-loading > :not(.loom-spinner),
.loom-form-hero-back.is-loading > :not(.loom-spinner),
.loom-clear-filters-button.is-loading > :not(.loom-spinner),
.loom-recent-action.is-loading > :not(.loom-spinner),
.loom-search-row-arrow-link.is-loading .loom-search-row-arrow > :not(.loom-spinner),
[data-clickable-row].is-loading .loom-recent-action > :not(.loom-spinner),
[data-clickable-row].is-loading .loom-search-row-arrow > :not(.loom-spinner) {
    opacity: 0;
}

.loom-line-icon-button.is-loading::after,
.loom-form-hero-back.is-loading::after,
.loom-clear-filters-button.is-loading::after,
.loom-recent-action.is-loading::after,
.loom-search-row-arrow-link.is-loading .loom-search-row-arrow::after,
[data-clickable-row].is-loading .loom-recent-action::after,
[data-clickable-row].is-loading .loom-search-row-arrow::after {
    animation: loom-spin 720ms linear infinite;
    border: 2px solid currentColor;
    border-radius: var(--loom-radius-circle);
    border-right-color: transparent;
    content: "";
    height: 1rem;
    pointer-events: none;
    position: absolute;
    width: 1rem;
}

.loom-line-icon-button.is-loading::after,
.loom-form-hero-back.is-loading::after,
.loom-clear-filters-button.is-loading::after,
.loom-recent-action.is-loading::after,
.loom-search-row-arrow-link.is-loading .loom-search-row-arrow::after,
[data-clickable-row].is-loading .loom-recent-action::after,
[data-clickable-row].is-loading .loom-search-row-arrow::after {
    left: 50%;
    margin-left: -0.5rem;
    margin-top: -0.5rem;
    top: 50%;
}

.loom-search-row-arrow-link.is-loading .loom-search-row-arrow {
    position: relative;
}

[data-clickable-row].is-loading .loom-recent-action,
[data-clickable-row].is-loading .loom-search-row-arrow {
    background: rgba(184, 115, 51, 0.12);
    color: var(--loom-accent);
    opacity: 1;
}

.loom-button-primary {
    background: linear-gradient(180deg, var(--loom-accent), #9f5b22);
    border-color: rgba(91, 70, 54, 0.14);
    box-shadow: 0 8px 18px rgba(184, 115, 51, 0.18);
    color: #fffaf3;
}

.loom-button-primary:hover {
    background: linear-gradient(180deg, var(--loom-accent-hover), #8d501d);
    box-shadow: 0 10px 22px rgba(184, 115, 51, 0.22);
}

.loom-button-secondary {
    background: var(--loom-primary);
    border-color: var(--loom-primary);
    color: #fffaf3;
}

.loom-button-outline {
    background: rgba(255, 255, 255, 0.78);
    border-color: var(--loom-primary);
    color: var(--loom-primary);
}

.loom-button-outline:hover {
    background: var(--loom-accent-soft);
}

.loom-button-ghost {
    background: transparent;
    color: var(--loom-primary);
}

.loom-button-ghost:hover {
    background: rgba(184, 115, 51, 0.10);
}

.loom-button-danger {
    background: var(--loom-error);
    border-color: var(--loom-error);
    color: #fff;
}

.loom-button-small {
    font-size: 0.82rem;
    min-height: 2.35rem;
    padding: 0.55rem 0.78rem;
}

.touch-button:disabled,
.loom-button:disabled,
.touch-button[aria-disabled="true"],
.loom-button[aria-disabled="true"] {
    background: var(--loom-disabled);
    border-color: var(--loom-disabled);
    box-shadow: none;
    color: var(--loom-text-muted);
    cursor: not-allowed;
    opacity: 0.78;
    pointer-events: none;
    transform: none;
}

.loom-pill {
    align-items: center;
    background: var(--loom-surface-alt);
    border: 1px solid var(--loom-border);
    border-radius: var(--loom-radius-pill);
    color: var(--loom-text-secondary);
    display: inline-flex;
    font-size: 0.8rem;
    font-weight: var(--loom-weight-row);
    gap: 0.4rem;
    line-height: 1;
    min-height: 2rem;
    padding: 0.45rem 0.75rem;
}

.loom-chip,
.status-chip {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--loom-radius-pill);
    display: inline-flex;
    font-size: 0.76rem;
    font-weight: var(--loom-weight-strong);
    gap: 0.4rem;
    line-height: 1;
    min-height: 1.85rem;
    padding: 0.42rem 0.72rem;
    white-space: nowrap;
}

.status-chip::before {
    border-radius: var(--loom-radius-circle);
    content: "";
    height: 0.42rem;
    width: 0.42rem;
}

.status-chip-compact {
    font-size: 0.69rem;
    gap: 0.32rem;
    line-height: 1;
    min-height: 1.38rem;
    padding: 0.25rem 0.5rem;
}

.status-chip-compact::before {
    height: 0.32rem;
    width: 0.32rem;
}

.status-measurement-taken {
    background: var(--loom-info-soft);
    border-color: rgba(74, 109, 140, 0.30);
    color: #294f72;
}

.status-measurement-taken::before {
    background: var(--loom-info);
}

.status-in-stitching {
    background: var(--loom-warning-soft);
    border-color: rgba(212, 154, 46, 0.34);
    color: #8a5a0f;
}

.status-in-stitching::before {
    background: var(--loom-warning);
}

.status-ready {
    background: var(--loom-success-soft);
    border-color: rgba(46, 125, 50, 0.28);
    color: #216128;
}

.status-ready::before {
    background: var(--loom-success);
}

.status-delivered {
    background: var(--loom-surface-alt);
    border-color: var(--loom-border-strong);
    color: var(--loom-text-secondary);
}

.status-delivered::before {
    background: var(--loom-text-muted);
}

.loom-alert {
    border: 1px solid transparent;
    border-radius: var(--loom-radius-lg);
    font-size: 0.9rem;
    font-weight: var(--loom-weight-row);
    padding: var(--loom-space-3);
}

.loom-alert-error {
    background: var(--loom-error-soft);
    border-color: rgba(192, 57, 43, 0.24);
    color: #8d261d;
}

.loom-alert-warning {
    background: var(--loom-warning-soft);
    border-color: rgba(212, 154, 46, 0.30);
    color: #7b4f0d;
}

.loom-alert-success {
    background: var(--loom-success-soft);
    border-color: rgba(46, 125, 50, 0.24);
    color: #245c28;
}

.check-tile {
    align-items: center;
    background: rgba(255, 253, 249, 0.46);
    border: 1px solid rgba(209, 204, 194, 0.58);
    border-radius: var(--loom-radius-md);
    color: var(--loom-text-secondary);
    cursor: pointer;
    display: flex;
    flex: 1 1 8.25rem;
    font-size: 0.95rem;
    font-weight: var(--loom-weight-row);
    gap: 0.65rem;
    justify-self: start;
    max-width: 100%;
    min-height: 3.25rem;
    min-width: 8.25rem;
    padding: 0.75rem;
    transition:
        border-color var(--loom-transition-base),
        box-shadow var(--loom-transition-base),
        background var(--loom-transition-base),
        color var(--loom-transition-base);
    width: auto;
}

.check-tile:hover {
    background: rgba(255, 253, 249, 0.72);
    border-color: rgba(184, 115, 51, 0.24);
}

.check-tile:focus-within {
    border-color: var(--loom-accent);
    box-shadow: var(--loom-focus-ring);
}

.check-tile:has(input:checked) {
    background: #fffdf9;
    border-color: rgba(184, 115, 51, 0.48);
    box-shadow: 0 2px 8px rgba(43, 33, 26, 0.10);
    color: var(--loom-primary);
    font-weight: var(--loom-weight-strong);
}

.check-tile input {
    appearance: none;
    background: rgba(255, 253, 249, 0.82);
    border: 1.5px solid rgba(119, 109, 96, 0.34);
    border-radius: 0.34rem;
    box-shadow: 0 1px 2px rgba(43, 33, 26, 0.06);
    display: grid;
    flex: 0 0 auto;
    height: 1.1rem;
    margin: 0;
    place-content: center;
    transition:
        background var(--loom-transition-base),
        border-color var(--loom-transition-base),
        box-shadow var(--loom-transition-base);
    width: 1.1rem;
}

.check-tile input::before {
    border-bottom: 2px solid #fffaf3;
    border-right: 2px solid #fffaf3;
    content: "";
    height: 0.52rem;
    opacity: 0;
    transform: rotate(45deg) scale(0.72);
    transition:
        opacity var(--loom-transition-base),
        transform var(--loom-transition-base);
    width: 0.28rem;
}

.check-tile input:checked {
    background: var(--loom-accent);
    border-color: var(--loom-accent);
    box-shadow: 0 0 0 3px rgba(184, 115, 51, 0.12);
}

.check-tile input:checked::before {
    opacity: 1;
    transform: rotate(45deg) scale(1);
}

.info-line {
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid var(--loom-border);
    border-radius: var(--loom-radius-md);
    padding: 0.85rem;
}

.info-line dt {
    color: var(--loom-text-muted);
    font-size: 0.68rem;
    font-weight: var(--loom-weight-strong);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.info-line dd {
    color: var(--loom-text-primary);
    font-size: 1rem;
    font-weight: var(--loom-weight-row);
    margin-top: 0.2rem;
}

.measurement-box {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid var(--loom-border);
    border-radius: var(--loom-radius-md);
    padding: 0.85rem;
    text-align: center;
}

.measurement-box span {
    color: var(--loom-text-muted);
    display: block;
    font-size: 0.72rem;
    font-weight: var(--loom-weight-strong);
    min-height: 1.7rem;
    text-transform: uppercase;
}

.measurement-box strong {
    color: var(--loom-text-primary);
    display: block;
    font-family: var(--loom-font-numeric);
    font-size: 2rem;
    font-variant-numeric: tabular-nums;
    font-weight: var(--loom-weight-strong);
    line-height: 1;
    margin-top: 0.35rem;
}

.garment-choice {
    align-items: center;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--loom-border-strong);
    border-radius: var(--loom-radius-lg);
    color: var(--loom-primary);
    display: flex;
    font-size: 1rem;
    font-weight: var(--loom-weight-strong);
    justify-content: center;
    min-height: 3.8rem;
    padding: 0.9rem;
    text-align: center;
    transition:
        background-color var(--loom-transition-base),
        border-color var(--loom-transition-base),
        box-shadow var(--loom-transition-base),
        color var(--loom-transition-base),
        transform var(--loom-transition-fast);
}

.garment-choice:hover {
    background: var(--loom-accent-soft);
    border-color: var(--loom-accent);
    transform: translateY(-1px);
}

.garment-choice-active {
    background: var(--loom-primary);
    border-color: var(--loom-primary);
    color: #fffaf3;
}

.loom-button .loom-lucide-icon,
.touch-button .loom-lucide-icon {
    flex: 0 0 auto;
    height: 1rem;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
    width: 1rem;
}

.loom-form-panel {
    overflow: hidden;
}

.loom-form-hero-card {
    align-items: center;
    display: grid;
    gap: var(--loom-space-3);
    grid-template-columns: auto minmax(0, 1fr);
    padding: 0.1rem 0 var(--loom-space-1);
}

.loom-form-hero-back {
    align-items: center;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--loom-border);
    border-radius: var(--loom-radius-lg);
    box-shadow: var(--loom-shadow-xs);
    color: var(--loom-primary);
    display: inline-flex;
    height: 3.15rem;
    justify-content: center;
    text-decoration: none;
    transition:
        background-color var(--loom-transition-base),
        border-color var(--loom-transition-base),
        color var(--loom-transition-base),
        transform var(--loom-transition-fast);
    width: 3.15rem;
}

.loom-form-hero-back:hover {
    background: var(--loom-accent-soft);
    border-color: rgba(184, 115, 51, 0.32);
    color: var(--loom-primary);
    transform: translateX(-1px);
}

.loom-form-hero-back .loom-lucide-icon {
    height: 1.08rem;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
    width: 1.08rem;
}

.loom-form-hero-copy {
    min-width: 0;
}

.loom-form-hero-title {
    color: var(--loom-text-primary);
    font-family: var(--loom-font-display);
    font-size: clamp(1.7rem, 3.2vw, 2.35rem);
    font-weight: var(--loom-weight-display);
    letter-spacing: 0;
    line-height: 1.08;
    margin: 0.24rem 0 0;
}

.loom-form-hero-context {
    display: grid;
    gap: var(--loom-space-3);
    grid-column: 1 / -1;
}

.loom-form-hero {
    align-items: start;
    display: grid;
    gap: var(--loom-space-3);
}

.loom-form-context-block,
.loom-form-number {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(242, 239, 232, 0.82)),
        var(--loom-surface-alt);
    border: 1px solid var(--loom-border);
    border-radius: var(--loom-radius-lg);
    display: grid;
    gap: 0.22rem;
    justify-self: start;
    max-width: 100%;
    min-width: min(100%, 11rem);
    padding: 0.68rem 0.82rem;
}

.loom-form-context-block > span,
.loom-form-number span {
    color: var(--loom-text-muted);
    font-size: 0.66rem;
    font-weight: var(--loom-weight-strong);
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}

.loom-form-context-block > strong,
.loom-form-number strong {
    color: var(--loom-primary);
    font-family: var(--loom-font-numeric);
    font-size: 0.92rem;
    font-weight: var(--loom-weight-strong);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.loom-form-branch-field {
    min-width: min(100%, 13rem);
}

.loom-form-branch-field .field-input {
    font-size: 0.92rem;
    min-height: 2.38rem;
    padding-bottom: 0.48rem;
    padding-top: 0.48rem;
}

.loom-form-branch-alert {
    align-self: stretch;
    min-width: min(100%, 13rem);
}

.loom-form-hero-context .loom-form-context-block,
.loom-form-hero-context .loom-form-number {
    justify-self: stretch;
}

.loom-view-hero-card .loom-form-hero-copy {
    justify-self: start;
    text-align: left;
}

.loom-workflow-hero-context {
    align-items: center;
}

.loom-workflow-hero-context .loom-search-mode-switch {
    justify-self: start;
}

.loom-saved-main {
    align-content: start;
}

.loom-saved-shell {
    display: grid;
    justify-items: center;
    padding: clamp(1rem, 4vw, 2.4rem) 0;
}

.loom-saved-card {
    display: grid;
    gap: var(--loom-space-5);
    overflow: hidden;
    padding: clamp(1.2rem, 4vw, 2rem);
    position: relative;
    text-align: center;
    width: min(100%, 46rem);
}

.loom-saved-card::before {
    background: linear-gradient(90deg, rgba(46, 125, 50, 0.42), rgba(184, 115, 51, 0.34));
    content: "";
    height: 0.22rem;
    inset: 0 0 auto;
    position: absolute;
}

.loom-saved-copy {
    display: grid;
    gap: 0.45rem;
    justify-items: center;
}

.loom-saved-slip {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(250, 247, 242, 0.92)),
        var(--loom-surface-alt);
    border: 1px solid rgba(226, 222, 214, 0.92);
    border-radius: var(--loom-radius-lg);
    display: grid;
    gap: 0.35rem;
    justify-self: stretch;
    padding: 1rem;
}

.loom-saved-slip span,
.loom-saved-summary dt {
    color: var(--loom-text-muted);
    font-size: 0.68rem;
    font-weight: var(--loom-weight-strong);
    letter-spacing: 0.11em;
    line-height: 1;
    text-transform: uppercase;
}

.loom-saved-slip strong {
    color: var(--loom-primary);
    font-family: var(--loom-font-numeric);
    font-size: clamp(1.35rem, 5vw, 2.05rem);
    font-weight: var(--loom-weight-strong);
    line-height: 1.08;
    overflow-wrap: anywhere;
}

.loom-saved-summary {
    display: grid;
    gap: var(--loom-space-2);
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    text-align: left;
}

.loom-saved-summary > div {
    background: rgba(255, 255, 255, 0.68);
    border: 1px solid rgba(226, 222, 214, 0.82);
    border-radius: var(--loom-radius-md);
    display: grid;
    gap: 0.28rem;
    min-width: 0;
    padding: 0.82rem 0.9rem;
}

.loom-saved-summary dd {
    color: var(--loom-text-primary);
    font-size: 0.95rem;
    font-weight: var(--loom-weight-medium);
    line-height: 1.2;
    margin: 0;
    overflow-wrap: anywhere;
}

.loom-saved-actions {
    display: grid;
    gap: var(--loom-space-2);
}

.loom-saved-actions .loom-button-ghost {
    color: var(--loom-text-muted);
}

@media (min-width: 380px) and (max-width: 559px) {
    .loom-saved-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .loom-saved-summary > div {
        padding: 0.74rem 0.78rem;
    }
}

@media (min-width: 560px) {
    .loom-saved-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .loom-saved-actions {
        align-items: center;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .loom-saved-actions .loom-button-ghost {
        grid-column: 1 / -1;
        justify-self: center;
        width: auto;
    }
}

@media (min-width: 900px) {
    .loom-saved-actions {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto;
    }

    .loom-saved-actions .loom-button-ghost {
        grid-column: auto;
        justify-self: end;
    }
}

.loom-measurement-workbench {
    align-items: start;
    display: grid;
    gap: var(--loom-space-4);
    grid-template-columns: minmax(0, 1fr);
}

.loom-measurement-main {
    display: grid;
    gap: var(--loom-space-4);
    min-width: 0;
}

.loom-customer-section {
    display: grid;
    gap: var(--loom-space-3);
    padding: 0;
}

.loom-customer-strip {
    padding: 0.1rem 0 0.25rem;
}

.loom-customer-strip .loom-customer-grid {
    align-items: start;
    gap: 0.85rem;
}

.loom-customer-strip-view-layout {
    display: grid;
    gap: 0.85rem;
    min-width: 0;
}

.loom-customer-strip-actions {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: var(--loom-space-2);
    justify-content: flex-start;
    min-width: 0;
}

.loom-customer-strip-actions .loom-button {
    min-height: 2.5rem;
    width: auto;
}

.loom-customer-panel {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(250, 247, 242, 0.76)),
        rgba(250, 247, 242, 0.58);
    border: 1px solid rgba(226, 222, 214, 0.78);
    border-left: 3px solid rgba(184, 115, 51, 0.34);
    border-radius: var(--loom-radius-lg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
    padding: var(--loom-space-4);
}

.loom-customer-section-heading {
    align-items: center;
    display: flex;
    gap: var(--loom-space-3);
    min-width: 0;
}

.loom-customer-panel .loom-customer-section-heading {
    border-bottom: 1px solid rgba(226, 222, 214, 0.68);
    padding-bottom: var(--loom-space-3);
}

.loom-customer-section-icon {
    align-items: center;
    background: rgba(184, 115, 51, 0.08);
    border: 1px solid rgba(184, 115, 51, 0.14);
    border-radius: var(--loom-radius-md);
    color: var(--loom-primary);
    display: inline-flex;
    flex: 0 0 auto;
    height: 2.15rem;
    justify-content: center;
    width: 2.15rem;
}

.loom-customer-section-icon .loom-lucide-icon {
    height: 1rem;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.1;
    width: 1rem;
}

.loom-customer-grid,
.loom-customer-secondary-grid {
    display: grid;
    gap: var(--loom-space-3);
}

.loom-customer-panel .loom-customer-grid {
    gap: 0.85rem;
    grid-template-columns: minmax(0, 1fr);
}

.loom-customer-pair {
    display: grid;
    gap: var(--loom-space-3);
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
}

.loom-customer-mobile-group {
    display: grid;
    gap: 0.42rem;
    min-width: 0;
    position: relative;
}

.loom-customer-grid > .field-label,
.loom-customer-secondary-grid > .field-label,
.loom-customer-pair > .field-label,
.loom-customer-mobile-group > .field-label {
    min-width: 0;
}

.loom-customer-grid .field-input,
.loom-customer-secondary-grid .field-input,
.loom-customer-pair .field-input {
    min-height: 2.75rem;
    min-width: 0;
}

.loom-customer-panel .field-label {
    font-size: 0.69rem;
    gap: 0.34rem;
    letter-spacing: 0.07em;
}

.loom-customer-strip .field-label {
    font-size: 0.69rem;
    gap: 0.34rem;
    letter-spacing: 0.07em;
}

.loom-customer-panel .field-input {
    font-size: 0.92rem;
    min-height: 2.5rem;
    padding: 0.52rem 0.64rem;
}

.loom-customer-strip .field-input {
    font-size: 0.92rem;
    line-height: 1.2;
    max-width: 100%;
    min-height: 2.5rem;
    padding: 0.52rem 0.64rem;
}

.loom-customer-field-mobile,
.loom-customer-field-name,
.loom-customer-field-delivery,
.loom-customer-field-advance,
.loom-customer-field-notes {
    min-width: 0;
}

.loom-customer-strip .loom-customer-date-input {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    font-size: 0.92rem;
    height: 2.5rem;
    line-height: 1.15;
    max-height: 2.5rem;
    min-height: 2.5rem;
    min-width: 0;
    overflow: hidden;
    padding-bottom: 0.48rem;
    padding-top: 0.48rem;
    text-align: center;
}

.loom-customer-strip .loom-customer-date-input::-webkit-date-and-time-value {
    display: block;
    line-height: 1.2;
    margin: 0;
    min-height: 1.2em;
    padding: 0;
    text-align: center;
}

.loom-customer-strip .loom-customer-date-input::-webkit-calendar-picker-indicator {
    margin: 0;
    padding: 0;
}

.loom-customer-note-input {
    height: 2.75rem;
    overflow: hidden;
}

.loom-customer-strip .loom-customer-note-input {
    height: 2.5rem;
    min-height: 2.5rem;
    overflow: hidden;
    resize: none;
}

.loom-readonly-field {
    gap: 0.38rem;
}

.loom-readonly-value.field-input {
    align-items: center;
    background: rgba(255, 253, 249, 0.62);
    color: var(--loom-text-primary);
    display: flex;
    font-weight: var(--loom-weight-row);
    min-height: 2.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.loom-readonly-textarea-value.field-input {
    align-items: flex-start;
    line-height: 1.45;
    min-height: 3.75rem;
    overflow: visible;
    text-overflow: clip;
    white-space: pre-wrap;
}

.loom-readonly-id.field-input {
    color: var(--loom-primary);
    font-family: var(--loom-font-numeric);
    font-weight: var(--loom-weight-strong);
}

.loom-customer-panel .loom-customer-note-input {
    height: 4.35rem;
    overflow: auto;
}

.loom-form-section {
    margin-top: var(--loom-space-5);
    padding-top: var(--loom-space-4);
}

.loom-form-section-first {
    margin-top: 0;
    padding-top: 0;
}

.loom-form-section-heading {
    align-items: center;
    display: flex;
    justify-content: space-between;
    min-height: 1.4rem;
}

.loom-form-grid {
    display: grid;
    gap: var(--loom-space-3);
    margin-top: var(--loom-space-3);
}

.loom-customer-lookup {
    color: var(--loom-text-secondary);
    display: grid;
    font-size: 0.77rem;
    font-weight: var(--loom-weight-row);
    gap: 0.38rem;
    letter-spacing: 0;
    line-height: 1.35;
    text-transform: none;
}

.loom-customer-lookup.hidden {
    display: none;
}

.loom-customer-lookup-status {
    align-items: center;
    background: rgba(46, 125, 50, 0.07);
    border-left: 2px solid rgba(46, 125, 50, 0.38);
    border-radius: var(--loom-radius-sm);
    color: var(--loom-success);
    gap: 0.4rem;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 1.7rem;
    padding: 0.34rem 0.48rem;
}

.loom-customer-lookup-status:not(.is-loaded) {
    background: rgba(184, 115, 51, 0.06);
    border-left-color: rgba(184, 115, 51, 0.34);
    color: var(--loom-text-secondary);
}

.loom-customer-lookup-status.is-loading {
    grid-template-columns: auto minmax(0, 1fr);
}

.loom-customer-lookup-status.is-loading::before {
    animation: loom-spin 720ms linear infinite;
    border: 2px solid currentColor;
    border-radius: var(--loom-radius-circle);
    border-right-color: transparent;
    content: "";
    height: 0.88rem;
    width: 0.88rem;
}

.loom-customer-lookup-message {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.loom-customer-strip .loom-customer-field-mobile .loom-customer-lookup-status {
    position: relative;
    z-index: 2;
}

.loom-customer-lookup-picker,
.loom-customer-lookup-dropdown {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(250, 247, 242, 0.98)),
        var(--loom-surface);
    border: 1px solid rgba(209, 204, 194, 0.86);
    border-radius: var(--loom-radius-md);
    box-shadow: 0 18px 40px rgba(59, 31, 13, 0.15);
    left: 0;
    padding: 0.42rem;
    position: absolute;
    right: 0;
    top: calc(100% + 0.36rem);
    z-index: 35;
}

.loom-customer-lookup-title {
    color: var(--loom-primary);
    font-size: 0.72rem;
    font-weight: var(--loom-weight-strong);
    line-height: 1.25;
}

.loom-customer-match-list {
    display: grid;
    gap: 0;
    margin-top: 0;
    max-height: 12rem;
    overflow: auto;
}

.loom-customer-match-row {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--loom-radius-sm);
    color: var(--loom-text-primary);
    display: grid;
    gap: 0.45rem;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 2.2rem;
    padding: 0.42rem 0.52rem;
    text-align: left;
    transition: background-color var(--loom-transition-base), color var(--loom-transition-fast);
    width: 100%;
}

.loom-customer-match-row + .loom-customer-match-row {
    border-top: 1px solid rgba(226, 222, 214, 0.76);
}

.loom-customer-match-row:hover {
    background: rgba(184, 115, 51, 0.08);
    color: var(--loom-primary);
}

.loom-customer-match-name {
    font-size: 0.82rem;
    font-weight: var(--loom-weight-strong);
    line-height: 1.1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.loom-customer-match-meta {
    color: var(--loom-text-muted);
    font-size: 0.67rem;
    font-weight: var(--loom-weight-row);
    justify-self: end;
    line-height: 1.1;
    white-space: nowrap;
}

.loom-customer-add-new {
    background: rgba(250, 247, 242, 0.58);
    border: 0;
    border-top: 1px solid rgba(226, 222, 214, 0.86);
    color: var(--loom-text-secondary);
    font-size: 0.74rem;
    font-weight: var(--loom-weight-strong);
    line-height: 1.2;
    min-height: 2.15rem;
    margin: 0.34rem -0.42rem -0.42rem;
    padding: 0.46rem 0.94rem;
    text-align: left;
    width: calc(100% + 0.84rem);
}

.loom-customer-add-new:hover {
    background: rgba(184, 115, 51, 0.08);
    color: var(--loom-primary);
}

.loom-customer-change-customer {
    background: transparent;
    border: 0;
    color: var(--loom-accent);
    font-size: 0.72rem;
    font-weight: var(--loom-weight-strong);
    line-height: 1;
    padding: 0.1rem 0;
    white-space: nowrap;
}

.loom-customer-change-customer:hover,
.loom-customer-change-customer:focus-visible {
    color: var(--loom-primary);
    outline: none;
    text-decoration: underline;
    text-underline-offset: 0.14rem;
}

.loom-garment-workspace {
    align-items: start;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--loom-border);
    border-radius: var(--loom-radius-lg);
    box-shadow: var(--loom-shadow-sm);
    display: grid;
    gap: 0;
    grid-template-columns: minmax(4.9rem, 5.35rem) minmax(0, 1fr);
    overflow: visible;
    padding: 0;
    position: relative;
}

.loom-garment-workspace.is-empty {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    grid-template-columns: minmax(0, 1fr);
    min-height: clamp(21rem, 42vh, 32rem);
    overflow: visible;
    padding: 0;
}

.loom-garment-workspace.is-empty .loom-garment-workspace-header {
    display: none;
}

.loom-garment-workspace-header {
    --loom-garment-rail-action-height: 3.4rem;
    --loom-garment-rail-max-height: min(70vh, 34rem);
    align-items: stretch;
    background:
        linear-gradient(180deg, rgba(250, 247, 242, 0.94), rgba(245, 239, 229, 0.86)),
        var(--loom-surface-alt);
    align-self: start;
    border: 1px solid var(--loom-border);
    border-radius: var(--loom-radius-md);
    box-shadow: 0 10px 24px rgba(59, 31, 13, 0.08);
    display: flex;
    flex-direction: column;
    grid-column: 1;
    grid-row: 1;
    justify-content: flex-start;
    margin: var(--loom-space-4) 0 var(--loom-space-4) var(--loom-space-4);
    max-height: var(--loom-garment-rail-max-height);
    min-width: 0;
    overflow: hidden;
}

.loom-garment-tab-list {
    align-content: start;
    display: grid;
    flex: 1 1 auto;
    max-height: calc(var(--loom-garment-rail-max-height) - var(--loom-garment-rail-action-height));
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
}

.loom-garment-workspace-view .loom-garment-tab-list {
    max-height: var(--loom-garment-rail-max-height);
}

.loom-garment-tab {
    align-items: center;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(226, 222, 214, 0.82);
    border-left: 2px solid transparent;
    color: var(--loom-text-secondary);
    display: grid;
    gap: 0.34rem;
    justify-items: center;
    min-height: 5.3rem;
    padding: 0.58rem 0.28rem;
    text-align: center;
    transition: background-color var(--loom-transition-fast), border-color var(--loom-transition-fast), color var(--loom-transition-fast);
    width: 100%;
}

.loom-garment-tab:hover {
    background: rgba(255, 250, 243, 0.74);
    color: var(--loom-primary);
}

.loom-garment-tab.is-active {
    background: var(--loom-surface);
    border-left-color: var(--loom-accent);
    color: var(--loom-primary);
}

.loom-garment-tab-icon {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

.loom-garment-tab-icon img {
    height: 2rem;
    object-fit: contain;
    width: 2rem;
}

.loom-garment-tab-label {
    font-size: 0.72rem;
    font-weight: var(--loom-weight-row);
    line-height: 1.18;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.loom-garment-tab-state {
    display: none;
}

.loom-garment-tab-add {
    align-items: center;
    background: rgba(255, 255, 255, 0.62);
    border: 0;
    color: var(--loom-primary);
    display: inline-flex;
    flex: 0 0 var(--loom-garment-rail-action-height);
    justify-content: center;
    min-height: var(--loom-garment-rail-action-height);
    transition: background-color var(--loom-transition-fast), color var(--loom-transition-fast);
    width: 100%;
}

.loom-garment-tab-add:hover {
    background: var(--loom-accent-soft);
    color: var(--loom-accent);
}

.loom-garment-tab-add svg {
    height: 1.1rem;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
    width: 1.1rem;
}

.loom-garment-empty-state {
    align-self: center;
    display: grid;
    gap: 0;
    justify-self: center;
    max-width: 58rem;
    padding: var(--loom-space-4) 0;
    width: 100%;
}

.loom-garment-cta-grid {
    display: grid;
    gap: var(--loom-space-3);
}

.loom-garment-workspace.is-empty .loom-garment-cta-grid {
    gap: var(--loom-space-4);
    grid-template-columns: minmax(0, min(100%, 15rem));
    justify-content: center;
    justify-self: center;
}

.loom-garment-choice-grid {
    display: grid;
    gap: var(--loom-space-3);
    margin-top: var(--loom-space-3);
}

.loom-garment-choice {
    gap: var(--loom-space-3);
    justify-content: flex-start;
    min-height: 4.5rem;
    padding: 0.72rem;
    text-align: left;
}

.loom-garment-choice-cta {
    align-items: stretch;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(250, 247, 242, 0.86)),
        var(--loom-surface);
    border-color: rgba(209, 190, 171, 0.92);
    box-shadow:
        0 14px 30px rgba(43, 33, 26, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.68);
    flex-direction: column;
    gap: var(--loom-space-3);
    justify-content: flex-end;
    min-height: 14rem;
    overflow: hidden;
    padding: var(--loom-space-5) var(--loom-space-4) var(--loom-space-4);
    position: relative;
    text-align: center;
}

.loom-garment-choice-cta .loom-choice-garment-icon {
    align-self: stretch;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    flex: 1 1 auto;
    height: 8.7rem;
    max-height: 9.4rem;
    min-height: 7.4rem;
    overflow: visible;
    width: 100%;
}

.loom-garment-choice-cta .loom-choice-garment-icon img {
    height: 100%;
    max-height: 9.1rem;
    max-width: 10rem;
    opacity: 0.96;
    width: 100%;
}

.loom-garment-choice-cta .loom-garment-choice-copy {
    align-items: center;
    flex: 0 0 auto;
    justify-items: center;
    text-align: center;
}

.loom-garment-choice-cta .loom-garment-choice-copy strong {
    font-size: 1.06rem;
}

.loom-garment-choice-cta .loom-garment-choice-add {
    position: absolute;
    right: 0.8rem;
    top: 0.8rem;
    height: 2.35rem;
    width: 2.35rem;
}

.loom-garment-choice-compact {
    min-height: 3.9rem;
}

.loom-choice-garment-icon {
    height: 2.7rem;
    width: 2.7rem;
}

.loom-choice-garment-icon img {
    height: 1.72rem;
    width: 1.72rem;
}

.loom-garment-choice-copy {
    display: grid;
    flex: 1 1 auto;
    gap: 0.08rem;
    min-width: 0;
}

.loom-garment-choice-copy strong {
    color: var(--loom-primary);
    font-size: 1rem;
    font-weight: var(--loom-weight-strong);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.loom-garment-choice-copy small {
    color: var(--loom-text-muted);
    font-family: var(--loom-font-numeric);
    font-size: 0.72rem;
    font-weight: var(--loom-weight-strong);
    letter-spacing: 0.12em;
    line-height: 1.1;
    text-transform: uppercase;
}

.loom-garment-choice-add {
    align-items: center;
    background: rgba(184, 115, 51, 0.10);
    border: 1px solid rgba(184, 115, 51, 0.16);
    border-radius: var(--loom-radius-circle);
    color: var(--loom-accent);
    display: inline-flex;
    flex: 0 0 auto;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

.loom-garment-choice-add svg {
    height: 1rem;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
    width: 1rem;
}

.loom-garment-picker-panel {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(250, 247, 242, 0.98)),
        var(--loom-surface);
    border: 1px solid rgba(209, 204, 194, 0.86);
    border-radius: var(--loom-radius-lg);
    box-shadow: 0 20px 44px rgba(59, 31, 13, 0.16);
    left: var(--loom-garment-picker-left, 6rem);
    margin: 0;
    max-width: min(20rem, calc(100% - var(--loom-garment-picker-left, 6rem) - 0.75rem));
    padding: var(--loom-space-3);
    position: absolute;
    top: var(--loom-garment-picker-top, var(--loom-space-4));
    width: min(20rem, calc(100% - var(--loom-garment-picker-left, 6rem) - 0.75rem));
    z-index: 40;
}

.loom-garment-picker-panel-header {
    align-items: center;
    display: flex;
    gap: var(--loom-space-2);
    justify-content: space-between;
}

.loom-garment-picker-panel-header .section-title {
    font-size: 0.82rem;
    line-height: 1.2;
}

.loom-garment-picker-panel-header .loom-button-small {
    min-height: 2rem;
    padding: 0.28rem 0.46rem;
}

.loom-garment-picker-panel .loom-garment-choice-grid-compact {
    grid-template-columns: minmax(0, 1fr);
    margin-top: var(--loom-space-2);
}

.loom-garment-picker-panel .loom-garment-choice-compact {
    min-height: 3.35rem;
    padding: 0.58rem;
}

.loom-garment-picker-toggle.hidden,
.loom-garment-empty-state.hidden,
.loom-garment-picker-panel.hidden {
    display: none;
}

.loom-garment-lines {
    display: grid;
    gap: 0;
    grid-column: 2;
    min-width: 0;
}

.loom-measurement-line {
    overflow: hidden;
}

.loom-measurement-line[hidden] {
    display: none;
}

.loom-garment-lines .loom-measurement-line {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: var(--loom-space-4);
}

.loom-line-tab-icon-source {
    display: none;
}

.loom-line-header {
    align-items: center;
    border-bottom: 1px solid rgba(226, 222, 214, 0.72);
    display: flex;
    gap: var(--loom-space-3);
    justify-content: space-between;
    padding-bottom: var(--loom-space-3);
}

.loom-line-heading {
    min-width: 0;
}

.loom-line-garment-icon {
    border-radius: var(--loom-radius-lg);
    height: 3.2rem;
    width: 3.2rem;
}

.loom-line-garment-icon img {
    height: 2rem;
    width: 2rem;
}

.loom-line-title {
    color: var(--loom-primary);
    font-family: var(--loom-font-body);
    font-size: 1.1rem;
    font-weight: var(--loom-weight-strong);
    line-height: 1.18;
    overflow-wrap: anywhere;
}

.loom-line-subtitle {
    color: var(--loom-text-muted);
    font-size: 0.72rem;
    font-weight: var(--loom-weight-strong);
    letter-spacing: 0.07em;
    line-height: 1.2;
    margin-top: 0.18rem;
    text-transform: uppercase;
}

.loom-line-controls {
    align-items: end;
    display: flex;
    flex: 0 0 auto;
    gap: var(--loom-space-2);
}

.loom-line-quantity {
    flex: 0 0 5.15rem;
    gap: 0;
    min-width: 5.15rem;
}

.loom-quantity-input-wrap {
    display: block;
    position: relative;
    width: 100%;
}

.loom-line-quantity .field-input {
    min-height: 2.12rem;
    padding: 0.36rem 1.9rem 0.36rem 0.46rem;
    text-align: center;
}

.loom-quantity-suffix {
    color: var(--loom-text-muted);
    font-size: 0.64rem;
    font-weight: var(--loom-weight-strong);
    line-height: 1;
    pointer-events: none;
    position: absolute;
    right: 0.5rem;
    text-transform: uppercase;
    top: 50%;
    transform: translateY(-50%);
}

.loom-line-actions {
    align-items: center;
    display: flex;
    gap: 0.35rem;
}

.loom-line-icon-button {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.45rem;
    color: var(--loom-accent);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    height: 2.25rem;
    justify-content: center;
    line-height: 1;
    min-height: 2.25rem;
    padding: 0;
    transition: background var(--loom-transition-base), border-color var(--loom-transition-base), box-shadow var(--loom-transition-base), color var(--loom-transition-base), opacity var(--loom-transition-base);
    width: 2.25rem;
}

.loom-line-icon-button:hover,
.loom-line-icon-button:focus-visible {
    background: rgba(255, 253, 249, 0.72);
    border-color: currentColor;
    box-shadow: 0 0 0 1px rgba(43, 33, 26, 0.04);
    outline: 0;
}

.loom-line-icon-button:disabled,
.loom-line-icon-button[aria-disabled="true"] {
    color: var(--loom-text-muted);
    cursor: not-allowed;
    opacity: 0.48;
}

.loom-line-icon-button:disabled:hover,
.loom-line-icon-button[aria-disabled="true"]:hover {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.loom-line-remove {
    color: var(--loom-error);
}

.loom-line-icon-button svg {
    height: 1.08rem;
    stroke: currentColor;
    stroke-width: 2.3;
    width: 1.08rem;
}

.loom-line-alert {
    margin-top: var(--loom-space-4);
}

.loom-line-alert-content {
    align-items: center;
    display: grid;
    gap: var(--loom-space-3);
}

.loom-line-alert-actions {
    display: grid;
    gap: var(--loom-space-2);
}

.loom-previous-helper {
    align-items: center;
    background: rgba(255, 253, 249, 0.78);
    border: 1px solid rgba(184, 115, 51, 0.18);
    border-radius: var(--loom-radius-md);
    box-shadow: 0 1px 2px rgba(43, 33, 26, 0.03);
    color: var(--loom-text-primary);
    display: grid;
    gap: var(--loom-space-3);
    grid-template-columns: auto minmax(0, 1fr);
    margin-top: var(--loom-space-3);
    padding: 0.72rem 0.82rem;
}

.loom-previous-helper-icon {
    align-items: center;
    background: rgba(184, 115, 51, 0.10);
    border: 1px solid rgba(184, 115, 51, 0.18);
    border-radius: var(--loom-radius-circle);
    color: var(--loom-accent);
    display: inline-flex;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

.loom-previous-helper-icon svg {
    height: 1rem;
    stroke: currentColor;
    stroke-width: 2.3;
    width: 1rem;
}

.loom-previous-helper-copy {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.loom-previous-helper-title,
.loom-previous-helper-meta {
    margin: 0;
    min-width: 0;
}

.loom-previous-helper-title {
    color: var(--loom-primary);
    font-size: 0.86rem;
    font-weight: var(--loom-weight-strong);
    line-height: 1.25;
}

.loom-previous-helper-meta {
    color: var(--loom-text-muted);
    font-family: var(--loom-font-numeric);
    font-size: 0.78rem;
    font-weight: var(--loom-weight-row);
    line-height: 1.25;
}

.loom-previous-helper-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--loom-space-2);
    grid-column: 2;
    min-width: 0;
}

.loom-previous-helper .loom-button-small {
    min-height: 2.05rem;
    padding: 0.38rem 0.62rem;
    width: auto;
}

@media (min-width: 720px) {
    .loom-previous-helper {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .loom-previous-helper-actions {
        grid-column: auto;
        justify-content: flex-end;
    }
}

.loom-line-fields {
    display: grid;
    gap: var(--loom-space-4);
    margin-top: var(--loom-space-4);
}

.loom-line-field-group {
    display: grid;
    gap: var(--loom-space-2);
}

.loom-line-field-group-ungrouped {
    gap: 0.62rem;
}

.loom-line-field-grid {
    display: grid;
    gap: 0.62rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.loom-line-field-grid > .field-label,
.loom-line-field-grid > .loom-check-tile-row,
.loom-line-field-grid > .loom-segmented-field {
    grid-column: 1 / -1;
}

.loom-check-tile-row {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
}

.loom-line-field-wide {
    grid-column: 1 / -1;
}

.loom-line-textarea {
    resize: none;
}

.loom-measurement-cell {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(250, 247, 242, 0.88)),
        var(--loom-surface);
    border: 1px solid rgba(209, 204, 194, 0.82);
    border-radius: 0.55rem;
    display: grid;
    gap: 0.36rem;
    min-height: 4.85rem;
    min-width: 0;
    padding: 0.48rem;
    transition: border-color var(--loom-transition-base), box-shadow var(--loom-transition-base), background var(--loom-transition-base);
}

.loom-measurement-cell:focus-within {
    background: var(--loom-surface);
    border-color: rgba(184, 115, 51, 0.42);
    box-shadow: 0 0 0 2px rgba(184, 115, 51, 0.10);
}

.loom-measurement-cell-label {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--loom-text-secondary);
    display: -webkit-box;
    font-size: 0.68rem;
    font-weight: var(--loom-weight-strong);
    letter-spacing: 0.055em;
    line-height: 1.12;
    min-height: 1.55rem;
    overflow: hidden;
    text-transform: uppercase;
}

.loom-measurement-input.field-input {
    background: rgba(255, 255, 255, 0.74);
    border-color: rgba(209, 204, 194, 0.68);
    border-radius: 0.42rem;
    font-family: var(--loom-font-numeric);
    font-size: 1.12rem;
    font-weight: var(--loom-weight-strong);
    min-height: 2.25rem;
    padding: 0.36rem 0.42rem;
    text-align: center;
}

.loom-measurement-input.field-input:focus {
    background: #fffdf9;
    border-color: rgba(184, 115, 51, 0.48);
    box-shadow: none;
}

.loom-measurement-cell-readonly {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(250, 247, 242, 0.76)),
        var(--loom-surface);
}

.loom-readonly-measurement-value {
    align-items: center;
    background: rgba(255, 255, 255, 0.68);
    border: 1px solid rgba(209, 204, 194, 0.58);
    border-radius: 0.42rem;
    color: var(--loom-primary);
    display: flex;
    font-family: var(--loom-font-numeric);
    font-size: 1.12rem;
    font-weight: var(--loom-weight-strong);
    justify-content: center;
    min-height: 2.25rem;
    padding: 0.36rem 0.42rem;
    text-align: center;
}

.loom-segmented-field {
    border: 0;
    display: grid;
    gap: 0;
    margin: 0;
    min-width: 0;
    padding: 0;
}

.loom-segmented-label {
    color: var(--loom-text-secondary);
    display: block;
    font-size: 0.74rem;
    font-weight: var(--loom-weight-strong);
    letter-spacing: 0.08em;
    line-height: 1.25;
    margin-bottom: 0.5rem;
    padding: 0;
    text-transform: uppercase;
}

.loom-segmented-options {
    background: rgba(255, 253, 249, 0.46);
    border: 1px solid rgba(209, 204, 194, 0.58);
    border-radius: 0.85rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.74),
        0 1px 2px rgba(43, 33, 26, 0.03);
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: 0.22rem;
    justify-self: stretch;
    max-width: 100%;
    padding: 0.24rem;
    width: 100%;
}

.loom-segmented-option {
    cursor: pointer;
    display: inline-flex;
    flex: 1 1 8.25rem;
    max-width: 100%;
    min-width: 0;
}

.loom-segmented-option input {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.loom-segmented-option-shell {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.68rem;
    box-shadow: none;
    color: var(--loom-text-secondary);
    display: flex;
    font-size: 0.95rem;
    font-weight: var(--loom-weight-row);
    gap: 0.65rem;
    justify-content: flex-start;
    line-height: 1.2;
    max-width: 100%;
    min-height: 3.25rem;
    min-width: 8.25rem;
    padding: 0.75rem;
    text-align: left;
    transition:
        border-color var(--loom-transition-base),
        box-shadow var(--loom-transition-base),
        background var(--loom-transition-base),
        color var(--loom-transition-base);
    width: 100%;
}

.loom-segmented-option-mark {
    background: rgba(255, 253, 249, 0.82);
    border: 1.5px solid rgba(119, 109, 96, 0.34);
    border-radius: var(--loom-radius-circle);
    box-shadow: 0 1px 2px rgba(43, 33, 26, 0.06);
    flex: 0 0 auto;
    height: 1.1rem;
    position: relative;
    transition:
        border-color var(--loom-transition-base),
        box-shadow var(--loom-transition-base),
        background var(--loom-transition-base);
    width: 1.1rem;
}

.loom-segmented-option-mark::after {
    background: var(--loom-accent);
    border-radius: inherit;
    content: "";
    inset: 0.24rem;
    opacity: 0;
    position: absolute;
    transform: scale(0.35);
    transition:
        opacity var(--loom-transition-base),
        transform var(--loom-transition-base);
}

.loom-segmented-option-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.loom-segmented-option:hover .loom-segmented-option-shell {
    background: rgba(255, 253, 249, 0.62);
    border-color: rgba(184, 115, 51, 0.18);
}

.loom-segmented-option input:checked + .loom-segmented-option-shell {
    background: #fffdf9;
    border-color: rgba(184, 115, 51, 0.48);
    box-shadow: 0 2px 8px rgba(43, 33, 26, 0.10);
    color: var(--loom-primary);
    font-weight: var(--loom-weight-strong);
}

.loom-segmented-option input:checked + .loom-segmented-option-shell .loom-segmented-option-mark {
    background: #fffdf9;
    border-color: var(--loom-accent);
    box-shadow: 0 0 0 3px rgba(184, 115, 51, 0.12);
}

.loom-segmented-option input:checked + .loom-segmented-option-shell .loom-segmented-option-mark::after {
    opacity: 1;
    transform: scale(1);
}

.loom-segmented-option input:focus-visible + .loom-segmented-option-shell {
    border-color: rgba(184, 115, 51, 0.48);
    box-shadow: var(--loom-focus-ring);
}

.check-tile span {
    min-width: 0;
}

.loom-readonly-choice-field {
    gap: 0.38rem;
}

.loom-readonly-choice-field .loom-segmented-label {
    margin-bottom: 0;
}

.loom-readonly-choice-value {
    align-items: center;
    background: rgba(255, 253, 249, 0.62);
    border: 1px solid rgba(209, 204, 194, 0.58);
    border-radius: 0.68rem;
    color: var(--loom-primary);
    display: flex;
    font-size: 0.95rem;
    font-weight: var(--loom-weight-strong);
    min-height: 3.25rem;
    padding: 0.75rem;
}

.loom-readonly-check-tile {
    cursor: default;
    justify-content: space-between;
    min-width: min(100%, 10rem);
}

.loom-readonly-check-tile strong {
    color: var(--loom-primary);
    font-weight: var(--loom-weight-strong);
}

.loom-view-sample-number {
    color: var(--loom-primary);
    font-family: var(--loom-font-numeric);
}

.loom-readonly-quantity-value.field-input {
    align-items: center;
    color: var(--loom-primary);
    display: flex;
    font-family: var(--loom-font-numeric);
    font-weight: var(--loom-weight-strong);
    justify-content: center;
}

.loom-line-status-section {
    border-top: 1px solid rgba(226, 222, 214, 0.72);
    display: grid;
    gap: var(--loom-space-3);
    margin-top: var(--loom-space-4);
    padding-top: var(--loom-space-4);
}

.loom-line-status-heading {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--loom-space-2);
    justify-content: space-between;
}

.loom-line-status-list {
    display: grid;
    gap: 0.62rem;
}

.loom-line-status-row {
    align-items: center;
    background: rgba(255, 253, 249, 0.48);
    border: 1px solid rgba(209, 204, 194, 0.58);
    border-radius: var(--loom-radius-md);
    column-gap: var(--loom-space-3);
    display: grid;
    grid-template-columns: minmax(8.25rem, auto) minmax(0, 1fr);
    padding: 0.62rem;
}

.loom-line-status-row-meta {
    align-items: start;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0.34rem;
    min-width: 0;
}

.loom-line-status-piece {
    color: var(--loom-text-primary);
    font-weight: var(--loom-weight-strong);
}

.loom-line-status-stepper {
    min-width: 0;
}

.loom-line-status-stepper-form,
.loom-line-status-stepper.is-readonly {
    background: rgba(255, 255, 255, 0.56);
    border: 1px solid rgba(209, 204, 194, 0.52);
    border-radius: 0.78rem;
    display: grid;
    gap: 0.18rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 0.18rem;
}

.loom-line-status-step {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.62rem;
    color: var(--loom-text-muted);
    display: flex;
    font: inherit;
    gap: 0.42rem;
    justify-content: center;
    min-height: 2.38rem;
    min-width: 0;
    padding: 0.42rem 0.5rem;
    text-align: center;
    transition:
        background-color var(--loom-transition-fast),
        border-color var(--loom-transition-fast),
        color var(--loom-transition-fast),
        box-shadow var(--loom-transition-fast);
}

button.loom-line-status-step:not(:disabled) {
    cursor: pointer;
}

button.loom-line-status-step:not(:disabled):hover {
    background: rgba(255, 253, 249, 0.76);
    border-color: rgba(184, 115, 51, 0.24);
    color: var(--loom-primary);
}

.loom-line-status-step:disabled {
    cursor: default;
}

.loom-line-status-step-dot {
    background: rgba(119, 109, 96, 0.28);
    border-radius: var(--loom-radius-circle);
    flex: 0 0 auto;
    height: 0.52rem;
    width: 0.52rem;
}

.loom-line-status-step-label {
    font-size: 0.76rem;
    font-weight: var(--loom-weight-strong);
    line-height: 1.1;
    min-width: 0;
}

.loom-line-status-step.is-complete {
    color: var(--loom-text-secondary);
}

.loom-line-status-step.is-complete .loom-line-status-step-dot {
    background: rgba(39, 115, 80, 0.68);
}

.loom-line-status-step.is-current {
    background: #fffdf9;
    border-color: rgba(184, 115, 51, 0.42);
    box-shadow: 0 2px 8px rgba(43, 33, 26, 0.08);
    color: var(--loom-primary);
}

.loom-line-status-step.is-current .loom-line-status-step-dot {
    background: var(--loom-accent);
    box-shadow: 0 0 0 3px rgba(184, 115, 51, 0.14);
}

.loom-line-status-form {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--loom-space-2);
    margin-top: var(--loom-space-2);
}

.loom-line-status-form .loom-select-control {
    flex: 1 1 10rem;
}

@media (max-width: 719px) {
    .loom-line-status-row {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--loom-space-2);
    }

    .loom-line-status-stepper-form,
    .loom-line-status-stepper.is-readonly {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.slip-band {
    background: var(--loom-primary);
    border-radius: var(--loom-radius-md);
    color: #fffaf3;
    display: inline-flex;
    font-size: 1.1rem;
    font-weight: var(--loom-weight-strong);
    letter-spacing: 0.08em;
    min-height: 2.8rem;
    padding: 0.6rem 1rem;
    text-transform: uppercase;
}

.slip-grid {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.slip-cell {
    background: var(--loom-surface);
    border: 1px solid var(--loom-primary);
    display: grid;
    min-height: 5.35rem;
}

.slip-cell span {
    align-items: center;
    background: var(--loom-accent-soft);
    border-bottom: 1px solid var(--loom-primary);
    color: var(--loom-primary);
    display: flex;
    font-size: 0.72rem;
    font-weight: var(--loom-weight-strong);
    justify-content: center;
    min-height: 2.05rem;
    padding: 0.25rem;
    text-align: center;
}

.slip-cell input,
.slip-cell strong {
    align-items: center;
    background: var(--loom-surface);
    border: 0;
    color: var(--loom-text-primary);
    display: flex;
    font-family: var(--loom-font-numeric);
    font-size: 1.45rem;
    font-variant-numeric: tabular-nums;
    font-weight: var(--loom-weight-strong);
    justify-content: center;
    min-height: 3rem;
    outline: none;
    padding: 0.35rem;
    text-align: center;
    width: 100%;
}

.measurement-form {
    padding-bottom: calc(7.25rem + env(safe-area-inset-bottom));
}

.form-actions-bar {
    background: rgba(250, 247, 242, 0.97);
    border-top: 1px solid var(--loom-border);
    bottom: 0;
    left: 0;
    padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
    position: sticky;
    right: 0;
    z-index: 30;
}

.form-actions-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 0.82fr 1.18fr;
}

.loom-select-control {
    background: var(--loom-surface);
    border: 1px solid var(--loom-border-strong);
    border-radius: var(--loom-radius-md);
    color: var(--loom-text-primary);
    font-size: 0.86rem;
    font-weight: var(--loom-weight-row);
    min-height: 2.45rem;
    padding: 0.55rem 0.7rem;
}

@media (max-width: 420px) {
    .loom-app-header {
        top: var(--loom-space-2);
        width: min(calc(100% - 1rem), 84rem);
    }

    .loom-app-header-inner {
        min-height: 3.75rem;
        padding: 0.62rem 0.68rem 0.62rem 0.8rem;
    }

    .loom-header-account {
        gap: 0.25rem;
    }

    .loom-header-brand {
        gap: 0.12rem;
        max-width: 7.5rem;
    }

    .loom-header-logo {
        max-height: 1.75rem;
        max-width: 7.5rem;
    }

    .loom-header-codex-line {
        font-size: 0.45rem;
        letter-spacing: 0.12em;
        max-width: 7.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .loom-branch-trigger,
    .loom-branch-static {
        min-height: 2.35rem;
        max-width: 7.9rem;
        padding: 0.24rem 0.34rem 0.24rem 0.24rem;
    }

    .loom-location-mark {
        height: 1.78rem;
        width: 1.78rem;
    }

    .loom-location-mark svg {
        height: 0.9rem;
        width: 0.9rem;
    }

    .loom-branch-shop-name {
        display: none;
    }

    .loom-branch-location {
        font-size: 0.68rem;
        margin-top: 0;
    }

    .loom-header-divider {
        height: 1.9rem;
    }

    .loom-header-user {
        max-width: 4.6rem;
    }

    .loom-user-menu-trigger {
        gap: 0.38rem;
        min-height: 2.35rem;
        padding-right: 0.38rem;
    }

    .loom-user-avatar {
        font-size: 0.82rem;
        height: 1.85rem;
        width: 1.85rem;
    }

    .loom-user-chevron {
        height: 0.88rem;
        width: 0.88rem;
    }

    .loom-user-menu-panel {
        min-width: 8.5rem;
    }

    .field-input[type="search"] {
        font-size: 0.88rem;
        padding-left: 0.72rem;
        padding-right: 0.72rem;
    }
}

@media (max-width: 639px) {
    .loom-search-toolbar {
        align-items: stretch;
    }

    .loom-search-toolbar .loom-search-box {
        flex: 1 1 100%;
        min-width: 100%;
    }

    .loom-search-toolbar .loom-filter-select {
        flex: 1 1 calc(33.333% - 0.4rem);
        min-width: 8.8rem;
    }

    .loom-search-toolbar .loom-clear-filters-button {
        flex: 0 0 2.7rem;
    }

    .paper-card.loom-login-card {
        -webkit-backdrop-filter: blur(14px) saturate(108%);
        backdrop-filter: blur(14px) saturate(108%);
        background:
            linear-gradient(145deg, rgba(255, 250, 243, 0.96), rgba(250, 241, 229, 0.90)),
            rgba(255, 250, 243, 0.94);
    }
}

@media (min-width: 640px) {
    .loom-app-container {
        padding-left: var(--loom-space-6);
        padding-right: var(--loom-space-6);
    }

    .loom-dashboard-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .loom-dashboard-main {
        padding-left: var(--loom-space-6);
        padding-right: var(--loom-space-6);
    }

    .loom-app-main {
        padding-bottom: var(--loom-space-6);
        padding-top: 6.4rem;
    }

    .loom-login-screen {
        padding: var(--loom-space-6);
    }

    .loom-login-card {
        max-width: 27rem;
    }

    .loom-form-hero {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .loom-form-number {
        justify-self: end;
    }

    .loom-form-hero-card {
        gap: var(--loom-space-4);
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .loom-form-hero-context {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .loom-workflow-hero-context {
        grid-column: auto;
        grid-template-columns: minmax(0, auto);
        justify-self: end;
        min-width: 0;
    }

    .loom-workflow-hero-context .loom-search-mode-switch {
        justify-self: end;
    }

    .loom-form-hero-context .loom-form-number {
        justify-self: stretch;
    }

    .loom-garment-workspace-header {
        align-items: stretch;
    }

    .loom-garment-workspace {
        grid-template-columns: minmax(5.8rem, 6.55rem) minmax(0, 1fr);
        padding: 0;
    }

    .loom-garment-workspace.is-empty {
        grid-template-columns: minmax(0, 1fr);
        padding: 0;
    }

    .loom-garment-tab {
        min-height: 5.55rem;
        padding: 0.66rem 0.38rem;
    }

    .loom-garment-tab-label {
        font-size: 0.78rem;
    }

    .loom-garment-workspace.is-empty .loom-garment-cta-grid {
        grid-template-columns: repeat(2, minmax(12.5rem, 14.5rem));
    }

    .loom-customer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .loom-customer-strip .loom-customer-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: 0.72rem;
    }

    .loom-customer-strip .loom-customer-field-mobile,
    .loom-customer-strip .loom-customer-field-name {
        grid-column: span 6;
    }

    .loom-customer-strip .loom-customer-field-delivery {
        grid-column: span 5;
    }

    .loom-customer-strip .loom-customer-field-advance {
        grid-column: span 3;
    }

    .loom-customer-strip .loom-customer-field-notes {
        grid-column: span 4;
    }

    .loom-customer-strip .loom-customer-field-mobile .loom-customer-lookup-status {
        max-width: calc(100vw - 3rem);
        width: min(20rem, calc(200% + 0.72rem));
    }

    .loom-form-grid,
    .loom-garment-cta-grid,
    .loom-garment-choice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .loom-line-header {
        align-items: center;
    }

    .loom-line-controls {
        align-items: end;
        display: flex;
    }

    .loom-line-alert-content {
        display: flex;
        justify-content: space-between;
    }

    .loom-line-alert-actions {
        display: flex;
        flex: 0 0 auto;
    }

    .loom-line-field-grid {
        grid-template-columns: repeat(auto-fit, minmax(6.45rem, 1fr));
    }

    .loom-line-field-grid > .field-label,
    .loom-line-field-grid > .loom-check-tile-row,
    .loom-line-field-grid > .loom-segmented-field {
        grid-column: span 2;
    }

    .loom-line-field-grid > .loom-line-field-wide {
        grid-column: 1 / -1;
    }

    .loom-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .measurement-form {
        padding-bottom: 0;
    }

    .form-actions-bar {
        background: transparent;
        border-top: 0;
        padding: 0;
        position: static;
    }

    .form-actions-grid {
        display: flex;
        justify-content: flex-end;
    }

    .touch-button,
    .loom-button {
        width: auto;
    }

    .slip-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .slip-cell {
        min-height: 6.4rem;
    }

    .slip-cell span {
        font-size: 0.86rem;
        min-height: 2.4rem;
        padding: 0.35rem;
    }

    .slip-cell input,
    .slip-cell strong {
        font-size: 1.8rem;
        min-height: 3.7rem;
    }
}

@media (min-width: 760px) and (max-width: 899px) {
    .loom-view-hero-card .loom-form-hero-context {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        justify-self: stretch;
        min-width: 0;
    }

    .loom-customer-strip .loom-customer-grid {
        column-gap: 0.62rem;
        grid-template-columns:
            minmax(7.5rem, 0.78fr)
            minmax(8.5rem, 1fr)
            minmax(9rem, 0.84fr)
            minmax(6.25rem, 0.66fr)
            minmax(8.2rem, 1.01fr);
    }

    .loom-customer-strip-view .loom-customer-strip-view-layout {
        align-items: end;
        column-gap: 0.62rem;
        grid-template-columns: minmax(0, 1fr) 2.25rem;
    }

    .loom-customer-strip-view .loom-customer-grid {
        grid-template-columns:
            minmax(7.1rem, 0.82fr)
            minmax(8rem, 1fr)
            minmax(7.8rem, 0.7fr)
            minmax(5.35rem, 0.52fr)
            minmax(7.75rem, 0.96fr);
    }

    .loom-customer-strip-view .loom-customer-strip-actions {
        flex-wrap: nowrap;
        justify-content: flex-end;
        min-width: 2.25rem;
    }

    .loom-customer-strip .loom-customer-field-mobile,
    .loom-customer-strip .loom-customer-field-name,
    .loom-customer-strip .loom-customer-field-delivery,
    .loom-customer-strip .loom-customer-field-advance,
    .loom-customer-strip .loom-customer-field-notes {
        grid-column: auto;
    }

    .loom-customer-strip .loom-customer-field-mobile .loom-customer-lookup-status {
        width: min(20rem, calc(100% + 9.5rem));
    }
}

@media (max-width: 899px) {
    .loom-dashboard-left {
        display: contents;
    }

    .loom-dashboard-hero {
        order: 1;
    }

    .loom-dashboard-context-stacked {
        display: grid;
    }

    .loom-dashboard-context-rail {
        display: none;
    }

    .loom-dashboard-rail {
        order: 2;
    }

    .loom-dashboard-recent {
        order: 3;
    }
}

@media (min-width: 560px) and (max-width: 899px) and (orientation: portrait) {
    .loom-dashboard-main.loom-app-main {
        padding-top: 7rem;
    }
}

@media (min-width: 900px) {
    .loom-app-container.loom-workflow-main,
    .loom-app-container.loom-form-main {
        width: min(calc(100% - 4rem), var(--loom-width-form));
    }

    .loom-measurement-workbench {
        gap: var(--loom-space-5);
        grid-template-columns: minmax(0, 1fr);
    }

    .loom-form-hero-context {
        grid-column: auto;
        grid-template-columns: minmax(12rem, 1fr) minmax(10.5rem, 0.78fr);
        justify-self: end;
        min-width: min(100%, 25rem);
    }

    .loom-form-hero-context .loom-form-number {
        justify-self: stretch;
    }

    .loom-customer-strip-view-layout {
        align-items: end;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .loom-customer-strip-actions {
        justify-content: flex-end;
    }

    .loom-view-hero-card {
        align-items: center;
        grid-template-columns: auto minmax(0, 1fr) minmax(22rem, 27rem);
    }

    .loom-view-hero-card .loom-form-hero-copy {
        grid-column: 2;
        justify-self: start;
    }

    .loom-view-hero-card .loom-form-hero-context {
        grid-column: 3;
        grid-row: 1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        justify-self: end;
        min-width: min(100%, 27rem);
    }

    .loom-garment-workspace {
        grid-template-columns: minmax(6.6rem, 7.4rem) minmax(0, 1fr);
    }

    .loom-garment-workspace.is-empty {
        grid-template-columns: minmax(0, 1fr);
    }

    .loom-customer-grid {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(0, 1fr)
            minmax(0, 0.86fr)
            minmax(0, 0.7fr)
            minmax(0, 1.28fr);
    }

    .loom-customer-strip .loom-customer-grid {
        column-gap: 0.72rem;
        grid-template-columns:
            minmax(8.5rem, 0.82fr)
            minmax(10rem, 1fr)
            minmax(9.5rem, 0.84fr)
            minmax(6.5rem, 0.62fr)
            minmax(9.75rem, 1.08fr);
    }

    .loom-customer-strip-view .loom-customer-grid {
        grid-template-columns:
            minmax(8.5rem, 0.86fr)
            minmax(10rem, 1fr)
            minmax(7.8rem, 0.58fr)
            minmax(5.35rem, 0.42fr)
            minmax(11.2rem, 1.28fr);
    }

    .loom-customer-strip .loom-customer-field-mobile,
    .loom-customer-strip .loom-customer-field-name,
    .loom-customer-strip .loom-customer-field-delivery,
    .loom-customer-strip .loom-customer-field-advance,
    .loom-customer-strip .loom-customer-field-notes {
        grid-column: auto;
    }

    .loom-customer-strip .loom-customer-field-mobile .loom-customer-lookup-status {
        max-width: calc(100vw - 7rem);
        width: min(20rem, calc(100% + 11rem));
    }

    .loom-garment-cta-grid,
    .loom-garment-choice-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .loom-line-field-grid {
        grid-template-columns: repeat(auto-fit, minmax(6.65rem, 1fr));
    }

    .loom-garment-workspace.is-empty .loom-garment-cta-grid {
        grid-template-columns: repeat(auto-fit, minmax(12.5rem, 14.5rem));
        max-width: 46rem;
        width: 100%;
    }

    .loom-dashboard-backdrop {
        background:
            linear-gradient(90deg, rgba(250, 247, 242, 0.04) 0%, rgba(250, 247, 242, 0.18) 7rem, rgba(250, 247, 242, 0.90) 15rem, rgba(250, 247, 242, 0.98) 24rem, var(--loom-background) 36rem, var(--loom-background) 100%),
            linear-gradient(180deg, rgba(250, 247, 242, 0.16) 0%, rgba(250, 247, 242, 0.38) 42%, rgba(245, 239, 229, 0.90) 100%),
            radial-gradient(ellipse at 22rem 12rem, rgba(255, 250, 243, 0.70), transparent 22rem),
            var(--loom-dashboard-bg) left top / auto min(56rem, 100vh) no-repeat,
            var(--loom-background);
        display: block;
        inset: 0;
        pointer-events: none;
        position: fixed;
        z-index: 0;
    }

    .loom-dashboard-stage {
        padding: var(--loom-space-5);
        z-index: 1;
    }

    .loom-dashboard-stage::before {
        display: none;
    }

    .loom-dashboard-stage > * {
        position: relative;
        z-index: 1;
    }

    .loom-login-screen {
        justify-content: flex-end;
        padding: var(--loom-space-8) clamp(2rem, 6vw, 5.5rem);
    }

    .loom-login-screen::before {
        background-position: center;
    }

    .loom-login-screen::after {
        background:
            linear-gradient(90deg, rgba(43, 33, 26, 0.04) 0%, rgba(250, 247, 242, 0.08) 42%, rgba(250, 247, 242, 0.64) 66%, rgba(250, 247, 242, 0.86) 100%),
            linear-gradient(180deg, rgba(250, 247, 242, 0.06), rgba(245, 239, 229, 0.24));
    }

    .loom-login-shell {
        justify-content: flex-end;
    }

    .loom-login-card {
        max-width: 28rem;
    }

    .loom-dashboard-content {
        grid-template-columns: minmax(0, 1fr) minmax(21rem, 25rem);
    }

    .loom-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1180px) {
    .loom-app-container {
        padding-left: var(--loom-space-8);
        padding-right: var(--loom-space-8);
        width: min(100%, var(--loom-width-app-wide));
    }

    .loom-dashboard-main {
        padding-left: var(--loom-space-8);
        padding-right: var(--loom-space-8);
        width: min(100%, var(--loom-width-workspace-wide));
    }

    .loom-measurement-workbench {
        grid-template-columns: minmax(0, 1fr);
    }

    .loom-app-main {
        padding-bottom: var(--loom-space-8);
        padding-top: 6.75rem;
    }

    .loom-dashboard-stage {
        grid-template-columns: var(--dashboard-side-width) minmax(0, 1fr);
        min-height: calc(100vh - 8.5rem);
        padding: var(--loom-space-6);
    }

    .loom-dashboard-visual {
        display: block;
        min-height: calc(100vh - 11.5rem);
    }
}

@media (min-width: 900px) {
    .slip-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .loom-workflow-hero-context {
        grid-template-columns: minmax(0, auto);
        justify-self: end;
        min-width: 0;
    }

    .loom-workflow-hero-context .loom-search-mode-switch {
        justify-self: end;
    }
}

@media print {
    @page {
        margin: 14mm;
    }

    header,
    .form-actions-bar,
    .loom-customer-strip-actions,
    .loom-line-status-form,
    .touch-button,
    .loom-button,
    button,
    a {
        display: none !important;
    }

    button.loom-line-status-step {
        display: flex !important;
    }

    body {
        background: #fff;
        color: #000;
    }

    main {
        max-width: none !important;
        padding: 0 !important;
    }

    .paper-card,
    .paper-panel,
    .loom-card,
    .paper-slip,
    .loom-slip {
        background: #fff !important;
        border-color: #7a7167 !important;
        box-shadow: none !important;
        break-inside: avoid;
    }

    .paper-slip,
    .loom-slip {
        border-left-width: 2px;
    }

    .measurement-box,
    .info-line {
        background: #fff !important;
        border-color: #9b9288 !important;
    }

    .status-chip {
        background: #fff !important;
        border-color: #777 !important;
        color: #000 !important;
    }
}