/* stock-take.css — the Stock Take screen (js/pages/stock-take.js), phone first. */
.st-wrap { max-width: 560px; margin: 0 auto; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.75rem; }
.st-title { margin: 0; color: var(--text-strong); }
.st-note { color: var(--text-muted); }
.st-head { display: flex; align-items: center; gap: 0.75rem; }
.st-head .st-back { flex: 0 0 auto; min-height: 44px; }
.st-sub { display: block; color: var(--text-muted); font-size: 0.85rem; }
.st-scan { width: 100%; min-height: 56px; font-size: 1.1rem; }
.st-search input { width: 100%; min-height: 44px; font-size: 1rem; }
.st-take {
    text-align: left; display: flex; flex-direction: column; gap: 0.25rem; min-height: 56px;
    padding: 0.75rem 1rem; background: var(--bg-card); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer;
}
.st-take span { color: var(--text-muted); font-size: 0.85rem; }
.st-matches { display: flex; flex-direction: column; gap: 0.25rem; }
.st-match {
    display: flex; justify-content: space-between; gap: 0.75rem; text-align: left; min-height: 44px;
    padding: 0.5rem 0.75rem; background: var(--bg-card); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer;
}
.st-match span { color: var(--text-muted); font-size: 0.8rem; white-space: nowrap; }
.st-queue { display: none; padding: 0.4rem 0.75rem; border-radius: var(--radius-sm); font-size: 0.9rem; }
.st-queue.st-queue-on { display: block; background: var(--warning-soft); color: var(--warning); }
.st-problem {
    display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.75rem;
    background: var(--danger-soft); color: var(--danger); border-radius: var(--radius-sm); margin-bottom: 0.25rem;
}
.st-problem button { background: none; border: 0; color: inherit; font-size: 1.2rem; cursor: pointer; }
.st-card {
    display: flex; flex-direction: column; gap: 0.35rem; padding: 0.75rem 1rem;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
}
.st-card.st-card-warn { border-color: var(--warning); }
.st-count { font-size: 1.1rem; color: var(--text-strong); }
.st-flag { color: #7a4503; font-size: 0.85rem; }   /* 6.1:1 on the tinted row; --warning is 4.2:1 (#2635) */
[data-theme="dark"] .st-flag { color: var(--warning); }
.st-actions { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.25rem; }
.st-actions input { flex: 1 1 auto; min-width: 0; min-height: 44px; }
.st-actions .btn { min-height: 44px; }
.st-tally { display: flex; flex-wrap: wrap; gap: 0.5rem; color: var(--text-muted); font-size: 0.9rem; }
.st-tally span { padding: 0.2rem 0.6rem; background: var(--bg-input); border-radius: var(--radius-pill); }
.st-matches:empty, #st-problems:empty, #st-last:empty, .st-tally:empty { display: none; }

/* The office page (js/pages/stock-take-desk.js). */
.st-desk { max-width: 1000px; margin: 0 auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.st-desk h3 { margin: 0.75rem 0 0; color: var(--text-strong); }
.st-bar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.st-bar .st-title { margin: 0; }
.st-start { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; padding: 0.75rem 1rem;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); }
.st-start label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; color: var(--text-muted); }
.st-start label[hidden] { display: none; }
.st-row { cursor: pointer; }
.st-row:hover, .st-row:focus { background: var(--bg-hover); }
.st-status { padding: 0.1rem 0.5rem; border-radius: var(--radius-pill); font-size: 0.8rem; background: var(--bg-input); color: var(--text-muted); }
.st-status-open { background: var(--accent-soft); color: var(--accent); }
.st-progress { height: 14px; background: var(--bg-input); border-radius: var(--radius-pill); overflow: hidden; }
.st-progress-fill { height: 100%; background: var(--accent); transition: width .3s; }
.st-moved { background: var(--warning-soft); }
.st-diff { font-weight: 600; }
.st-zero { display: flex; gap: 0.5rem; align-items: center; font-weight: 600; }
.st-commit { position: sticky; bottom: 0; padding: 0.75rem 1rem; background: var(--bg-card);
    border: 1px solid var(--border); border-radius: var(--radius); justify-content: space-between; }