:root {
    color-scheme: light;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #17231f;
    background: #f4f7f4;
    --ink: #17231f;
    --muted: #5b6a64;
    --line: #d4dfd8;
    --surface: #fff;
    --surface-soft: #eef5f0;
    --brand: #0b5d43;
    --brand-dark: #074331;
    --brand-tint: #dff1e7;
    --success: #126b45;
    --success-tint: #e0f4e9;
    --warning: #8b5a0b;
    --warning-tint: #fff2cf;
    --danger: #a42d2d;
    --danger-tint: #ffebe9;
    --focus: #005fcc;
    --shadow: 0 8px 28px rgb(20 54 39 / 8%);
}

* { box-sizing: border-box; }

html { min-width: 320px; scroll-padding-top: 5rem; }

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    background: #f4f7f4;
    font-size: 17px;
    line-height: 1.5;
}

button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--brand); }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .58; }

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, dialog:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

h1, h2, h3, p, dl, ul, ol { margin-top: 0; }
h1, h2, h3 { color: var(--ink); line-height: 1.08; letter-spacing: -.02em; }
h1 { margin-bottom: .5rem; font-size: clamp(2rem, 5vw, 3.7rem); }
h2 { margin-bottom: .35rem; font-size: clamp(1.35rem, 3vw, 2rem); }
h3 { margin-bottom: .35rem; font-size: 1.05rem; }

.skip-link {
    position: fixed;
    z-index: 20;
    top: -4rem;
    left: 1rem;
    padding: .7rem 1rem;
    border-radius: .4rem;
    color: #fff;
    background: var(--brand-dark);
    font-weight: 700;
}
.skip-link:focus { top: .75rem; }

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4.25rem;
    padding: .7rem clamp(1rem, 4vw, 3rem);
    color: #fff;
    background: var(--brand-dark);
}
.brand { display: inline-flex; align-items: center; gap: .65rem; color: #fff; font-weight: 800; letter-spacing: .01em; text-decoration: none; }
.brand-mark { display: grid; width: 2.1rem; height: 2.1rem; place-items: center; border-radius: .5rem; color: var(--brand-dark); background: #b9e9d0; font-size: .8rem; font-weight: 900; }
.header-actions { display: flex; align-items: center; gap: .75rem; }
.header-link { min-height: 2.75rem; padding: .6rem .8rem; border-radius: .45rem; color: #fff; font-size: .9rem; font-weight: 700; text-decoration: none; }
.connection-pill, .state-badge, .status-pill, .session-label, .count-badge { display: inline-flex; align-items: center; gap: .35rem; border-radius: 99rem; font-size: .78rem; font-weight: 750; white-space: nowrap; }
.connection-pill { padding: .3rem .6rem; color: #d4f7e2; background: rgb(255 255 255 / 12%); }

.app-frame { display: flex; min-height: calc(100vh - 4.25rem); }
.primary-nav { display: flex; flex: 0 0 12.25rem; flex-direction: column; gap: .35rem; padding: 1.5rem .75rem; background: #eaf2ec; }
.nav-link { display: flex; align-items: center; gap: .65rem; min-height: 3rem; padding: .7rem .85rem; border-radius: .55rem; color: #345047; font-weight: 700; text-decoration: none; }
.nav-link.active { color: var(--brand-dark); background: #cde9d8; }
.nav-icon { display: inline-grid; width: 1.35rem; height: 1.35rem; place-items: center; border: 1px solid currentColor; border-radius: .35rem; font-size: .9rem; line-height: 1; }
.page-surface { flex: 1; min-width: 0; }

.shell, .detail-page, .receive-page, .maintenance-page, .auth-page { width: min(100%, 90rem); margin: 0 auto; padding: clamp(1.25rem, 3vw, 3rem) clamp(1rem, 4vw, 3.5rem) 4rem; }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; margin-bottom: 1.5rem; }
.page-heading .lede { max-width: 48rem; }
.heading-actions { display: flex; align-items: center; gap: .75rem; padding-top: .65rem; }
.eyebrow { margin-bottom: .45rem; color: var(--brand); font-size: .72rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.lede { margin-bottom: 0; color: var(--muted); font-size: 1.05rem; }
.card { border: 1px solid var(--line); border-radius: .85rem; background: var(--surface); box-shadow: var(--shadow); }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.compact-heading { align-items: center; margin-bottom: .7rem; }
.section-heading h2, .section-heading h3 { margin-bottom: 0; }
.section-heading .eyebrow { margin-bottom: .2rem; }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.8rem; padding: .65rem 1rem; border: 1px solid transparent; border-radius: .5rem; font-weight: 750; line-height: 1.15; text-align: center; text-decoration: none; }
.button-primary { color: #fff; background: var(--brand); }
.button-primary:hover { background: var(--brand-dark); }
.button-secondary { color: var(--brand-dark); border-color: #9fcab0; background: #f5fbf7; }
.button-quiet { color: var(--brand-dark); border-color: var(--line); background: transparent; }
.button-danger { color: var(--danger); border-color: #e5aaa5; background: #fff8f7; }
.button-small { min-height: 2.35rem; padding: .45rem .7rem; font-size: .88rem; }
.button-wide { width: 100%; }

.field, .stack-form { display: grid; gap: .5rem; }
.stack-form { gap: 1rem; }
.field label, .field-label, .search-form > label, .photo-manager > label, .correction-section > label { color: var(--ink); font-size: .9rem; font-weight: 750; }
.text-input, input[type="search"], input[type="text"], input[type="number"], input[type="password"], textarea, select { width: 100%; min-height: 2.9rem; padding: .65rem .75rem; border: 1px solid #9bb2a4; border-radius: .45rem; color: var(--ink); background: #fff; }
textarea { min-height: 5.5rem; resize: vertical; }
.field-help, .form-note, .detail-code, .session-label, .field-optional { color: var(--muted); font-size: .85rem; }
.field-error { color: var(--danger); font-size: .9rem; font-weight: 700; }

.alert { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem .75rem; margin-bottom: 1rem; padding: .85rem 1rem; border: 1px solid; border-radius: .55rem; }
.alert-error { color: #6f1e1e; border-color: #e7aaa5; background: var(--danger-tint); }
.alert-warning { color: #684405; border-color: #e8c56f; background: var(--warning-tint); }
.alert-success { color: #0b5738; border-color: #9bcfad; background: var(--success-tint); }
.status-surface { min-height: 2.75rem; margin-bottom: .85rem; padding: .65rem .8rem; border-left: .25rem solid #95aa9d; border-radius: .35rem; color: var(--muted); background: #edf3ef; font-size: .9rem; font-weight: 700; }
.status-surface.status-success { border-color: var(--success); color: var(--success); background: var(--success-tint); }
.status-surface.status-warning { border-color: var(--warning); color: var(--warning); background: var(--warning-tint); }
.status-surface.status-error { border-color: var(--danger); color: var(--danger); background: var(--danger-tint); }

.state-badge { min-height: 2.25rem; padding: .4rem .7rem; }
.state-ready { color: #0b5a38; background: var(--success-tint); }
.state-paused { color: #56655e; background: #e8eeea; }
.state-warning { color: var(--warning); background: var(--warning-tint); }
.state-dot { width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }

.receive-page { max-width: 110rem; }
.receive-grid { display: grid; gap: 1rem; }
.receive-controls, .recent-activity { min-width: 0; padding: clamp(1rem, 2vw, 1.5rem); }
.receive-controls { display: grid; align-content: start; gap: 1rem; }
.recent-activity { min-height: 18rem; }
.condition-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.condition-fieldset legend { margin-bottom: .35rem; color: var(--ink); font-size: 1rem; font-weight: 800; }
.condition-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .65rem; }
.condition-chip { position: relative; display: inline-flex; align-items: center; min-height: 3rem; padding: .55rem .75rem; border: 1px solid #a8bdb1; border-radius: .55rem; color: #315046; background: #fff; font-size: .9rem; font-weight: 750; }
.condition-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.condition-chip:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.condition-chip.is-selected { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-tint); box-shadow: inset 0 0 0 1px var(--brand); }
.quantity-form { display: grid; gap: .65rem; padding-top: .25rem; }
.quantity-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.quantity-label-row label { font-weight: 800; }
.quantity-next { color: var(--brand); font-size: .85rem; }
.quantity-control { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) 3.2rem; gap: .5rem; }
.quantity-button { min-height: 3.25rem; border: 1px solid #9fcab0; border-radius: .5rem; color: var(--brand-dark); background: var(--brand-tint); font-size: 1.45rem; font-weight: 750; }
.quantity-input { min-height: 3.25rem !important; text-align: center; font-size: 1.3rem; font-weight: 800; }

.scanner-panel { display: grid; gap: .75rem; padding: 1rem; border: 2px solid #aabeb3; border-radius: .65rem; background: #f7faf8; }
.scanner-panel--armed { border-color: var(--success); background: #f0faf4; }
.scanner-panel--paused { border-color: #a8b2ad; background: #f4f6f4; }
.scanner-panel-heading { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: .65rem; align-items: start; }
.scanner-panel-heading h3 { margin-bottom: .15rem; text-transform: capitalize; }
.scanner-panel-heading p { margin-bottom: 0; color: var(--muted); font-size: .85rem; }
.scanner-icon { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; color: var(--brand-dark); background: var(--brand-tint); font-weight: 900; }
.scan-sink { width: 100%; min-height: 3.2rem; border: 2px solid var(--brand); border-radius: .45rem; color: var(--ink); background: #fff; font-size: 1.1rem; }
.scan-sink:disabled { border-color: #b6c4bc; background: #e9efeb; }
.scanner-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.session-start { display: grid; gap: .75rem; padding: 1rem; border: 1px dashed #a8bdb1; border-radius: .6rem; background: #f7fbf8; }
.session-start p { margin-bottom: .25rem; color: var(--muted); }

.activity-list, .product-results, .photo-grid, .managed-photo-list, .quantity-summary { margin: 0; padding: 0; list-style: none; }
.activity-list { display: grid; gap: .65rem; max-height: 40rem; overflow: auto; overscroll-behavior: contain; }
.activity-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: .65rem; padding: .75rem; border: 1px solid #e0e8e2; border-radius: .55rem; background: #fbfdfb; }
.activity-row--committed { border-left: .3rem solid var(--success); }
.activity-main { display: grid; gap: .1rem; min-width: 0; }
.activity-main strong, .activity-main small { overflow-wrap: anywhere; }
.activity-meta { color: var(--muted); font-size: .87rem; }
.activity-main small { color: #6b7b73; font-size: .78rem; }
.activity-corrections { display: flex; flex-wrap: wrap; gap: .35rem; }
.condition-mini { min-height: 2.25rem; padding: .35rem .5rem; border: 1px solid #b5c8bc; border-radius: .4rem; color: #365349; background: #fff; font-size: .78rem; font-weight: 700; }
.condition-mini.is-current { color: var(--brand-dark); border-color: var(--brand); background: var(--brand-tint); }
.count-badge { padding: .18rem .48rem; color: var(--brand-dark); background: var(--brand-tint); vertical-align: .12em; }
.activity-loading { display: grid; gap: .65rem; }
.activity-skeleton { display: block; height: 4.2rem; border-radius: .55rem; background: #edf2ee; }
.empty-state, .detail-empty, .loading-card { display: grid; gap: .5rem; place-items: center; min-height: 10rem; padding: 1.5rem; color: var(--muted); text-align: center; }
.empty-state h3, .detail-empty h2, .empty-state p { margin-bottom: 0; }
.empty-icon { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: 50%; color: var(--brand); background: var(--brand-tint); font-size: 1.4rem; font-weight: 900; }

.manual-dialog { width: min(28rem, calc(100% - 2rem)); border: 0; border-radius: .8rem; padding: 1.25rem; box-shadow: 0 1rem 4rem rgb(0 0 0 / 25%); }
.manual-dialog::backdrop { background: rgb(10 30 22 / 50%); }
.manual-dialog form { display: grid; gap: 1rem; }
.dialog-actions { display: flex; justify-content: flex-end; gap: .5rem; }
.detail-grid, .create-grid { display: grid; gap: 1rem; }
.pending-identity, .product-create-page .card, .detail-grid > .card { min-width: 0; padding: clamp(1rem, 2vw, 1.5rem); }
.summary-list { display: grid; gap: .65rem; margin: 0 0 1rem; }
.summary-list div { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .5rem; border-bottom: 1px solid #e1e9e3; }
.summary-list dt { color: var(--muted); }
.summary-list dd { max-width: 60%; margin: 0; overflow-wrap: anywhere; text-align: right; font-weight: 750; }
.photo-manager { display: grid; align-content: start; gap: .75rem; }
.file-picker { display: grid; justify-items: start; gap: .4rem; padding: .2rem 0; color: var(--muted); font-size: .82rem; }
.file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.upload-progress { width: 100%; height: .7rem; accent-color: var(--brand); }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: .65rem; }
.photo-grid li { display: grid; gap: .25rem; min-width: 0; color: var(--muted); font-size: .75rem; }
.photo-grid img, .managed-photo img { width: 100%; aspect-ratio: 1; border-radius: .45rem; object-fit: cover; background: #edf2ee; }
.detail-page { max-width: 92rem; }
.managed-photo-list { display: grid; gap: .65rem; }
.managed-photo { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: .65rem; align-items: center; padding: .5rem; border: 1px solid #e0e8e2; border-radius: .5rem; }
.managed-photo.is-primary { border-color: #8bc39e; background: #f1faf4; }
.managed-photo-info { display: grid; gap: .15rem; min-width: 0; }
.managed-photo-info span { color: var(--muted); font-size: .8rem; }
.managed-photo-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .35rem; }
.quantity-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .5rem; }
.quantity-summary li { display: grid; gap: .1rem; padding: .7rem; border-radius: .45rem; background: #eff6f1; }
.quantity-summary span { color: var(--muted); font-size: .82rem; }
.quantity-summary strong { font-size: 1.25rem; }

.auth-page { display: grid; min-height: calc(100vh - 4.25rem); place-items: center; }
.auth-card { width: min(100%, 31rem); padding: clamp(1.25rem, 5vw, 2.5rem); border: 1px solid var(--line); border-radius: .9rem; background: var(--surface); box-shadow: var(--shadow); }
.auth-intro { margin-bottom: 1.5rem; }
.auth-intro .lede { font-size: .96rem; }
.form-note { margin: 1rem 0 0; text-align: center; }
.form-error-summary { padding: .75rem; border: 1px solid #e7aaa5; border-radius: .45rem; color: #6f1e1e; background: var(--danger-tint); }

.maintenance-toolbar { display: grid; gap: 1rem; margin-bottom: 1rem; padding: 1rem; }
.search-form { display: grid; gap: .45rem; }
.search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; }
.filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.filter-chip { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.35rem; padding: .35rem .6rem; border: 1px solid var(--line); border-radius: 99rem; color: #365349; background: #fff; font-size: .84rem; font-weight: 700; }
.maintenance-grid { display: grid; gap: 1rem; }
.product-list, .product-detail { min-width: 0; padding: 1rem; }
.product-list { align-self: start; }
.product-results { display: grid; gap: .4rem; max-height: 42rem; overflow: auto; }
.product-result { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: .65rem; align-items: center; width: 100%; min-height: 4.2rem; padding: .5rem; border: 1px solid transparent; border-radius: .5rem; color: var(--ink); background: #fbfdfb; text-align: left; }
.product-result:hover, .product-result.is-selected { border-color: #9fcab0; background: #eff8f2; }
.product-result img, .thumbnail-placeholder { display: grid; width: 3.5rem; height: 3.5rem; place-items: center; border-radius: .4rem; color: var(--brand-dark); background: var(--brand-tint); object-fit: cover; font-size: .78rem; font-weight: 900; }
.product-result-copy { display: grid; gap: .1rem; min-width: 0; }
.product-result-copy strong, .product-result-copy small, .product-result-copy span { overflow-wrap: anywhere; }
.product-result-copy small, .product-result-copy span { color: var(--muted); font-size: .78rem; }
.status-pill { padding: .25rem .45rem; color: #3c5549; background: #e9f0eb; font-size: .72rem; }
.status-pill--large { align-self: start; }
.load-more { width: 100%; margin-top: .75rem; }
.detail-empty { min-height: 28rem; }
.detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding-bottom: 1rem; border-bottom: 1px solid #e0e8e2; }
.detail-header h2 { max-width: 40rem; overflow-wrap: anywhere; }
.detail-code { margin-bottom: 0; }
.detail-section { display: grid; gap: .65rem; padding: 1.1rem 0; border-bottom: 1px solid #e0e8e2; }
.detail-section:last-child { border-bottom: 0; }
.inline-edit-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; }
.row-status { margin: 0; color: var(--success); font-size: .86rem; font-weight: 750; }
.empty-inline { margin: 0; padding: .7rem; border-radius: .45rem; color: var(--muted); background: #f2f6f3; font-size: .88rem; }
.correction-preview { padding: .7rem; border-left: .25rem solid var(--warning); color: #654505; background: var(--warning-tint); font-size: .88rem; }
.live-regions { position: fixed; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.shell { display: grid; gap: 2rem; }
.hero { max-width: 48rem; }
.ready { color: var(--success); font-weight: 750; }
.not-ready { color: var(--danger); font-weight: 750; }
.interaction { display: grid; gap: .75rem; justify-items: start; }

@media (min-width: 48rem) {
    body { font-size: 16px; }
    .receive-grid { grid-template-columns: minmax(18rem, .67fr) minmax(24rem, 1fr); align-items: start; }
    .recent-activity { max-height: calc(100vh - 12rem); overflow: hidden; }
    .activity-list { max-height: calc(100vh - 19rem); }
    .detail-grid, .create-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
    .pending-identity, .product-create-page .card:first-child { grid-column: 1; }
    .photo-manager, .product-create-page .card:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
    .maintenance-toolbar { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
    .maintenance-grid { grid-template-columns: minmax(18rem, .44fr) minmax(0, .56fr); align-items: start; }
    .product-list { max-height: calc(100vh - 16rem); overflow: hidden; }
    .product-results { max-height: calc(100vh - 23rem); }
}

@media (min-width: 64rem) {
    .receive-grid { grid-template-columns: minmax(20rem, .4fr) minmax(30rem, .6fr); }
    .maintenance-grid { grid-template-columns: minmax(21rem, .38fr) minmax(0, .62fr); }
}

@media (max-width: 47.99rem) {
    html { scroll-padding-bottom: 5rem; }
    .site-header { min-height: 3.75rem; }
    .app-frame { display: block; min-height: calc(100vh - 3.75rem); }
    .primary-nav { position: fixed; z-index: 10; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; min-height: 4.15rem; padding: .35rem .5rem calc(.35rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgb(234 242 236 / 97%); box-shadow: 0 -5px 18px rgb(20 54 39 / 8%); }
    .nav-link { display: grid; min-height: 3.3rem; justify-items: center; gap: .1rem; padding: .35rem .25rem; font-size: .74rem; text-align: center; }
    .nav-icon { width: 1.35rem; height: 1.35rem; }
    .page-surface { padding-bottom: 4.75rem; }
    .page-heading { flex-direction: column; }
    .heading-actions { width: 100%; justify-content: space-between; padding-top: 0; }
    .scanner-panel-heading { grid-template-columns: 2rem minmax(0, 1fr); }
    .scanner-panel-heading .button-toggle { grid-column: 1 / -1; width: 100%; }
    .detail-header { flex-direction: column; }
    .search-row, .inline-edit-form { grid-template-columns: 1fr; }
    .search-row .button, .inline-edit-form .button { width: 100%; }
    .product-result { grid-template-columns: 3.25rem minmax(0, 1fr); }
    .product-result .status-pill { grid-column: 2; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}