* { box-sizing: border-box; }
body { margin: 0; background: var(--color-page); color: var(--color-ink); font-family: var(--font-body); font-size: var(--font-size-body); line-height: var(--font-line-height); }
main { max-width: var(--size-page); margin: auto; padding: var(--space-4) var(--space-3); }
header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-5); }
.brand { color: var(--color-accent); font-size: var(--font-size-section); font-weight: var(--font-weight-emphasis); }
.badge { background: var(--color-tint); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-2); font-size: var(--font-size-small); }
h1 { font-family: var(--font-title); font-size: var(--font-size-title); line-height: var(--font-line-height-title); margin: 0 0 var(--space-3); }
h2 { font-size: var(--font-size-section); margin: 0 0 var(--space-2); }
.intro, footer { color: var(--color-muted); }
section { background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-4); margin-top: var(--space-4); }
label { display: block; margin-bottom: var(--space-1); }
select { width: 100%; min-height: var(--size-control); font: inherit; color: var(--color-ink); background: var(--color-surface); padding: var(--space-2); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-control); }
select:focus-visible { outline: var(--border-width) solid var(--color-accent); outline-offset: var(--space-1); }
dl { margin-bottom: 0; }
dt { color: var(--color-muted); margin-top: var(--space-3); }
dd { margin: 0; }
footer { margin-top: var(--space-4); font-size: var(--font-size-small); }
/* 2026-11-09, #4: one persistent scan bar stays available during record prompts. */
[hidden] { display: none !important; }
button, input { min-height: var(--size-control); padding: var(--space-2); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-control); font: inherit; }
button { cursor: pointer; color: var(--color-surface); background: var(--color-accent); margin-block: var(--space-1); }
button:disabled { opacity: .6; cursor: wait; }
input { min-width: 0; width: 100%; }
input:focus-visible, button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.scan-row { display: flex; gap: var(--space-2); }
.scan-row input { flex: 1; }
#scan { font-family: monospace; }
#context { font-weight: var(--font-weight-emphasis); }
#scan-result, #print-result { overflow-wrap: anywhere; }
.camera-controls { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.camera-controls label { width: 100%; }
video { width: 100%; max-height: 24rem; background: var(--color-ink); margin-top: var(--space-2); }
#job-choices button { display: block; width: 100%; }
/* 2026-11-09, #5: prototype step, count, pack and floating Undo screens. */
.job-banner { background: var(--color-tint); border-radius: var(--radius-control); padding: var(--space-3); }
.job-banner.hold { background: var(--color-hold-tint); color: var(--color-hold); border: var(--border-width) solid var(--color-hold); }
#job-action-fail { background: var(--color-hold); }
#job-controls > button { width: 100%; }
#record-contents { padding-left: var(--space-3); }
#record-contents li { padding-block: var(--space-1); }
.reason-fields { margin-block: var(--space-3); }
textarea { width: 100%; font: inherit; padding: var(--space-2); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-control); }
.quantity-table { width: 100%; border-collapse: collapse; }
.quantity-table td, .quantity-table th { text-align: left; padding: var(--space-2); border-bottom: var(--border-width) solid var(--color-border); }
.quantity-table input { max-width: 7rem; }
.pack-line { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--space-2); align-items: center; }
.print-choice { display: flex; gap: var(--space-2); align-items: center; margin-block: var(--space-3); }
.print-choice input { width: var(--size-control); }
#step-toast { position: fixed; bottom: var(--space-2); left: 50%; transform: translateX(-50%); width: min(92%,var(--size-page)); background: var(--color-ink); color: var(--color-surface); padding: var(--space-2); border-radius: var(--radius-control); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); z-index: 2; }
/* 2026-11-09, #6: stock prompts, blind entries and supervisor editing. */
#stock-toast { position: fixed; bottom: var(--space-2); left: 50%; transform: translateX(-50%); width: min(92%,var(--size-page)); background: var(--color-ink); color: var(--color-surface); padding: var(--space-2); border-radius: var(--radius-control); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); z-index: 3; }
#stock-controls > button { width: 100%; }
.supervisor-panel { border-top: var(--border-width) solid var(--color-border); margin-top: var(--space-4); padding-top: var(--space-3); overflow-wrap: anywhere; }
.supervisor-panel h3 { margin-top: 0; }
.supervisor-panel input,.supervisor-panel select { margin-bottom: var(--space-2); }
.count-line { padding-block: var(--space-2); }
#stock-table p { padding-bottom: var(--space-2); border-bottom: var(--border-width) solid var(--color-border); }
details { margin-block: var(--space-2); }
/* 2026-11-09, #7: story selection and a locally drawn phone join code. */
#chapters { display: grid; grid-template-columns: repeat(auto-fit,minmax(13rem,1fr)); gap: var(--space-2); }
#chapters button { text-align: left; }
#join-code { display: grid; gap: var(--space-2); overflow-wrap: anywhere; }
#join-code canvas { max-width: 100%; height: auto; }
#email-form { margin-top: var(--space-3); }
#entry-status,#mode-status { overflow-wrap: anywhere; }