. */
.emp-picker {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.emp-picker-legend,
.emp-picker-set {
margin: 0 0 var(--space-1);
padding: 0;
float: none;
width: auto;
color: var(--text-2);
font-size: var(--text-base);
line-height: 1.25rem;
}
.emp-picker-set {
margin-top: var(--space-3);
font-family: var(--font-mono);
font-size: var(--text-xs);
line-height: 1rem;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
}
.emp-picker-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
}
.emp-chip,
.emp-form label.emp-chip {
position: relative;
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border: 1px solid var(--edge);
border-radius: var(--radius-input);
background: var(--bg-2);
cursor: pointer;
}
.emp-chip input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.emp-chip .emp-mark {
width: 1.25rem;
height: 1.25rem;
margin: 0;
}
.emp-chip:hover { background: var(--bg-3); }
.emp-chip:has(input:checked) {
border-color: var(--text-1);
background: var(--bg-3);
box-shadow: inset 0 0 0 1px var(--text-1);
}
.emp-chip:has(input:focus-visible) {
outline: 2px solid var(--text-1);
outline-offset: 2px;
}
.emp-chip-name {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.emp-chip:has(input:disabled) {
cursor: not-allowed;
background: transparent;
border-style: dashed;
}
.emp-chip:has(input:disabled) .emp-mark { opacity: 0.25; }
.emp-picker-note {
margin: var(--space-2) 0 0;
color: var(--text-2);
font-size: var(--text-xs);
}
.sched-channel-filter { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; }
.sched-mobile-channel { display: inline-flex; align-items: center; gap: 0.35rem; }
.month-stream .channel-dot { width: 0.45rem; height: 0.45rem; margin-right: 0.2rem; }
/* —— Login —— */
.login-page {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
background: var(--bg-0);
}
.login-card {
width: 100%;
max-width: 400px;
padding: 2rem 1.75rem;
border-radius: var(--radius);
position: relative;
overflow: hidden;
background: transparent;
border: 0;
border-top: 1px solid var(--line-strong);
border-radius: 0;
box-shadow: none;
}
.login-brand {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--text-2xl);
color: var(--text);
letter-spacing: var(--tracking-display);
text-align: center;
margin-bottom: 0.25rem;
}
.login-card .form-label {
font-size: var(--text-sm);
font-weight: 500;
color: var(--text-muted);
}
.login-card .form-control {
border-radius: var(--radius-sm);
border-color: var(--edge);
background: var(--surface-muted);
color: var(--text);
padding: 0.65rem 0.85rem;
}
.login-card .form-control:focus {
border-color: var(--text-2);
box-shadow: var(--focus-ring);
}
/* —— Bootstrap dark overrides —— */
.border { border-color: var(--line) !important; }
.bg-white { background: var(--bg-1) !important; }
/* Money is a number, not a mood: no green gains or red losses. A loss
carries its minus sign. */
.text-success { color: var(--text-1) !important; }
.text-danger { color: var(--text-1) !important; }
/* Bootstrap's other text colours would bring amber (Unmatched), green (the
commit key) or blue (LIVE) to words that mean none of them. */
.text-warning,
.text-primary,
.text-info { color: var(--text-1) !important; }
/* Menus and dialogs: an opaque raised plane with a strong edge, no sheen,
no drop shadow. Dialogs are for destructive confirmations only. */
.dropdown-menu {
background: var(--bg-2) !important;
border: 1px solid var(--line-strong) !important;
border-radius: var(--radius-input) !important;
box-shadow: none;
color: var(--text-1);
padding: var(--space-1) 0;
}
/* The page behind must not show through the form fields. */
.modal-content {
background: var(--glass-solid) !important;
border: 1px solid var(--line-strong) !important;
border-radius: var(--radius-tile) !important;
box-shadow: none;
color: var(--text-1);
}
.modal-header,
.modal-footer {
border-color: var(--line);
}
.modal-backdrop {
--bs-backdrop-bg: #000;
--bs-backdrop-opacity: 0.7;
}
.offcanvas {
--bs-offcanvas-bg: var(--bg-1);
--bs-offcanvas-color: var(--text-1);
--bs-offcanvas-border-color: var(--line-strong);
}
.modal.fade .modal-dialog {
transform: none;
transition: opacity var(--dur) linear;
}
.modal.show .modal-dialog {
transform: none;
}
.dropdown-item {
color: var(--text-2);
min-height: 2.5rem;
display: flex;
align-items: center;
}
.dropdown-item:hover,
.dropdown-item:focus {
background: var(--bg-3);
color: var(--text-1);
}
/* —— Sale logger shared chrome —— */
body.logger-mode,
.logger {
font-family: var(--font-body);
color: var(--text);
background: var(--page-bg);
}
.logger .logger-live,
.logger .logger-stat,
.logger .last-log-name,
.logger .last-log-weight,
.logger .tap,
.logger .flash-ok {
font-family: var(--font-display);
}
.logger .label,
.logger .last-log-label {
letter-spacing: 0.08em;
font-family: var(--font-body);
}
/* —— Icons —— */
.icon {
width: 1rem;
height: 1rem;
display: inline-block;
vertical-align: -0.125em;
stroke-width: 1.5;
flex-shrink: 0;
}
.icon-sm { width: 0.9rem; height: 0.9rem; }
.icon-lg { width: 1.25rem; height: 1.25rem; }
.hub-tab {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.hub-tab .icon,
.platform-chip .icon,
.upload-zone .icon {
opacity: 0.9;
}
.platform-chip {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.upload-zone .upload-icon {
width: 1.75rem;
height: 1.75rem;
color: var(--accent-hover);
margin-bottom: 0.5rem;
stroke-width: 1.75;
}
/* —— Shared motion —— */
/* Page entrance: none. A page is complete at first paint (design book,
Motion: six movements, and arriving pages are not one of them). The
classes stay on old templates as harmless names. */
.motion-enter,
.motion-stagger > * {
animation: none;
}
/* A hover changes tone, never position (rule 07). */
.hover-lift {
transition:
background var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out);
}
.hover-lift:hover {
background: var(--bg-1);
}
/* Key travel: 1px down for 80ms. No scale, no bounce. */
.tap-feedback:active {
transform: translateY(1px);
}
.btn-primary,
.btn-outline-primary,
.cat-pill,
.hub-tab,
.sidebar-link {
transition:
background var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-snap),
box-shadow var(--dur-fast) var(--ease-out);
}
.btn-primary:active,
.btn-outline-primary:active,
.cat-pill:active,
.hub-tab:active {
transform: translateY(1px);
}
/* A table cell holding only a checkbox is its label (base.html forwards the
tap), so the target is the whole cell, not the 13px box. */
td.check-cell,
th.check-cell {
cursor: pointer;
}
/* —— Phones ——
44px is the smallest comfortable tap target. (Form fields get a 16px text
floor from base.html so iOS stops zooming in on every tap; a CSS rule
would also shrink the logger's larger fields.) */
@media (max-width: 767.98px) {
.btn,
.inv-custom-select__trigger,
.cat-pill,
.seg-item,
a.channel-chip,
.home-quicklink,
.back-link,
.stream-page-prevnext a {
min-height: 44px;
}
/* Centre the label in the taller box. Grouped buttons keep their own
inline flow (icon + wrapping label). */
.btn:where(:not(.btn-group > .btn)) {
display: inline-flex;
align-items: center;
justify-content: center;
}
.cat-pill,
.seg-item,
a.channel-chip,
.home-quicklink,
.back-link,
.stream-page-prevnext a {
display: inline-flex;
align-items: center;
}
/* Page back links (aliases of .back-link) */
a.pd-back,
a.stream-detail-back,
a.ship-back,
a.page-back,
a.si-back {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.form-check-input,
input[type="checkbox"],
input[type="radio"] {
width: 1.35rem;
height: 1.35rem;
}
/* A switch keeps its track twice as long as it is tall */
.form-switch .form-check-input { width: 2.7rem; }
.form-check {
min-height: 44px;
display: flex;
align-items: center;
gap: 0.5rem;
}
.form-check.form-check-inline {
display: inline-flex;
}
.form-check .form-check-input {
margin-top: 0;
}
td.check-cell,
th.check-cell {
min-width: 44px;
height: 44px;
}
}
/* —— The one dialog (design book 05.5) ——
Destructive or irreversible acts only. instrument.js opens it from
form[data-confirm-title] (attributes documented there). A raised plane:
the act's words as a mono legend, the question naming the object, what
happens, then the act key and the way out, both neutral. .pd-confirm is
the old name, kept so nothing drawn with it breaks. */
.confirm-dialog,
.pd-confirm {
box-sizing: border-box;
width: min(28rem, calc(100vw - 2 * var(--page-margin)));
max-width: none;
margin: auto;
padding: var(--space-6);
border: 1px solid var(--line-strong);
border-radius: var(--radius-tile);
background: var(--bg-1);
color: var(--text-1);
}
.confirm-dialog::backdrop,
.pd-confirm::backdrop {
background: color-mix(in srgb, var(--bg-0) 80%, transparent);
}
.confirm-dialog-legend {
margin: 0 0 var(--space-2);
font-family: var(--font-mono);
font-size: var(--type-label);
line-height: 1rem;
font-weight: 500;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--text-2);
}
.confirm-dialog-title,
.pd-confirm h2 {
margin: 0 0 var(--space-2);
font-size: var(--text-xl);
line-height: 1.5rem;
font-weight: 400;
color: var(--text-1);
overflow-wrap: anywhere;
}
.confirm-dialog-body,
.pd-confirm p:not(.confirm-dialog-legend) {
margin: 0;
color: var(--text-2);
font-size: var(--text-base);
line-height: 1.25rem;
}
.confirm-dialog-keys,
.pd-confirm-keys {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: var(--space-6);
}
@media (max-width: 767.98px) {
/* Phones: the keys under the thumb, full width, the act first. */
.confirm-dialog-keys .btn { flex: 1 1 100%; min-height: 3rem; }
}
/* The second press (data-ask): the key holds its question until pressed
again or 4 s pass. Text colour, never red. */
.btn.is-asking,
[data-ask].is-asking {
border-color: var(--text-1);
color: var(--text-1);
}
/* —— Inline error (design book 05.5) ——
An inverted line with the ✗ mark: what happened, then what to do. Written
by Instrument.showError() or by a template:
(a lone works too) */
.form-error-block {
display: grid;
gap: var(--space-1);
justify-items: start;
margin: var(--space-2) 0 0;
}
.form-error-block:first-child { margin-top: 0; }
.form-error {
display: inline-block;
margin: 0;
padding: var(--space-2) var(--space-3);
background: var(--text-1);
color: var(--bg-0);
font-family: var(--font-ui);
font-size: var(--text-base);
line-height: 1.25rem;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
text-align: left;
overflow-wrap: anywhere;
}
.form-error::before { content: "✗ "; content: "✗ " / ""; }
/* A day-first date filter's error slot ({% day_date_error %}): a row of its
own under the bar's fields, whether the bar is a flex row or a grid, and
nothing at all while it is empty. */
.day-first-errors {
flex: 1 1 100%;
grid-column: 1 / -1;
}
.day-first-errors:empty { display: none; }
/* —— Pay range (_pay_range.html): quick picks, then From/To and Show ——
One wrapping row on Payroll and on the Bag home's Earnings. */
.pay-range {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2) var(--space-4);
}
.pay-range-form {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
margin: 0;
}
.pay-range-field {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--text-2);
}
.pay-range-field .form-control {
width: 8rem;
min-width: 0;
}
.form-error-next {
margin: 0;
color: var(--text-2);
font-family: var(--font-ui);
font-size: var(--text-base);
line-height: 1.25rem;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
}
/* —— The toast (design book 05.5) ——
One at a time: an inverted plane bottom left at the page margin, above the
keys on a phone (a page with a bottom key bar sets --toast-offset to the
bar's height). It arrives with opacity and an 8px rise, 200 ms. Drawn by
Instrument.toast(); overrides Bootstrap's .toast, which no page uses. */
.toast,
.toast:not(.show) {
position: fixed;
z-index: 1090;
left: var(--page-margin);
bottom: calc(var(--toast-offset, 0px) + var(--page-margin) + max(var(--tabbar-space, 0px), env(safe-area-inset-bottom)));
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: var(--space-2) var(--space-4);
box-sizing: border-box;
width: auto;
min-width: min(17.5rem, calc(100vw - 2 * var(--page-margin)));
max-width: min(30rem, calc(100vw - 2 * var(--page-margin)));
margin: 0;
padding: var(--space-3) var(--space-4);
border: 0;
border-radius: 0;
box-shadow: none;
background: var(--text-1);
color: var(--bg-0);
font-family: var(--font-ui);
font-size: var(--text-base);
line-height: 1.25rem;
pointer-events: auto;
animation: toast-arrive 200ms var(--ease-out) both;
}
.toast[hidden] { display: none; }
.toast.is-leaving { animation: toast-leave 200ms var(--ease-out) both; }
body.has-shell:not(.logger-mode) .toast { left: calc(240px + var(--page-margin)); }
.toast-text { grid-column: 1; min-width: 0; overflow-wrap: anywhere; }
.toast-text:only-child { grid-column: 1 / -1; }
.toast-text b,
.toast-text strong { font-weight: 500; }
.toast-key {
grid-column: 2;
grid-row: 1 / span 2;
min-height: 2.25rem;
padding: var(--space-1) var(--space-3);
border: 1px solid currentColor;
border-radius: var(--radius-key);
background: transparent;
color: inherit;
font: 500 var(--text-base) / 1.25rem var(--font-ui);
cursor: pointer;
}
.toast-key:hover { background: color-mix(in srgb, var(--bg-0) 12%, transparent); }
.toast-key:focus-visible { outline: 2px solid var(--bg-0); outline-offset: 2px; }
.toast-dots {
grid-column: 1;
grid-row: 2;
display: flex;
gap: var(--space-1);
}
.toast-dots i {
width: 4px;
height: 4px;
border-radius: 50%;
background: currentColor;
}
.toast-dots i.is-out { opacity: 0.3; }
@keyframes toast-arrive {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
@keyframes toast-leave {
from { opacity: 1; transform: none; }
to { opacity: 0; transform: translateY(8px); }
}
/* —— The page's messages (base.html) ——
Errors and warnings stay above the page's content as the inline error,
still, until the next page. Success and info leave as the toast: the
.page-notes list is hidden while scripting runs (instrument.js takes it
out and shows each line as a toast) and drawn as plain lines when it
does not, so nothing is lost. */
.page-messages {
display: grid;
gap: var(--space-2);
}
.page-messages:has(> .form-error-block) { margin-bottom: var(--space-4); }
.page-messages > .form-error-block { margin: 0; }
.page-notes {
display: grid;
gap: var(--space-2);
margin: 0;
padding: 0;
list-style: none;
}
.page-note {
padding: var(--space-3) var(--space-4);
border-top: 1px solid var(--text-1);
background: var(--bg-1);
color: var(--text-1);
font-size: var(--text-base);
line-height: 1.25rem;
}
.page-notes:not(:has(> .page-note)) { display: none; }
.page-messages:not(:has(> .form-error-block)) > .page-notes { margin-bottom: var(--space-4); }
@media (scripting: enabled) {
.page-notes { display: none; }
}
/* —— In place (instrument.js): a row that left stays out of the layout while
Undo can bring it back; a key waiting for its answer says so to the pointer. */
[data-in-place-item][hidden] { display: none !important; }
form[data-in-place] [aria-busy="true"] { cursor: progress; }
/* A wrapper that only names a part to redraw: it adds no box of its own. */
.in-place-part { display: contents; }
/* A section alone in its slot is not the page's last: it keeps its gap below. */
:where(.in-place-part:not(:last-child)) > .section:last-child { margin-bottom: var(--section-gap); }
@media (max-width: 991px) {
body.has-shell:not(.logger-mode) .toast { left: var(--page-margin); }
.toast,
.toast:not(.show) {
left: var(--page-margin);
right: var(--page-margin);
max-width: none;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* —— The tape (DESIGN.md, The Bay and the desk; _tape.html) ——
Every Sale so far as a tick (a combo once) and every Red Light as a taller
red one, placed by time from the Stream's start; under them the lane of
what needs a person: an Unmatched in amber when it needs one, grey when the
site will hold it as a Blank. While LIVE the now line is lit, and a usual
end past it is dashed. */
.tape {
display: grid;
gap: 0;
min-width: 0;
}
.tape-lane {
display: grid;
grid-template-columns: 4rem minmax(0, 1fr);
align-items: end;
height: 1.5rem;
}
.tape-name {
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: 500;
line-height: 1rem;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--text-2);
}
.tape-line {
position: relative;
height: 100%;
min-width: 0;
}
.tape-rule {
position: absolute;
left: 0;
bottom: 0;
height: 1px;
background: var(--line-strong);
}
/* The usual end, past now: dashed, a time not yet reached. */
.tape-rule.is-ahead {
right: 0;
background: repeating-linear-gradient(90deg, var(--line-strong) 0 4px, transparent 4px 8px);
}
.tape-tick {
position: absolute;
bottom: 0;
width: 2px;
height: 1rem;
margin-left: -1px;
background: var(--text-2);
}
.tape-tick.is-red-light {
height: 1.5rem;
background: var(--red);
}
.tape .glyph {
position: absolute;
bottom: 0.25rem;
margin-left: -0.3125rem;
}
.tape .glyph--unmatched.is-quiet { background: var(--text-2); }
.tape.is-live .tape-now {
position: absolute;
top: 0;
bottom: 0;
width: 2px;
margin-left: -1px;
background: var(--live);
}
.tape-times { height: 1.25rem; align-items: start; }
.tape-label {
position: absolute;
top: var(--space-1);
transform: translateX(-50%);
font-family: var(--font-mono);
font-size: var(--text-xs);
line-height: 1rem;
white-space: nowrap;
color: var(--text-2);
}
.tape-label.is-from { transform: none; }
.tape-label.is-to { transform: translateX(-100%); }
/* Compact (Home's LIVE rows): no lane names, the line the row's full width. */
.tape.is-compact .tape-lane { grid-template-columns: minmax(0, 1fr); }
.tape.is-compact .tape-name { display: none; }
@media (max-width: 575.98px) {
.tape-lane { grid-template-columns: 3.5rem minmax(0, 1fr); }
/* The round times between give way first; the start and the end stay. */
.tape-label:not(.is-from):not(.is-to) { display: none; }
}
/* —— The plain zero (DESIGN.md, Type) ——
Figures that hold only digits take Geist Mono's plain zero (ss09), which
reads apart from an 8 at a glance; codes, handles and order numbers keep
the slashed zero, so a 0 never passes for an O. */
.poster,
.kpi-value,
.inv-stat-value,
.stat-card .stat-value,
.cents,
.elapsed,
.live-bug-clock,
.live-bug-stickers,
.live-bug-unmatched,
.tape-time { font-feature-settings: "ss09" 1; }