/* Technician Blazor portal — layout, cards, and in-bay touch targets.
   Phone (<768px): bottom nav + single-column stack + full-width CTAs.
   Tablet (768–1099): top nav + skinny centered app column.
   Desktop (≥1100px): wide board (multi-column cards, hub row).

   Chrome iOS: do NOT inherit the back-office locked shell (html/body overflow:hidden
   + max-height:100dvh). That clips the last cards behind the fixed bottom nav. */
html:has(.tech-root),
html:has(.tech-root) body {
    height: auto;
    min-height: 100%;
    overflow: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.tech-root {
    /* Keep in sync with .tech-bottom-nav content height (icon + label + workday status). */
    --tech-bottom-nav-height: 4.25rem;
    --tech-bottom-nav-offset: calc(var(--tech-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
    min-height: 100svh;
    min-height: 100dvh;
    background: var(--color-background);
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    font-family: var(--font-family-ui, var(--font-family-sans));
}

.tech-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    min-height: 3.25rem;
    width: 100%;
    padding: 0 1rem;
    background: var(--color-surface);
    color: var(--color-text-strong, var(--color-text));
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--elevation-0, none);
}

.tech-brand {
    font-weight: 600;
}

.tech-user {
    margin-left: auto;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.tech-main {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    margin: 0 auto;
}

.tech-container {
    padding-bottom: calc(var(--space-6) + var(--tech-bottom-nav-offset, 4.25rem));
}

/* Top nav — hidden on phone; shown from tablet up */
.tech-header-nav {
    display: none;
    align-items: center;
    gap: 0.35rem;
    margin-left: 1rem;
    min-width: 0;
}

.tech-header-nav__link {
    text-decoration: none;
    color: var(--color-text-muted);
    font-weight: 650;
    font-size: 0.9375rem;
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius-2);
    white-space: nowrap;
}

.tech-header-nav__link:hover {
    background: var(--color-surface-2, var(--color-surface-muted));
    color: var(--color-text-strong, var(--color-text));
}

.tech-header-nav__link.tech-nav--active {
    background: var(--color-primary-container);
    color: var(--color-text-strong, var(--color-text));
}

.tech-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3, 12px);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
}

.tech-card--work-order {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.tech-card--interactive {
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tech-card--interactive:hover,
.tech-card--interactive:focus-within {
    border-color: var(--color-primary);
    box-shadow: var(--elevation-1, 0 1px 3px rgba(0, 0, 0, 0.08));
}

.tech-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.tech-card__plate {
    font-size: 1.125rem;
    font-weight: 650;
    letter-spacing: 0.02em;
}

.tech-card__meta {
    margin: 0;
}

.tech-card__time {
    margin: 0;
}

.tech-card__cta {
    margin-top: var(--space-1);
}

.tech-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: 0;
}

.tech-page-header__title {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.15;
    margin: 0;
    color: var(--color-text-strong, var(--color-text));
}

.tech-page-header__subtitle {
    margin: var(--space-2) 0 0;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
}

.tech-page-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.tech-section {
    margin-bottom: 0;
}

.tech-section__title {
    font-size: 0.8125rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-2);
}

.tech-section__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.tech-lane-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

@media (max-width: 400px) {
    .tech-lane-grid {
        grid-template-columns: 1fr;
    }
}

.tech-lane-grid:has(> :only-child) {
    grid-template-columns: 1fr;
}

.tech-timer-banner {
    background: linear-gradient(135deg, #e8f1fb 0%, #f0f6fc 100%);
    border: 1px solid rgba(0, 102, 204, 0.2);
    border-radius: var(--radius-3, 14px);
    padding: var(--space-4);
    margin: 0 0 var(--space-4);
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.08);
    overflow: visible;
}

.tech-timer-strip {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    background: color-mix(in srgb, var(--color-success, #2e7d32) 14%, var(--color-surface, #1a2332));
    border: 1px solid color-mix(in srgb, var(--color-success, #2e7d32) 40%, transparent);
    border-radius: var(--radius-3, 14px);
    padding: 0.85rem 1rem;
    margin: 0 0 var(--space-4);
    box-shadow: var(--elevation-1, 0 1px 2px rgba(15, 23, 42, 0.08));
}

.tech-timer-strip__lead {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    min-width: 0;
}

.tech-timer-strip__pulse {
    width: 10px;
    height: 10px;
    margin-top: 0.45rem;
    border-radius: 50%;
    background: var(--color-success, #2e7d32);
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.5);
    animation: tech-pulse 1.8s ease-out infinite;
}

.tech-timer-strip__copy {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.tech-timer-strip__eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-success, #2e7d32);
}

.tech-timer-strip__title {
    font-weight: 750;
    font-size: 1.15rem;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-strong, var(--color-text));
    line-height: 1.2;
}

.tech-timer-strip__meta {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.tech-timer-strip__elapsed {
    flex-shrink: 0;
    font-size: 1.05rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    color: var(--color-success, #2e7d32);
    padding-top: 0.15rem;
}

.tech-timer-strip__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}

.tech-timer-strip__btn {
    min-height: 44px;
    width: 100%;
}

.tech-timer-strip--hero {
    padding: 1rem 1.1rem;
    margin-bottom: var(--space-3);
}

.tech-timer-strip--hero .tech-timer-strip__title {
    font-size: 1.35rem;
}

.tech-timer-strip--hero .tech-timer-strip__elapsed {
    font-size: 1.25rem;
}

.tech-timer-strip--hero .tech-timer-strip__btn {
    min-height: 48px;
}

.tech-bottom-nav__link--workday {
    flex-direction: column;
    gap: 0.1rem;
}

.tech-bottom-nav__workday {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    line-height: 1.15;
}

.tech-bottom-nav__status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.65rem;
    font-weight: 650;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.tech-bottom-nav__status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tech-bottom-nav__status-dot--present {
    background: var(--color-primary, #0066cc);
}

.tech-bottom-nav__status-dot--break {
    background: #f59e0b;
}

.tech-bottom-nav__status-dot--busy {
    background: var(--color-success, #2e7d32);
    box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.45);
    animation: tech-pulse 1.8s ease-out infinite;
}

.tech-bottom-nav__link--present .tech-bottom-nav__status {
    color: var(--color-primary, #0066cc);
}

.tech-bottom-nav__link--break .tech-bottom-nav__status {
    color: #b45309;
}

.tech-bottom-nav__link--busy .tech-bottom-nav__status {
    color: var(--color-success, #2e7d32);
}

.tech-bottom-nav__link--workday .tech-bottom-nav__label {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.tech-bottom-nav__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-success, #2e7d32);
    box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.45);
    animation: tech-pulse 1.8s ease-out infinite;
}

.tech-day-clock__prompt {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.tech-day-clock--idle {
    background: linear-gradient(135deg, var(--color-surface-2, #f4f4f5) 0%, var(--color-surface-muted, #eceff1) 100%);
    border-color: var(--color-border, rgba(0, 0, 0, 0.08));
    box-shadow: none;
}

.tech-day-clock--break {
    background: linear-gradient(135deg, var(--color-warning-surface, #fff8e1) 0%, var(--color-warning-surface, #fff3cd) 100%);
    border-color: var(--color-warning-border, rgba(245, 158, 11, 0.35));
}

.tech-day-clock--break .tech-timer-banner__pulse {
    background: #f59e0b;
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.45);
}

.tech-day-clock--working {
    background: linear-gradient(135deg, var(--color-success-surface, #e8f5e9) 0%, var(--color-success-surface, #f1f8f2) 100%);
    border-color: var(--color-success-border, rgba(46, 125, 50, 0.25));
}

.tech-timer-banner__main {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.tech-timer-banner__pulse {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-success, #2e7d32);
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.5);
    animation: tech-pulse 1.8s ease-out infinite;
}

@keyframes tech-pulse {
    0% { box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.45); }
    70% { box-shadow: 0 0 0 8px rgba(46, 125, 50, 0); }
    100% { box-shadow: 0 0 0 0 rgba(46, 125, 50, 0); }
}

.tech-timer-banner__copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tech-timer-banner__title {
    font-size: 1rem;
    font-weight: 650;
    color: var(--color-text-strong, var(--color-text));
}

.tech-timer-banner__meta {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.tech-timer-banner__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}

.tech-bottom-nav__link {
    text-decoration: none;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-2);
    padding: var(--space-1) var(--space-2);
    min-height: 48px;
    min-width: 0;
    flex: 1 1 0;
}

.tech-bottom-nav__link:hover {
    background: var(--color-surface-2, var(--color-surface-muted));
    color: var(--color-text-strong, var(--color-text));
}

.tech-bottom-nav__link.tech-nav--active {
    background: var(--color-primary-container);
    color: var(--color-primary);
}

.tech-bottom-nav__link.tech-nav--active .mud-icon-root {
    color: var(--color-primary);
}

.tech-schedule-day {
    margin: var(--space-5) 0 var(--space-3);
    font-size: 1rem;
    font-weight: 650;
    color: var(--color-text-strong, var(--color-text));
}

.tech-detail-hero {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3, 12px);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
}

.tech-detail-hero__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.tech-detail-hero__plate {
    font-size: 1.75rem;
    font-weight: 650;
    letter-spacing: 0.03em;
    margin: 0;
}

.tech-detail-sticky-bar {
    position: fixed;
    left: 0;
    right: 0;
    /* Sit on the nav: extend to the viewport bottom, reserve nav space as padding. */
    bottom: 0;
    z-index: 19;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: var(--space-3) var(--space-4);
    padding-bottom: calc(var(--space-3) + var(--tech-bottom-nav-offset, 4.25rem));
    background: color-mix(in srgb, var(--color-surface, #fff) 94%, transparent);
    border-top: 1px solid var(--color-border-subtle, rgba(0, 0, 0, 0.08));
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
    pointer-events: none;
}

.tech-detail-sticky-bar .staff-btn {
    width: 100%;
    max-width: 40rem;
    pointer-events: auto;
}

.tech-page:has(.tech-detail-sticky-bar) {
    /* Room for Afronden button + bottom nav */
    padding-bottom: calc(4.25rem + var(--tech-bottom-nav-offset, 4.25rem));
}

.tech-entry-log {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.tech-entry-day__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.tech-entry-day__date {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.tech-entry-day__total {
    font-size: 0.875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-strong, var(--color-text));
}

.tech-entry-day__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    border-left: 2px solid var(--color-border-subtle, rgba(0, 0, 0, 0.08));
    padding-left: var(--space-3);
}

.tech-entry-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0.15rem 0;
    margin: 0;
}

.tech-entry-card__main {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.tech-entry-card__lead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.tech-entry-card__duration {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-strong, var(--color-text));
}

.tech-entry-card__type {
    font-size: 0.6875rem;
    font-weight: 650;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.tech-entry-card__tech {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.tech-entry-card__desc {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text);
    line-height: 1.35;
}

.tech-entry-card__steps {
    list-style: none;
    margin: 0.2rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.tech-entry-card__step {
    margin: 0;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--color-text-strong, var(--color-text));
    background: color-mix(in srgb, var(--color-primary-container, #e8eef4) 55%, var(--color-surface, #fff));
    border: 1px solid color-mix(in srgb, var(--color-primary, #1f3a5f) 16%, transparent);
}

.tech-entry-card__notes {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
}

.tech-line-card {
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-2);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-2);
}

.tech-line-card:last-child {
    margin-bottom: 0;
}

.tech-line-card__title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 650;
    line-height: 1.35;
    color: var(--color-text-strong, var(--color-text));
}

.tech-line-card__meta {
    margin: var(--space-1) 0 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.tech-line-card__notes {
    margin: var(--space-2) 0 0;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}

.tech-job-card {
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-3, 12px);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.tech-job-card:last-child {
    margin-bottom: 0;
}

.tech-job-card--running {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px rgba(0, 102, 204, 0.15);
}

.tech-job-card--inspection {
    border-color: rgba(0, 102, 204, 0.35);
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 6%, transparent), var(--color-surface-muted));
}

.tech-job-card__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.tech-job-card__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.tech-job-card__title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 650;
    line-height: 1.35;
    color: var(--color-text-strong, var(--color-text));
}

.tech-job-card__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-primary, var(--color-primary, #0066cc));
    background: rgba(0, 102, 204, 0.12);
    border: 1px solid rgba(0, 102, 204, 0.22);
    line-height: 1.4;
}

.tech-job-card__meta,
.tech-job-card__notes {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.tech-required {
    color: var(--color-danger, #c62828);
}

.tech-job-card__subtitle {
    margin: 0 0 var(--space-2);
    font-size: 0.8125rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

.tech-job-card__materials {
    margin: 0 0 var(--space-3, 0.75rem);
    padding: var(--space-3, 0.75rem);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface-muted, #f5f5f7);
}

.tech-job-materials {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.tech-job-materials__item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.5rem;
    align-items: baseline;
    font-size: 0.9375rem;
    line-height: 1.35;
}

.tech-job-materials__qty {
    font-weight: 700;
    color: var(--color-text-strong, #1d1d1f);
    font-variant-numeric: tabular-nums;
}

.tech-job-materials__name {
    color: var(--color-text, #424245);
    min-width: 0;
}

.tech-job-materials__source {
    font-size: 0.6875rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 0.15rem 0.4rem;
    border-radius: 999px;
    white-space: nowrap;
}

.tech-job-materials__source--stock {
    color: var(--color-success, #248a3d);
    background: color-mix(in srgb, var(--color-success, #248a3d) 12%, transparent);
}

.tech-job-materials__source--order {
    color: var(--color-primary, #0066cc);
    background: color-mix(in srgb, var(--color-primary, #0066cc) 10%, transparent);
}

.tech-job-card__media-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.tech-job-card__media-actions .tech-job-card__media-btn {
    flex: 1 1 100%;
    min-height: 48px;
    justify-content: center;
}

.tech-job-card__media-btn {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.tech-job-media-pending {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.tech-job-media-pending__item {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.tech-photo-card__video-badge {
    position: absolute;
    bottom: var(--space-2);
    left: var(--space-2);
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
}

.tech-timer-banner__job {
    font-weight: 600;
}

.tech-stop-dialog__job {
    margin: var(--space-2) 0 0;
    font-weight: 600;
    color: var(--color-text-strong, var(--color-text));
}

.tech-settings-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.tech-settings-list__row {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.tech-settings-list__label {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

.tech-settings-list__value {
    margin: 0;
    font-size: 1rem;
    color: var(--color-text-strong, var(--color-text));
}

.tech-settings-logout {
    width: 100%;
    min-height: 48px;
    margin-top: var(--space-2);
    text-align: center;
    text-decoration: none;
}

.tech-settings-save {
    width: 100%;
    min-height: 48px;
    margin-top: var(--space-3);
}

.tech-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.tech-form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.tech-form-field .validation-message,
.tech-form-field .ValidationMessage {
    font-size: 0.8125rem;
    color: var(--color-danger, #b42318);
}

.tech-form-error {
    margin: 0 0 var(--space-2);
    color: var(--color-danger, #b42318);
    font-size: 0.9375rem;
}

.tech-form-success {
    margin: 0 0 var(--space-2);
    color: var(--color-success, #067647);
    font-size: 0.9375rem;
}

.tech-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-primary-container, rgba(0, 102, 204, 0.12));
    color: var(--color-primary-ink, var(--color-primary));
    font-weight: 750;
    letter-spacing: 0.02em;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid transparent;
}

.tech-avatar--sm {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.625rem;
}

.tech-avatar--lg {
    width: 4.5rem;
    height: 4.5rem;
    font-size: 1.25rem;
}

.tech-avatar__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tech-avatar-editor {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.tech-avatar-editor__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 10rem;
}

.tech-avatar-upload {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    text-align: center;
}

.tech-avatar-upload__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.tech-header-avatar {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(0, 102, 204, 0.12);
    color: var(--color-primary);
    font-size: 0.6875rem;
    font-weight: 750;
    letter-spacing: 0.02em;
    text-decoration: none;
    flex-shrink: 0;
    border: 1px solid transparent;
    overflow: hidden;
}

.tech-header-avatar:hover {
    background: rgba(0, 102, 204, 0.2);
}

.tech-header-avatar:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.tech-bottom-nav__link--settings {
    flex-direction: column;
    gap: 0.15rem;
}

.tech-bottom-nav__avatar {
    line-height: 1;
}

.tech-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.tech-filter-chip {
    appearance: none;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font: inherit;
    font-weight: 650;
    font-size: 0.875rem;
    padding: 0.45rem 0.9rem;
    border-radius: var(--radius-2);
    cursor: pointer;
    min-height: 44px;
}

.tech-filter-chip:hover {
    background: var(--color-surface-2, var(--color-surface-muted));
    color: var(--color-text-strong, var(--color-text));
}

.tech-filter-chip--active {
    background: var(--color-primary-container);
    border-color: var(--color-primary);
    color: var(--color-text-strong, var(--color-text));
}

.tech-title {
    font-size: 1.25rem;
    font-weight: 650;
    margin: 0 0 0.75rem;
    color: var(--color-text-strong, var(--color-text));
}

.tech-muted {
    color: var(--color-text-muted);
    margin: 0.25rem 0 0;
}

.tech-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.tech-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.tech-label {
    font-size: 0.875rem;
    font-weight: 650;
}

.tech-input {
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-2);
    border: 1px solid var(--color-border);
    font: inherit;
    width: 100%;
    box-sizing: border-box;
}

.tech-input:focus {
    outline: 2px solid transparent;
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

.tech-alert {
    border-radius: var(--radius-3);
    padding: 0.75rem 1rem;
    margin-bottom: 0;
    border: 1px solid var(--color-border);
    background: var(--color-surface-muted);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.tech-alert p {
    margin: 0;
}

.tech-alert--ok {
    border-color: var(--color-success-border);
    background: var(--color-success-surface);
}

.tech-alert--warn {
    border-color: var(--color-warning-border);
    background: var(--color-warning-surface);
}

.tech-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    min-height: var(--tech-bottom-nav-height, 4.25rem);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: 0.5rem 0.75rem;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
}

.tech-bottom-nav__grid {
    display: flex;
    justify-content: space-around;
    gap: 0.35rem;
    width: 100%;
}

.tech-bottom-nav a {
    text-decoration: none;
    color: var(--color-text-muted);
    font-weight: 650;
    padding: 0.35rem 0.6rem;
    border-radius: var(--radius-2);
}

.tech-bottom-nav a:hover {
    background: var(--color-surface-2, var(--color-surface-muted));
    color: var(--color-text-strong, var(--color-text));
}

.tech-bottom-nav a.tech-nav--active {
    background: var(--color-primary-container);
    color: var(--color-text-strong, var(--color-text));
}

/* =========================================================
   Phase 14 — Loading, empty states & motion (FEED-01, FEED-02, FEED-03)
   ========================================================= */

/* --- Skeleton primitives (D-14-02) -------------------------------- */
.tech-skeleton {
    height: 14px;
    border-radius: var(--radius-1);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border-subtle);
}

.tech-skeleton--lg {
    height: 20px;
    border-radius: var(--radius-1);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border-subtle);
}

.tech-skeleton--card {
    min-height: 88px;
    border-radius: var(--radius-2);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border-subtle);
    width: 100%;
}

/* Defensive: historical FEED-01 row placeholder (WorkOrderDetail now prefers --card). */
.tech-skeleton--row {
    height: 40px;
    width: 100%;
    border-radius: var(--radius-1);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border-subtle);
    margin-bottom: var(--space-2);
}

.tech-skeleton-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* --- Empty state (D-14-09, D-14-10) ------------------------------- */
.tech-empty-state {
    margin: var(--space-5) 0;
}

.tech-empty-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: var(--space-3);
    border-radius: 999px;
    background: var(--color-success-surface, #e8f5e9);
    color: var(--color-success, #2e7d32);
}

.tech-empty-state__title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 var(--space-2);
    color: var(--color-text);
}

.tech-empty-state__body {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0 0 var(--space-4);
    color: var(--color-text-muted);
}

.tech-empty-state__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* --- Error block (D-14-18) ---------------------------------------- */
.tech-error-block {
    margin: var(--space-4) 0;
    padding: var(--space-4);
    border-radius: var(--radius-2);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border-subtle);
}

/* =========================================================
   Portal polish — shell, timer banner, touch targets
   ========================================================= */

.tech-root.bo-root {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    /* Override .bo-root locked viewport — scroll the document on mobile Chrome. */
    height: auto;
    max-height: none;
    overflow: visible;
}

.tech-root .tech-header.bo-header {
    width: 100%;
    max-width: none;
    padding: 0 1rem;
    position: sticky;
    top: 0;
    z-index: 30;
}

.tech-root .tech-main.bo-main {
    background: var(--color-background, #f5f6f8);
    max-width: none;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow: visible;
    /* Clear the fixed bottom nav so the last card can scroll fully into view. */
    padding-bottom: var(--tech-bottom-nav-offset, 4.25rem);
}

.tech-root .tech-container.bo-content {
    max-width: none;
    width: 100%;
    margin: 0 auto;
    padding-top: var(--space-4, 1rem);
    padding-bottom: var(--space-6, 1.5rem);
}

/* Full-width primary actions on phone; auto-width from tablet up */
.tech-btn-block {
    width: 100%;
    min-height: 48px;
    box-sizing: border-box;
}

/* =========================================================
   Tech portal responsive — mobile-first
   Phone (<768): bottom nav + full-width stack.
   Tablet (768–1099): top nav + skinny centered column.
   Desktop (≥1100): wide board layout.
   ========================================================= */

.tech-dash-hub {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.tech-workday-board {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

@media (min-width: 768px) {
    .tech-root {
        --tech-bottom-nav-offset: 0px;
        --tech-app-max: 28rem;
    }

    .tech-header-nav {
        display: flex;
        flex: 1 1 auto;
    }

    .tech-bottom-nav {
        display: none;
    }

    .tech-container {
        padding-bottom: var(--space-6);
    }

    .tech-root .tech-main.bo-main {
        width: 100%;
        max-width: none;
        margin-inline: 0;
        padding-bottom: var(--space-6, 1.5rem);
        align-self: stretch;
    }

    .tech-root .tech-container.bo-content {
        width: 100%;
        max-width: var(--tech-app-max);
        margin-inline: auto;
        padding-inline: var(--space-4);
    }

    .tech-root .tech-header.bo-header {
        padding: 0 var(--space-4);
        min-height: 3.5rem;
    }

    .tech-btn-block {
        width: auto;
        min-width: 12rem;
    }

    .tech-modal__actions .tech-btn-block,
    .tech-job-card__primary .tech-btn-block,
    .tech-detail-sticky-bar .tech-btn-block {
        width: 100%;
        min-width: 0;
    }

    .tech-timer-strip {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--space-3);
    }

    .tech-timer-strip__lead {
        flex: 1 1 12rem;
        align-items: center;
    }

    .tech-timer-strip__pulse {
        margin-top: 0;
    }

    .tech-timer-strip__actions {
        display: flex;
        flex: 1 1 auto;
        grid-template-columns: none;
        width: auto;
    }

    .tech-timer-strip__btn {
        width: auto;
        min-width: 0;
        flex: 1 1 auto;
    }

    .tech-timer-banner__actions,
    .tech-workday-job__actions {
        display: flex;
        grid-template-columns: none;
    }

    .tech-timer-banner__actions .staff-btn,
    .tech-workday-job__actions .staff-btn {
        flex: 1 1 auto;
        min-width: 0;
    }

    .tech-empty-state__cta .staff-btn,
    .tech-error-block .staff-btn {
        width: auto;
        min-width: 10rem;
    }

    .tech-workday-idle .tech-btn-block {
        width: 100%;
        min-width: 0;
        margin-top: 0.75rem;
    }

    .tech-settings-save,
    .tech-settings-logout {
        width: 100%;
        min-width: 0;
    }

    .tech-insp-wizard-nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        max-width: none;
    }

    .tech-insp-wizard-nav__btn {
        width: 100%;
        min-width: 0;
    }

    .tech-detail-sticky-bar {
        left: 50%;
        right: auto;
        width: min(100%, var(--tech-app-max));
        transform: translateX(-50%);
        margin-inline: 0;
        border-radius: var(--radius-2) var(--radius-2) 0 0;
        padding-bottom: var(--space-3);
        pointer-events: auto;
    }

    .tech-page:has(.tech-detail-sticky-bar) {
        padding-bottom: calc(4.75rem + var(--space-6));
    }
}

/* Desktop board — uses the width without auto-placement traps */
@media (min-width: 1100px) {
    .tech-root {
        --tech-app-max: 72rem;
    }

    .tech-root .tech-container.bo-content {
        padding-inline: var(--space-5);
    }

    .tech-root .tech-header.bo-header {
        padding: 0 max(var(--space-5), calc((100% - var(--tech-app-max)) / 2));
    }

    /* Hub: title left, progress right — flex, not sparse grid */
    .tech-dash-hub {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: var(--space-5);
    }

    .tech-dash-hub .tech-page-header {
        flex: 1 1 auto;
        min-width: 0;
    }

    .tech-dash-hub .tech-today-progress {
        flex: 0 0 16rem;
        margin: 0;
        width: 16rem;
    }

    .tech-today-progress__label {
        order: -1;
    }

    .tech-today-progress__track {
        height: 8px;
    }

    /* Card board fills the shell; auto-fit collapses unused tracks */
    .tech-dash .tech-card-list,
    .tech-schedule .tech-card-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
        gap: var(--space-3);
        align-items: stretch;
    }

    .tech-dash .tech-card-list > *,
    .tech-schedule .tech-card-list > * {
        margin-bottom: 0;
        min-width: 0;
    }

    /* Compact tile cards — denser, not stretched list rows */
    .tech-dash .tech-wo-card,
    .tech-schedule .tech-wo-card {
        flex-direction: column;
        align-items: stretch;
        justify-content: space-between;
        gap: var(--space-3);
        min-height: 9.5rem;
        padding: 1.1rem 1.15rem;
        position: relative;
    }

    .tech-dash .tech-wo-card__main,
    .tech-schedule .tech-wo-card__main {
        gap: 0.4rem;
        padding-right: 1.6rem;
    }

    .tech-dash .tech-wo-card__top,
    .tech-schedule .tech-wo-card__top {
        justify-content: space-between;
        width: 100%;
    }

    .tech-dash .tech-wo-card__plate,
    .tech-schedule .tech-wo-card__plate {
        font-size: 1.4rem;
    }

    .tech-dash .tech-wo-card__time,
    .tech-schedule .tech-wo-card__time {
        margin-top: auto;
        font-size: 0.875rem;
    }

    .tech-dash .tech-wo-card__chevron,
    .tech-schedule .tech-wo-card__chevron {
        position: absolute;
        top: 1.1rem;
        right: 0.9rem;
    }

    .tech-dash > .tech-section {
        padding: var(--space-4);
        background: color-mix(in srgb, var(--color-surface, #1a2332) 70%, transparent);
        border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.06));
        border-radius: var(--radius-3, 14px);
    }

    .tech-dash > .tech-section > .tech-section__title {
        margin-bottom: var(--space-3);
    }

    /* Workday: clock | job side-by-side when both exist */
    .tech-workday-board {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-5);
        align-items: stretch;
    }

    .tech-workday-board > .tech-day-clock:only-child,
    .tech-workday-board > :only-child {
        grid-column: 1 / -1;
        max-width: 36rem;
    }

    .tech-workday-job,
    .tech-workday-idle {
        margin-top: 0;
    }

    /* Detail / wizards / settings: readable but not phone-skinny */
    .tech-page--detail,
    .tech-insp,
    .tech-steps,
    .tech-settings {
        margin-inline: auto;
    }

    .tech-page--detail {
        max-width: 48rem;
    }

    .tech-insp,
    .tech-steps {
        max-width: 44rem;
    }

    .tech-settings {
        max-width: 36rem;
    }

    .tech-detail-sticky-bar {
        width: min(100%, 48rem);
    }
}

.tech-header__brand {
    display: flex;
    flex-direction: column;
    gap: 0;
    line-height: 1.15;
    min-width: 0;
}

.tech-header__brand .bo-brand {
    padding: 0;
}

.tech-header__brand .bo-brand:hover {
    background: transparent;
}

.tech-header__role {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.tech-stop-dialog {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3, 14px);
    padding: var(--space-5);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.tech-stop-dialog__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-strong, var(--color-text));
}

.tech-stop-dialog__body {
    margin: var(--space-2) 0 0;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    line-height: 1.45;
}

.tech-stop-dialog__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.tech-stop-dialog__actions .staff-btn {
    min-height: 48px;
}

.tech-bottom-nav__label {
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1.2;
}

.tech-detail-body {
    padding-bottom: 5rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.tech-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.tech-section__panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3, 14px);
    padding: var(--space-4);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.tech-section--flush {
    gap: var(--space-2);
}

.tech-section--flush > .tech-section__title {
    margin-bottom: 0.15rem;
}

.tech-section__body {
    min-width: 0;
}

.tech-card-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.tech-wo-card {
    background: var(--color-surface);
    border: 1px solid color-mix(in srgb, var(--color-border, #e5e7eb) 70%, transparent);
    border-radius: var(--radius-3, 12px);
    padding: 0.9rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: var(--elevation-1, 0 1px 2px rgba(15, 23, 42, 0.05));
}

.tech-wo-card__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.tech-wo-card--interactive {
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.tech-wo-card--interactive:hover,
.tech-wo-card--interactive:focus-visible {
    border-color: color-mix(in srgb, var(--color-primary, #1f3a5f) 35%, transparent);
    box-shadow: var(--elevation-2, 0 4px 14px rgba(15, 23, 42, 0.1));
    transform: translateY(-1px);
    outline: none;
}

.tech-wo-card__top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.tech-wo-card__plate {
    font-size: 1.2rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-strong, var(--color-text));
    line-height: 1.2;
}

.tech-wo-card__meta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    font-size: 0.875rem;
    line-height: 1.35;
    color: var(--color-text-muted);
}

.tech-wo-card__vehicle {
    margin: 0;
    font-weight: 600;
    color: var(--color-text, var(--color-text-strong));
    text-transform: none;
}

.tech-wo-card__sep {
    opacity: 0.55;
}

.tech-wo-card__customer {
    margin: 0;
    color: var(--color-text-muted);
}

.tech-wo-card__time {
    margin: 0.15rem 0 0;
    font-size: 0.8125rem;
    font-weight: 650;
    color: var(--color-primary-ink, var(--color-primary));
}

.tech-wo-card__chevron {
    flex-shrink: 0;
    display: inline-flex;
    color: var(--color-text-muted);
    opacity: 0.55;
}

.tech-wo-card--interactive:hover .tech-wo-card__chevron,
.tech-wo-card--interactive:focus-visible .tech-wo-card__chevron {
    opacity: 0.9;
    color: var(--color-primary-ink, var(--color-primary));
}

.tech-wo-card__vehicle-icon {
    flex-shrink: 0;
    color: var(--color-text-subtle, var(--color-text-muted));
    margin-right: -0.1rem;
}

/* --- Status accent — left edge + faint surface tint, mirrors .bo-dash-chip semantics --- */
.tech-wo-card {
    border-left: 3px solid var(--color-border-strong, var(--color-border));
}

.tech-wo-card--ok {
    border-left-color: var(--color-success, #2e7d32);
    background: color-mix(in srgb, var(--color-success-surface, #e8f5e9) 55%, var(--color-surface));
}

.tech-wo-card--warn {
    border-left-color: var(--color-warning-border, #ffb300);
    background: color-mix(in srgb, var(--color-warning-surface, #fff3e0) 45%, var(--color-surface));
}

.tech-wo-card--danger {
    border-left-color: var(--color-danger, #d32f2f);
    background: color-mix(in srgb, var(--color-danger-surface, #fef2f2) 45%, var(--color-surface));
}

.tech-wo-card--offerte {
    border-left-color: var(--color-offerte-ink, var(--color-primary));
    background: color-mix(in srgb, var(--color-offerte-surface, #e8eef4) 45%, var(--color-surface));
}

.tech-wo-card--billing {
    border-left-color: var(--color-billing, #4527a0);
    background: color-mix(in srgb, var(--color-billing-surface, #ede7f6) 40%, var(--color-surface));
}

.tech-wo-card--neutral {
    border-left-color: var(--color-border-strong, var(--color-border));
}

/* --- Entrance motion — staggered fade/slide-in for the day's card list --- */
@keyframes tech-card-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tech-card-list > * {
    animation: tech-card-in 240ms ease-out backwards;
}

.tech-card-list > *:nth-child(1) { animation-delay: 0ms; }
.tech-card-list > *:nth-child(2) { animation-delay: 40ms; }
.tech-card-list > *:nth-child(3) { animation-delay: 80ms; }
.tech-card-list > *:nth-child(4) { animation-delay: 120ms; }
.tech-card-list > *:nth-child(5) { animation-delay: 160ms; }
.tech-card-list > *:nth-child(n+6) { animation-delay: 200ms; }

/* --- Today's progress strip --- */
.tech-today-progress {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0 0 var(--space-1);
}

.tech-today-progress__track {
    height: 6px;
    border-radius: 999px;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border-subtle);
    overflow: hidden;
}

.tech-today-progress__fill {
    height: 100%;
    border-radius: inherit;
    background: var(--color-primary, #1f3a5f);
    transition: width 320ms ease;
}

.tech-today-progress--done .tech-today-progress__fill {
    background: var(--color-success, #2e7d32);
}

.tech-today-progress__label {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 650;
    color: var(--color-text-muted);
}

.tech-today-progress--done .tech-today-progress__label {
    color: var(--color-success, #2e7d32);
}

.tech-manual-details {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    overflow: visible;
}

.tech-manual-details__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 48px;
    padding: 0.75rem 1rem;
    cursor: pointer;
    list-style: none;
    font-size: 0.9375rem;
    font-weight: 650;
    font-family: inherit;
    color: var(--color-text-strong, var(--color-text));
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong, var(--color-border));
    border-radius: var(--radius-2, 8px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: background var(--motion-duration-fast, 120ms) var(--motion-ease-standard, ease),
                border-color var(--motion-duration-fast, 120ms) var(--motion-ease-standard, ease),
                box-shadow var(--motion-duration-fast, 120ms) var(--motion-ease-standard, ease);
}

.tech-manual-details__summary::-webkit-details-marker {
    display: none;
}

.tech-manual-details__summary::after {
    content: "";
    flex-shrink: 0;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.7;
    transition: transform var(--motion-duration-fast, 120ms) var(--motion-ease-standard, ease);
}

.tech-manual-details[open] > .tech-manual-details__summary {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: none;
}

.tech-manual-details[open] > .tech-manual-details__summary::after {
    transform: rotate(-135deg);
    margin-top: 0.2rem;
}

.tech-manual-details__summary:hover {
    background: var(--color-surface-2, var(--color-surface-muted));
}

.tech-manual-details__summary:active {
    background: var(--color-surface-muted, var(--color-surface-2));
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

.tech-manual-details__summary:focus-visible {
    outline: 2px solid var(--color-primary, #1f3a5f);
    outline-offset: 2px;
}

.tech-manual-details__body {
    padding: var(--space-4);
    border: 1px solid var(--color-border-strong, var(--color-border));
    border-top: none;
    border-radius: 0 0 var(--radius-2, 8px) var(--radius-2, 8px);
    background: var(--color-surface);
}

.tech-lane-tile {
    appearance: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3, 14px);
    background: var(--color-surface);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    min-height: 6.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    color: inherit;
    font: inherit;
    width: 100%;
    box-sizing: border-box;
}

.tech-lane-tile:hover,
.tech-lane-tile:focus-visible {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.12);
    outline: 2px solid transparent;
}

.tech-lane-tile__label {
    font-size: 1rem;
    font-weight: 650;
    color: var(--color-text-strong, var(--color-text));
}

.tech-lane-tile__hint {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.tech-timer-page-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3, 14px);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.tech-timer-page-card__status {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.tech-timer-page-card__title {
    font-size: 1.25rem;
    font-weight: 650;
    margin: 0;
}

.tech-timer-page-card__meta {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    margin: var(--space-1) 0 0;
}

.tech-timer-page-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.tech-timer-banner__actions .staff-btn {
    min-height: 48px;
}

.tech-photo-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.tech-photo-section__count {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 650;
    color: var(--color-text-muted);
}

.tech-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: var(--space-3);
}

.tech-photo-card {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.tech-photo-card__link {
    display: block;
    border-radius: var(--radius-2);
    overflow: hidden;
}

.tech-photo-card__img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-2);
    border: 1px solid var(--color-border);
    background: var(--color-surface-muted);
    display: block;
}

.tech-photo-card__caption {
    font-size: 0.8125rem;
    color: var(--color-text);
    margin: 0;
    line-height: 1.35;
}

.tech-photo-card__meta {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.tech-photo-empty {
    margin: 0;
}

.tech-photo-empty__title {
    margin: 0 0 var(--space-1);
    font-size: 1rem;
    font-weight: 650;
}

.tech-photo-empty__body {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    line-height: 1.45;
}

.tech-photo-capture {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.tech-photo-cta {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    text-align: center;
    cursor: pointer;
    border-radius: var(--radius-3, 14px);
    min-height: 5.5rem;
    padding: var(--space-4);
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.tech-photo-cta__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
}

.tech-photo-cta--primary {
    background: var(--color-primary-container);
    border: 2px dashed var(--color-primary);
    color: var(--color-text-strong, var(--color-text));
}

.tech-photo-cta--primary:hover,
.tech-photo-cta--primary:focus-within {
    box-shadow: 0 2px 10px rgba(0, 102, 204, 0.18);
    border-style: solid;
}

.tech-photo-cta--secondary {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    min-height: 3.25rem;
    padding: var(--space-3);
}

.tech-photo-cta--secondary:hover,
.tech-photo-cta--secondary:focus-within {
    border-color: var(--color-primary);
    background: var(--color-surface-2, var(--color-surface-muted));
}

.tech-photo-cta--disabled {
    opacity: 0.55;
    pointer-events: none;
}

.tech-photo-cta__icon {
    color: var(--color-primary);
    line-height: 0;
}

.tech-photo-cta__label {
    font-size: 1.0625rem;
    font-weight: 700;
}

.tech-photo-cta__hint {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    line-height: 1.35;
}

.tech-photo-cta--secondary .tech-photo-cta__label {
    font-size: 0.9375rem;
    font-weight: 650;
}

.tech-photo-preview {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.tech-photo-preview__hint {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.tech-photo-preview__frame {
    border-radius: var(--radius-3, 14px);
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-surface-muted);
    min-height: 14rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tech-photo-preview__img {
    display: block;
    width: 100%;
    max-height: 22rem;
    min-height: 12rem;
    object-fit: contain;
    background: var(--color-surface-muted);
}

.tech-photo-preview__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.tech-photo-preview__confirm,
.tech-photo-preview__actions .staff-btn {
    width: 100%;
    min-height: 48px;
}

/* Inspection execution (checklist walkthrough) */
.tech-insp-back {
    margin-bottom: var(--space-3);
}

.tech-insp-back__link {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    text-align: left;
}

.tech-insp-back__link:hover {
    text-decoration: underline;
}

.tech-insp-progress {
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-3, 12px);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.tech-insp-progress__bar-wrap {
    height: 0.5rem;
    border-radius: 999px;
    background: var(--color-border-subtle);
    overflow: hidden;
}

.tech-insp-progress__bar {
    height: 100%;
    background: var(--color-primary-action, var(--color-primary));
    border-radius: 999px;
    transition: transform 0.2s ease;
}

.tech-insp-progress__counts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.tech-insp-summary {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.tech-insp-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
    font-size: 0.8125rem;
}

.tech-insp-rating--ok { color: var(--color-success, #2e7d32); }
.tech-insp-rating--warn { color: var(--color-warning, #ed6c02); }
.tech-insp-rating--danger { color: var(--color-danger, #c62828); }
.tech-insp-rating--neutral { color: var(--color-text-muted); }

.tech-insp-topic {
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-3, 12px);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
}

.tech-insp-wizard {
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-3, 12px);
    padding: var(--space-5) var(--space-4);
    margin-bottom: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.tech-insp-progress__step {
    display: inline-block;
}

.tech-insp-wizard--enter-next,
.tech-insp-progress__step.tech-insp-wizard--enter-next {
    animation: tech-insp-enter-next 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.tech-insp-wizard--enter-prev,
.tech-insp-progress__step.tech-insp-wizard--enter-prev {
    animation: tech-insp-enter-prev 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes tech-insp-enter-next {
    from {
        opacity: 0;
        transform: translateX(1.5rem);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes tech-insp-enter-prev {
    from {
        opacity: 0;
        transform: translateX(-1.5rem);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tech-insp-wizard--enter-next,
    .tech-insp-wizard--enter-prev,
    .tech-insp-progress__step.tech-insp-wizard--enter-next,
    .tech-insp-progress__step.tech-insp-wizard--enter-prev {
        animation: none;
    }
}

.tech-insp-detail {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.tech-insp-detail .tech-label {
    margin: 0;
}

.tech-insp-row__notes--required {
    min-height: 5.5rem;
    resize: vertical;
}

.tech-insp-detail__media {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 48px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.tech-insp-detail__media .tech-photo-cta__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.tech-insp-wizard__topic {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.tech-insp-wizard__title {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-text);
}

.tech-insp-wizard__status {
    margin: 0;
    font-size: 1rem;
}

.tech-insp-wizard-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.tech-insp-wizard-nav__btn {
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
}

.tech-insp-wizard-hint {
    margin: 0 0 var(--space-3);
    text-align: center;
    font-size: 0.875rem;
}

.tech-insp-ratings--wizard {
    gap: var(--space-3);
}

.tech-insp-rating-btn--wizard {
    min-height: 56px;
    font-size: 0.9375rem;
    padding: 0.75rem 0.85rem;
}

.tech-insp-rating-btn--wizard .tech-insp-rating-btn__glyph {
    font-size: 1.25rem;
}

.tech-insp-topic__title {
    margin: 0 0 var(--space-3);
    font-size: 1rem;
    font-weight: 650;
}

.tech-insp-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.tech-insp-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border-subtle);
}

.tech-insp-row:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.tech-insp-row--pending .tech-insp-row__name {
    color: var(--color-text-muted);
}

.tech-insp-row__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.tech-insp-row__name {
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.35;
}

.tech-insp-row__pending-tag {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.tech-insp-row__notes-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.tech-insp-row__notes {
    width: 100%;
    padding-right: 2.75rem;
}

.tech-insp-row__notes-ro {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.tech-insp-row__camera {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-2, 8px);
    color: var(--color-primary, var(--color-primary, #0066cc));
    cursor: pointer;
}

.tech-insp-row__camera:hover:not(.tech-insp-row__camera--disabled) {
    background: rgba(0, 102, 204, 0.1);
}

.tech-insp-row__camera--disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.tech-insp-row__media {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
    gap: var(--space-2);
}

.tech-insp-row__media-item {
    margin: 0;
    position: relative;
    border-radius: var(--radius-2, 8px);
    overflow: hidden;
    border: 1px solid var(--color-border-subtle);
    background: var(--color-surface, #fff);
    aspect-ratio: 1;
}

.tech-insp-row__media-open {
    appearance: none;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.tech-insp-row__media-thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tech-insp-row__media-badge {
    position: absolute;
    left: 0.35rem;
    bottom: 0.35rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(0, 0, 0, 0.65);
    pointer-events: none;
}

.tech-insp-row__media-delete {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: rgba(15, 23, 42, 0.72);
    cursor: pointer;
}

.tech-insp-row__media-delete:hover:not(:disabled) {
    background: var(--color-danger, #c62828);
}

.tech-insp-row__media-delete:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.tech-insp-ratings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.tech-insp-rating-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 44px;
    padding: 0.5rem 0.65rem;
    border-radius: var(--radius-2, 8px);
    border: 1px solid var(--color-border);
    background: var(--color-surface, #fff);
    color: var(--color-text);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.tech-insp-rating-btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.tech-insp-rating-btn__glyph {
    font-size: 1rem;
    line-height: 1;
}

.tech-insp-rating-btn--ok.tech-insp-rating-btn--on,
.tech-insp-rating-btn--ok:hover:not(:disabled) {
    border-color: var(--color-success, #2e7d32);
    background: rgba(46, 125, 50, 0.1);
    color: var(--color-success, #2e7d32);
}

.tech-insp-rating-btn--warn.tech-insp-rating-btn--on,
.tech-insp-rating-btn--warn:hover:not(:disabled) {
    border-color: var(--color-warning, #ed6c02);
    background: rgba(237, 108, 2, 0.1);
    color: var(--color-warning, #ed6c02);
}

.tech-insp-rating-btn--danger.tech-insp-rating-btn--on,
.tech-insp-rating-btn--danger:hover:not(:disabled) {
    border-color: var(--color-danger, #c62828);
    background: rgba(198, 40, 40, 0.1);
    color: var(--color-danger, #c62828);
}

.tech-insp-rating-btn--neutral.tech-insp-rating-btn--on,
.tech-insp-rating-btn--neutral:hover:not(:disabled) {
    border-color: var(--color-text-muted);
    background: rgba(0, 0, 0, 0.04);
}

.tech-insp-finalize {
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-3, 12px);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.tech-insp-finalize__title {
    margin: 0 0 var(--space-1);
    font-weight: 650;
    font-size: 1rem;
}

@media (min-width: 640px) {
    .tech-insp-ratings {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.tech-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: var(--space-4);
}

.tech-modal__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgba(15, 23, 42, 0.45);
    cursor: pointer;
}

.tech-modal__panel {
    position: relative;
    z-index: 1;
    width: min(100%, 26rem);
    background: var(--color-surface, #fff);
    border-radius: var(--radius-3, 12px);
    padding: var(--space-4);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.2);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.tech-modal__panel--media {
    width: min(100%, 36rem);
    padding: var(--space-3);
}

.tech-media-preview__frame {
    border-radius: var(--radius-2, 8px);
    overflow: hidden;
    background: #0f172a;
    min-height: 14rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tech-media-preview__img,
.tech-media-preview__player {
    display: block;
    width: 100%;
    max-height: min(70vh, 28rem);
    object-fit: contain;
    background: #0f172a;
}

.tech-modal__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 650;
    line-height: 1.3;
}

.tech-modal__body {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    line-height: 1.45;
}

.tech-modal__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

@media (min-width: 480px) {
    .tech-modal {
        align-items: center;
    }
}

/* tech-ux-overhaul-v2 */

/* Service offering step execution */
.tech-steps .tech-insp-progress {
    margin-bottom: var(--space-4, 1rem);
}

.tech-steps-board {
    margin: 0;
}

.tech-steps-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 0.75rem);
}

.tech-steps-card {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border-subtle, rgba(29, 29, 31, 0.08));
    border-radius: var(--radius-3, 12px);
    padding: var(--space-4, 1rem);
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 0.75rem);
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.tech-steps-card--focus {
    border-color: color-mix(in srgb, var(--color-primary, #0066cc) 45%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #0066cc) 12%, transparent);
}

.tech-steps-card--done {
    background: color-mix(in srgb, var(--color-success, #248a3d) 4%, var(--color-surface, #fff));
    border-color: color-mix(in srgb, var(--color-success, #248a3d) 18%, transparent);
}

.tech-steps-card--done.tech-steps-card--focus {
    box-shadow: none;
}

.tech-steps-card__top {
    display: flex;
    gap: var(--space-3, 0.75rem);
    align-items: flex-start;
}

.tech-steps-index {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    border: 1px solid var(--color-border-subtle, rgba(29, 29, 31, 0.08));
    background: var(--color-surface-muted, #f5f5f7);
    color: var(--color-text-muted, #86868b);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9375rem;
    font-weight: 650;
}

.tech-steps-index--done {
    background: var(--color-success, #248a3d);
    border-color: var(--color-success, #248a3d);
    color: #fff;
}

.tech-steps-card__copy {
    min-width: 0;
    flex: 1;
}

.tech-steps-card__title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 650;
    line-height: 1.3;
    color: var(--color-text-strong, var(--color-text, #1d1d1f));
}

.tech-steps-card--done .tech-steps-card__title {
    color: var(--color-text, #424245);
}

.tech-steps-card__guidance {
    margin: 0.35rem 0 0;
    color: var(--color-text-muted, #86868b);
    font-size: 0.875rem;
    line-height: 1.45;
}

.tech-steps-card__evidence {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
    padding-top: var(--space-1, 0.25rem);
    border-top: 1px solid var(--color-border-subtle, rgba(29, 29, 31, 0.08));
}

.tech-steps-card__notes-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-text-muted, #86868b);
}

.tech-steps-card__notes-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-2, 0.5rem);
    align-items: stretch;
}

.tech-steps-card__notes {
    width: 100%;
    min-height: 3.25rem;
    resize: vertical;
}

.tech-steps-card__media-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-width: 4.25rem;
    padding: 0.5rem 0.65rem;
    border-radius: var(--radius-2, 8px);
    border: 1px dashed color-mix(in srgb, var(--color-primary, #0066cc) 35%, transparent);
    background: color-mix(in srgb, var(--color-primary, #0066cc) 6%, transparent);
    color: var(--color-primary, #0066cc);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    position: relative;
}

.tech-steps-card__media-btn:hover:not(.tech-steps-card__media-btn--disabled) {
    background: color-mix(in srgb, var(--color-primary, #0066cc) 12%, transparent);
}

.tech-steps-card__media-btn--disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.tech-steps-card__media {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 0.5rem);
}

.tech-steps-card__media-item {
    position: relative;
    margin: 0;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: var(--radius-2, 8px);
    overflow: hidden;
    background: var(--color-surface-muted, #f5f5f7);
}

.tech-steps-card__media-open {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.tech-steps-card__media-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tech-steps-card__media-badge {
    position: absolute;
    left: 0.25rem;
    bottom: 0.25rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
}

.tech-steps-card__media-delete {
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    width: 1.5rem;
    height: 1.5rem;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    cursor: pointer;
    padding: 0;
}

.tech-steps-card__media-delete:hover:not(:disabled) {
    background: var(--color-danger, #d70015);
}

.tech-steps-card__media-delete:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.tech-steps-card__action {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
}

.tech-steps-card__complete {
    width: 100%;
    min-height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 650;
}

.tech-steps-card__complete-hint {
    margin: 0;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--color-text-muted, #86868b);
}

.tech-steps-card__done-banner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.75rem;
    border-radius: var(--radius-2, 8px);
    background: color-mix(in srgb, var(--color-success, #248a3d) 12%, transparent);
    color: var(--color-success, #248a3d);
    font-weight: 650;
}

.tech-steps-card__done-banner-icon {
    display: inline-flex;
}

.tech-steps-card__reopen {
    width: 100%;
    min-height: 2.5rem;
}

@media (min-width: 720px) {
    .tech-steps-card {
        padding: 1.15rem 1.25rem;
    }

    .tech-steps-card__notes-row {
        grid-template-columns: 1fr 5.5rem;
    }
}

/* =========================================================
   SaaS polish — mature field product (tech portal only)
   ========================================================= */

.tech-root {
    --tech-surface-wash: linear-gradient(
        180deg,
        color-mix(in srgb, var(--color-primary, #1f3a5f) 6%, var(--color-background, #f4f5f7)) 0%,
        var(--color-background, #f4f5f7) 12rem
    );
    background: var(--tech-surface-wash);
}

.tech-root .tech-header.bo-header {
    backdrop-filter: blur(10px);
    background: color-mix(in srgb, var(--color-surface, #fff) 88%, transparent);
    border-bottom-color: color-mix(in srgb, var(--color-border, #e5e7eb) 80%, transparent);
}

.tech-header__mark {
    letter-spacing: -0.02em;
    font-weight: 700;
}

.tech-header__role {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.tech-header__actions {
    margin-left: auto;
}

.tech-page-header__title {
    letter-spacing: -0.03em;
    font-weight: 700;
}

.tech-page-header__subtitle {
    margin: 0.25rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.9375rem;
}

.tech-detail-hero {
    background: color-mix(in srgb, var(--color-surface, #fff) 92%, var(--color-primary-container, #e8eef4));
    border: none;
    box-shadow: var(--elevation-1, 0 1px 2px rgba(15, 23, 42, 0.06));
    border-radius: var(--radius-3, 12px);
}

.tech-detail-hero__plate {
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 750;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
}

.tech-detail-hero__meta {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.9375rem;
}

.tech-job-card {
    border: none;
    box-shadow: var(--elevation-1, 0 1px 2px rgba(15, 23, 42, 0.05));
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.tech-job-card--running {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-success, #2e7d32) 35%, transparent),
        var(--elevation-2, 0 4px 14px rgba(15, 23, 42, 0.08));
}

.tech-job-card__meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.35rem;
}

.tech-job-card__chip {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 650;
    background: var(--color-primary-container, #e8eef4);
    color: var(--color-primary-ink, var(--color-primary));
}

.tech-job-card__chip--muted {
    background: var(--color-surface-2, #f1f3f5);
    color: var(--color-text-muted);
}

.tech-job-card__badge--quiet {
    background: var(--color-surface-2, #f1f3f5);
    color: var(--color-text-muted);
    border: none;
    font-weight: 600;
}

.tech-job-card__primary {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.tech-job-card__clock-gate {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.tech-job-card__more {
    border-top: 1px solid var(--color-border-subtle, rgba(0, 0, 0, 0.06));
    padding-top: var(--space-3);
}

.tech-job-card__more-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 44px;
    padding: 0.65rem 0.9rem;
    cursor: pointer;
    list-style: none;
    font-size: 0.9375rem;
    font-weight: 650;
    font-family: inherit;
    color: var(--color-text-strong, var(--color-text));
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong, var(--color-border));
    border-radius: var(--radius-2, 8px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: background var(--motion-duration-fast, 120ms) var(--motion-ease-standard, ease),
                border-color var(--motion-duration-fast, 120ms) var(--motion-ease-standard, ease),
                box-shadow var(--motion-duration-fast, 120ms) var(--motion-ease-standard, ease);
}

.tech-job-card__more-summary::-webkit-details-marker {
    display: none;
}

.tech-job-card__more-summary::after {
    content: "";
    flex-shrink: 0;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.7;
    transition: transform var(--motion-duration-fast, 120ms) var(--motion-ease-standard, ease);
}

.tech-job-card__more[open] > .tech-job-card__more-summary::after {
    transform: rotate(-135deg);
    margin-top: 0.2rem;
}

.tech-job-card__more-summary:hover {
    background: var(--color-surface-2, var(--color-surface-muted));
}

.tech-job-card__more-summary:active {
    background: var(--color-surface-muted, var(--color-surface-2));
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

.tech-job-card__more-summary:focus-visible {
    outline: 2px solid var(--color-primary, #1f3a5f);
    outline-offset: 2px;
}

.tech-job-card__more-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-top: var(--space-3);
}

.tech-manual-details {
    /* Button look lives on the summary; keep the wrapper quiet. */
    border: none;
    box-shadow: none;
}

.tech-timer-banner {
    border: 1px solid color-mix(in srgb, var(--color-primary, #1f3a5f) 14%, transparent);
    background: color-mix(in srgb, var(--color-primary-container, #e8eef4) 55%, var(--color-surface, #fff));
    box-shadow: none;
}

.tech-bottom-nav {
    backdrop-filter: blur(12px);
    background: color-mix(in srgb, var(--color-surface, #fff) 92%, transparent);
    border-top: 1px solid var(--color-border-subtle, rgba(0, 0, 0, 0.08));
}

.tech-bottom-nav__link {
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.7rem;
    font-weight: 650;
}

.tech-bottom-nav__icon {
    display: inline-flex;
    color: inherit;
    opacity: 0.85;
}

.tech-bottom-nav__link.tech-nav--active .tech-bottom-nav__icon {
    opacity: 1;
}

.tech-workday-job,
.tech-workday-idle {
    background: var(--color-surface);
    border-radius: var(--radius-3, 12px);
    padding: var(--space-4);
    box-shadow: var(--elevation-1, 0 1px 2px rgba(15, 23, 42, 0.05));
    margin-top: var(--space-4);
}

.tech-workday-job__meta {
    margin: 0.35rem 0 0;
    color: var(--color-text-muted);
}

.tech-workday-job__plate {
    font-weight: 750;
    letter-spacing: 0.06em;
    color: var(--color-text-strong, var(--color-text));
}

.tech-workday-job__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.tech-workday-idle__cta {
    margin-top: 0.75rem;
}

.tech-settings-prefs {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.tech-settings-prefs__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border-subtle, rgba(0, 0, 0, 0.06));
}

.tech-settings-prefs__row:last-child {
    border-bottom: none;
}

.tech-empty-state__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.tech-schedule .tech-section__title {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.tech-stop-dialog {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: var(--space-4);
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 640px) {
    .tech-stop-dialog {
        align-items: center;
    }
}

.tech-stop-dialog__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(15, 23, 42, 0.45);
    cursor: pointer;
}

.tech-stop-dialog__panel {
    position: relative;
    z-index: 1;
    width: min(28rem, 100%);
    max-height: min(90dvh, 40rem);
    overflow: auto;
    background: var(--color-surface, #fff);
    border-radius: var(--radius-3, 14px);
    padding: var(--space-5);
    box-shadow: var(--elevation-2, 0 12px 40px rgba(15, 23, 42, 0.22));
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.tech-stop-dialog__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
}

.tech-stop-dialog__body,
.tech-stop-dialog__meta {
    margin: 0.35rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.9375rem;
}

.tech-stop-dialog__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.tech-insp-hero {
    margin-bottom: var(--space-4);
}

.tech-photo-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.tech-job-card__elapsed {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: var(--color-success, #2e7d32);
}

.tech-stop-dialog__more {
    border-top: 1px solid var(--color-border-subtle, rgba(0, 0, 0, 0.06));
    padding-top: var(--space-2);
}

.tech-stop-dialog__more > summary {
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 650;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}