/* ========================================================================== Sun City Birria — Inventory Design system Brand: navy #153143, teal #54AEA6, orange #E86F0D. Built mobile-first: staff use this on a phone, standing up, one-handed. No framework — this replaces Bootstrap, MDB, Font Awesome, select2, jQuery UI and Material icons, which together were ~1.5 MB of CDN downloads before a single row of inventory appeared. ========================================================================== */ /* -------------------------------------------------------------------------- Tokens -------------------------------------------------------------------------- */ :root { /* Brand */ --navy: #153143; --navy-700: #1d4257; --navy-300: #4a6c81; --teal: #54AEA6; --teal-600: #418983; --teal-700: #31635f; --orange: #E86F0D; --orange-700: #C4600D; /* Neutrals */ --white: #ffffff; --gray-50: #f7f8f9; --gray-100: #eef0f2; --gray-200: #e3e5e8; --gray-300: #cdd2d7; --gray-400: #a6aeb6; --gray-500: #6b7680; --gray-600: #4d565e; /* Semantic */ --bg: var(--gray-50); --surface: var(--white); --border: var(--gray-200); --border-strong: var(--gray-300); --text: var(--navy); --text-muted: var(--gray-500); --primary: var(--teal-600); --primary-hover: var(--teal-700); --danger: #c0392b; --danger-bg: #fdecea; --success: #1e7d5a; --success-bg: #e6f4ee; --warning: var(--orange); --warning-bg: #fdf0e4; /* Spacing — 4px scale */ --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --radius: 10px; --radius-sm: 6px; --radius-lg: 16px; /* A wash of the app's own accent, for the one panel on the home page that is neither a store nor a count. */ --tint-accent: #eaf5f4; --tint-accent-edge: #cfe6e3; --shadow-sm: 0 1px 2px rgba(21, 49, 67, 0.06); --shadow: 0 2px 8px rgba(21, 49, 67, 0.08); --shadow-lg: 0 12px 32px rgba(21, 49, 67, 0.16); /* Motion — one vocabulary, so nothing invents its own timing. Deliberately short. This is a tool somebody uses fifty times in a shift with cold hands, and an animation you can WAIT for is an animation that has started costing money. Nothing here is longer than a third of a second, and the two you touch most (press, hover) are under 150ms so they read as the surface responding rather than as a effect playing. */ --dur-press: 90ms; --dur-quick: 140ms; --dur-base: 200ms; --dur-enter: 280ms; /* Decelerating: fast off the mark, settling at the end. Things that arrive on screen should look like they are coming to rest, not braking. */ --ease: cubic-bezier(0.2, 0, 0, 1); --ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --header-height: 56px; } /* -------------------------------------------------------------------------- Reset -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* The background goes on , not just . * * Everything outside the page box is painted from here: the home-indicator * strip under a Home Screen app, the rubber-band area when you overscroll, * and — on iOS Safari — the strip behind the bottom address bar, which * samples this colour. With it left unset, all three showed white against a * dark page. */ html { -webkit-text-size-adjust: 100%; background: var(--bg); min-height: 100%; /* No double-tap zoom. The meta tag alone does not stop it in the installed app, and a double tap while ticking a checklist landed the page at 2x with nothing on screen explaining why. "manipulation" keeps panning and normal scrolling, and drops only the zoom gesture. */ touch-action: manipulation; } /* The login screen is dark end to end, so matches its gradient's bottom colour rather than the app's light grey. */ html.is-login { background: #0d2130; } body { margin: 0; font-family: var(--font); /* 16px minimum: anything smaller makes iOS Safari zoom on input focus. */ font-size: 16px; line-height: 1.5; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { margin: 0; font-weight: 650; line-height: 1.25; } h1 { font-size: 1.375rem; } h2 { font-size: 1.125rem; } h3 { font-size: 1rem; } p { margin: 0 0 var(--s3); } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } button:disabled { cursor: not-allowed; opacity: 0.5; } table { border-collapse: collapse; width: 100%; } [hidden] { display: none !important; } :focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } /* -------------------------------------------------------------------------- Layout -------------------------------------------------------------------------- */ /* Installed on an iPhone Home Screen the web view runs full-bleed, right up under the clock and the notch. viewport-fit=cover is what asks for that, and env(safe-area-inset-*) is what pays for it — without the top inset the header sits underneath the status bar and the brand is unreadable. The navy deliberately extends INTO the inset so the status bar looks like part of the header rather than a white strip above it. */ .app-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: calc(var(--header-height) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); padding-right: max(var(--s4), env(safe-area-inset-right, 0px)); padding-bottom: 0; padding-left: max(var(--s4), env(safe-area-inset-left, 0px)); background: var(--navy); color: var(--white); box-shadow: var(--shadow); } .app-header__brand { display: flex; align-items: center; gap: var(--s3); min-width: 0; } .app-header__logo { height: 30px; width: auto; display: block; } .app-header__title { font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-header__user { display: flex; align-items: center; gap: var(--s3); font-size: 0.875rem; } /* What a phone header can hold, said properly this time. The old note here read "two icons plus Sign out" — and then the bar grew to four icons plus Sign out, which is how "Sun City Birria" ended up rendering as "Sun Cit…". Sign out has moved into Settings and the icons lost their boxes; the rule now is that the NAME gets whatever the icons do not need, and the icons sit tight against each other rather than spaced like buttons. */ @media (max-width: 30rem) { .app-header { gap: var(--s2); } .app-header__user { gap: 2px; } /* The name may shrink, but never below something readable — and it wraps to a second line rather than becoming an ellipsis, because a truncated company name looks like a bug in the app rather than a narrow screen. */ .app-header__title { font-size: 0.875rem; } } /* Below this the logo is doing the identifying, and two lines of name in a 40px bar is worse than none. */ @media (max-width: 20rem) { .app-header__title { display: none; } } .app-main { max-width: 60rem; margin: 0 auto; padding: var(--s5) max(var(--s4), env(safe-area-inset-right, 0px)) calc(var(--s7) + env(safe-area-inset-bottom, 0px)) max(var(--s4), env(safe-area-inset-left, 0px)); } .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s5); } .page-head__sub { margin: var(--s1) 0 0; color: var(--text-muted); font-size: 0.875rem; } .stack { display: grid; gap: var(--s4); } .stack-2 { display: grid; gap: var(--s2); } .row { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; } .row--end { justify-content: flex-end; } .grow { flex: 1 1 auto; min-width: 0; } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); /* 44px tall — the minimum comfortable tap target on a phone. */ min-height: 44px; padding: var(--s2) var(--s4); border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--primary); color: var(--white); font-size: 0.9375rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, border-color 0.15s ease; } .btn:hover:not(:disabled) { background: var(--primary-hover); } .btn:active:not(:disabled) { transform: translateY(1px); } .btn--secondary { background: var(--surface); border-color: var(--border-strong); color: var(--text); } .btn--secondary:hover:not(:disabled) { background: var(--gray-100); } .btn--ghost { background: transparent; color: var(--text); border-color: transparent; } .btn--ghost:hover:not(:disabled) { background: var(--gray-100); } .btn--danger { background: var(--danger); } .btn--danger:hover:not(:disabled) { background: #a5312a; } .btn--warning { background: var(--orange); } .btn--warning:hover:not(:disabled) { background: var(--orange-700); } .btn--on-navy { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.25); color: var(--white); min-height: 36px; padding: var(--s1) var(--s3); font-size: 0.875rem; } .btn--on-navy:hover:not(:disabled) { background: rgba(255, 255, 255, 0.22); } .btn--sm { min-height: 36px; padding: var(--s1) var(--s3); font-size: 0.875rem; } .btn--block { width: 100%; } .btn--icon { min-height: 40px; width: 40px; padding: 0; font-size: 1.125rem; line-height: 1; } /* -------------------------------------------------------------------------- Cards -------------------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .card__body { padding: var(--s4); } .card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s4); border-bottom: 1px solid var(--border); } .card__footer { padding: var(--s3) var(--s4); border-top: 1px solid var(--border); background: var(--gray-50); border-radius: 0 0 var(--radius) var(--radius); } /* Location cards on the dashboard */ .location-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); } .location-card__name { font-size: 1.0625rem; font-weight: 650; } /* The address, and the store name when the heading is already the brand's. Deliberately quieter than the name but louder than the footnote — it is what tells two stores of the same concept apart. */ .location-card__where { font-size: 0.875rem; color: var(--gray-600); margin-top: 2px; } /* Who counted last. A footnote, so it sits under the buttons in a footnote's type rather than competing with the name for the top of the card. */ .location-card__meta { font-size: 0.8125rem; color: var(--text-muted); margin-top: var(--s3); } /* The low-stock warning on one store's card. Full width and tappable — it is the one thing on the card that needs acting on today. */ .location-card__stock { display: flex; align-items: center; gap: var(--s2); width: 100%; margin-bottom: var(--s3); padding: var(--s2) var(--s3); border: 1px solid #f6d3ae; border-left: 3px solid var(--orange); border-radius: var(--radius-sm); background: var(--warning-bg); color: #8a4308; font: inherit; font-size: 0.875rem; font-weight: 600; text-align: left; cursor: pointer; } .location-card__stock--critical { border-color: #f3c6c1; border-left-color: var(--danger); background: var(--danger-bg); color: #8c2018; } /* ---- the home page's two cards ---------------------------------------- People and paperwork, then the concept's box. They are built the same way on purpose: a coloured header saying whose it is, and a white sheet under it holding what belongs to it. That sameness is the point. An earlier pass restyled the concept's box and left the HR band as it was, so the page read as two designs sharing a screen. Anything that is a card up here uses this one shape. */ .home-card { background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--s4); box-shadow: var(--shadow-sm), 0 6px 20px rgba(21, 49, 67, 0.05); } .home-card__head { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--brand-header, var(--navy)); color: var(--brand-header-text, var(--white)); } .home-card__title { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .home-card__sub { margin: 1px 0 0; font-size: 0.8125rem; opacity: 0.75; } .home-card__naming { min-width: 0; flex: 1 1 auto; } /* The white sheet under the tabs, outlined in the active tab's colour so the tab and its card read as one object. This started as a coloured bar along the top edge and went through two attempts — floating in white space, then too thin for its own rounding to be visible. A plain border all the way round is the thing it kept trying to be. */ .home-card__body { padding: var(--s4); } .tab-head + .home-card__body { /* All four sides, the top included. The active tab is the same colour, so the line runs INTO it and the two read as one piece of card — while the inactive tabs stay visibly cut off above it. That join is the whole point of the border. */ border: 2px solid var(--brand-header, var(--navy)); /* Matching the card's own corners, since the card clips to them anyway. */ border-radius: 0 0 var(--radius-lg) var(--radius-lg); } /* ---- the concept's box ------------------------------------------------- Its own class only for the parts the HR band has no use for. */ /* ---- tabs inside a screen ---------------------------------------------- These used to be pills, on the argument that the brand tabs ARE a card's top edge while these merely sit above a list. That distinction is gone: every tab strip in the app now wears the same folder shape, so somebody who has learnt what a tab looks like on the home page recognises one anywhere. The strips themselves are .tab-head/.tab-head__tab; what each of them needs is a joined body underneath (.doc-tab-body) or the border has nothing to run into. The pill rules that were here are gone with their last call site. */ .brand-shell__stores { display: flex; flex-direction: column; gap: var(--s3); } /* Suppliers and costings. A strip rather than a card: inside the box the heading would be the brand name printed twice on top of itself. */ /* Tinted rather than grey. It is the one thing in this card that is not a store, so it should not look like a store that lost its contents — and the tint is drawn from the app's own accent so it belongs to the palette instead of introducing a colour of its own. */ .back-office { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); padding: var(--s3); background: var(--tint-accent); border: 1px solid var(--tint-accent-edge); border-radius: var(--radius); } /* Not text-transform: uppercase — the label is written "Back Office" and it should read that way rather than being shouted. */ .back-office__label { font-size: 0.875rem; font-weight: 600; color: var(--teal-700); } .back-office__actions { display: flex; gap: var(--s2); flex-wrap: wrap; margin-left: auto; } /* ---- the concept's card, tabbed ---------------------------------------- The tabs ARE the top of the card, like the tabs on a folder: the active one is the card's coloured header and the others sit beside it, waiting. Inside the card, under a header of their own, they read as a control that happened to be filed in there; up here they read as which folder you are looking at. With one concept there is nothing to switch, so the single tab fills the bar and is drawn as a plain header — the same shape as the band above it. */ .tab-head { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* No background of its own. It used to be a grey bar with the tabs painted on it, which meant the ROW had square outer corners however the tabs were rounded — a box with tab-shaped divisions rather than tabs. Each tab now carries its own colour and its own rounded top, and the strip is just what holds them in a line. */ background: transparent; } .tab-head::-webkit-scrollbar { display: none; } /* grow: 1 so the tabs share the whole bar between them — a strip that stopped short left a stub of grey on the right that looked like a rendering fault rather than a design. shrink: 0 so they never squeeze below their own text. With enough concepts to overflow, the bar scrolls sideways instead of cutting names in half, which is what the overflow-x on .tab-head is for. */ .tab-head__tab { display: flex; align-items: center; justify-content: center; gap: var(--s2); flex: 1 0 auto; padding: var(--s3) var(--s4); /* The floor the food cost strip used to set for itself, kept when it moved onto these tabs. Padding alone clears it on most labels; this guarantees it on all of them. */ min-height: 44px; border: 0; /* Every tab is rounded at the top, chosen or not — that shape IS what makes it a tab. Only the active one used to have it, so the others read as rectangles that happened to sit in a row beside a tab. */ border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: none; color: var(--gray-600); font: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1.3; cursor: pointer; white-space: nowrap; } /* Everything not chosen sits UNDER the folder in front of it: darker, dimmer, and with a shadow pressed into its top edge as though the active tab were lying over it. Telling them apart by colour alone was too quiet — this is depth, which the eye reads before it reads anything else. */ .tab-head__tab:not(.is-active) { background: var(--gray-300); color: var(--gray-600); box-shadow: inset 0 4px 6px -4px rgba(21, 49, 67, 0.45); /* Slightly flatter than the active one. A folder behind another shows less of its own corner, and the difference is one more quiet signal of which is in front. */ border-radius: var(--radius) var(--radius) 0 0; } /* And the chosen one sits on top: full colour, both top corners rounded like the tab on a folder, and a shadow of its own thrown sideways onto the tabs beside it. z-index so that shadow lands ON them rather than under them, which is what makes the order read. Both corners, not just the outer one — a tab rounded on one side only reads as a rendering fault when it is not the first in the row. */ .tab-head__tab.is-active { position: relative; z-index: 1; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--brand-header, var(--navy)); color: var(--brand-header-text, var(--white)); box-shadow: 0 0 10px rgba(21, 49, 67, 0.35); } /* Nothing to switch to: it is a header, not a choice — so it reads left, like the title on the band above it, rather than centred like a tab. */ .tab-head__tab--only { justify-content: flex-start; cursor: default; } /* The concept's own mark, on the left of its name. On a white plate, because an uploaded logo may be dark ink and would vanish on a dark tab. */ .tab-head__logo { width: 24px; height: 24px; flex: 0 0 auto; object-fit: contain; background: var(--white); border-radius: 6px; padding: 2px; } /* How many stores are in the folder you have open. A quiet first line in the body rather than a second line in the tab, which would leave the tabs different heights depending on which was active. */ .brand-shell__count { margin: 0 0 var(--s3); font-size: 0.8125rem; color: var(--text-muted); } /* ---- a store, inside its concept's box -------------------------------- Still a card with its buttons on it. Those buttons are the reason anybody opens this app, and hiding them behind a menu to make the page tidier made it worse. Only the frame changed: lighter, since a shadowed card inside a shadowed card reads as two boxes fighting. */ .store-card { border: 1px solid var(--gray-200); border-radius: var(--radius); box-shadow: none; } .store-card .card__body { padding: var(--s3) var(--s4) var(--s4); } /* ---- people and paperwork ---------------------------------------------- */ .hr-chips { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s3); } /* A count and a label, tappable straight through to the screen that explains it. The number leads because it is the part worth reading at a glance. */ .hr-chip { display: flex; align-items: baseline; gap: var(--s2); padding: var(--s2) var(--s3); border: 0; border-radius: 999px; background: var(--gray-100); font: inherit; text-align: left; cursor: pointer; } .hr-chip__count { font-size: 1.0625rem; font-weight: 700; } .hr-chip__label { font-size: 0.8125rem; color: var(--gray-600); } .hr-chip--warn { background: var(--warning-bg); } .hr-chip--warn .hr-chip__count { color: var(--orange-700); } .hr-chip--alert { background: var(--danger-bg); } .hr-chip--alert .hr-chip__count { color: var(--danger); } /* One line that scrolls, not four that wrap. Six buttons wrapping took about a quarter of a phone screen before you reached the first store, which is a lot of furniture in front of the thing people came for. The counts above them are the part worth seeing without scrolling, and they still wrap — a number nobody sees is the whole reason this band exists. */ .hr-band__actions { display: flex; gap: var(--s2); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Room for the shadow of a focus ring, and so the last button does not look clipped against the card's edge. */ padding-bottom: 2px; margin-right: calc(var(--s4) * -1); padding-right: var(--s4); } /* The tiny pencil that opens the band's edit mode. It lives in the card's TITLE BAR — always on screen — because at the end of the button row it was unreachable on a desktop, where the row hides its scrollbar and a mouse cannot drag it sideways. Furniture about furniture: it must never read louder than the buttons it arranges, hence dimmed header-white. */ .hr-band__edit { border: none; background: none; color: var(--brand-header-text, var(--white)); opacity: 0.55; font-size: 0.9rem; padding: 0 var(--s2); margin-left: auto; cursor: pointer; min-height: 0; } .hr-band__edit:hover { opacity: 1; } /* Edit mode: the sideways-scrolling button row becomes a wrapping list. */ .hr-band__actions.is-editing { flex-wrap: wrap; overflow-x: visible; } /* On anything wider than a phone the row WRAPS instead of scrolling. Sideways scrolling is a thumb gesture; a mouse has no equivalent here (the scrollbar is hidden), so on desktop the buttons past the edge were simply unreachable. Wide screens have the height to spare. */ @media (min-width: 768px) { .hr-band__actions { flex-wrap: wrap; overflow-x: visible; } } .hr-band__edithint { flex-basis: 100%; margin: 0 0 var(--s1); } .hr-band__editlist { flex-basis: 100%; } .hr-band__editrow { display: flex; align-items: center; gap: var(--s1); padding: 2px 0; } .hr-band__editrow.is-off .hr-band__editlabel { color: var(--text-muted); text-decoration: line-through; } .hr-band__editlabel { flex: 1; min-width: 0; } .hr-band__actions::-webkit-scrollbar { display: none; } .hr-band__actions .btn { flex: 0 0 auto; } /* Opens the dashboard: who you are and what you are allowed to do, before anything else on the page. */ .signed-in { margin: 0 0 var(--s4); color: var(--text-muted); font-size: 0.875rem; } .page-head--bare:empty { display: none; } .page-head--bare { margin-bottom: var(--s3); } .location-card__actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--s2); } /* -------------------------------------------------------------------------- Forms -------------------------------------------------------------------------- */ /* align-content: start keeps the label and input packed at the top. Without it, a field with a hint underneath stretches its siblings' rows and the inputs in a row stop lining up with each other. */ .field { display: grid; gap: var(--s1); align-content: start; } .field__label { font-size: 0.8125rem; font-weight: 600; color: var(--gray-600); } .field__hint { font-size: 0.75rem; color: var(--text-muted); } /* "Bought by the case, and nobody has said how many are in one." Orange rather than red: the item still counts and still reorders, it just cannot be costed yet — which is a job to do, not a mistake to fix. */ .pack-warn { color: var(--orange-700); } .pack-warn[hidden] { display: none; } /* A field that sits on one line in a toolbar rather than stacking. */ /* A time input has one natural size; stretching it across the screen just makes an empty box. Wrapping it lets the label stay full width while the control itself stays the size of the thing it holds. */ .time-field { max-width: 10rem; } .field--inline { flex: 0 0 auto; } .field--grow { flex: 1 1 200px; min-width: 0; } /* ---------------------------------------------------------------------- Money fields The dollar sign lives inside the box, so it is still on screen while the number is being typed. The box itself is a plain input — the border is drawn by the wrapper so the sign sits inside it. ---------------------------------------------------------------------- */ .money-input { position: relative; display: flex; align-items: center; } .money-input__sign { position: absolute; left: var(--s3); font-weight: 600; color: var(--text-muted); pointer-events: none; } /* Two classes, because this block sits above the generic .input rule and would otherwise lose the padding on source order — which puts the $ on top of the first digit. */ .input.input--money { padding-left: 1.6rem; font-variant-numeric: tabular-nums; } /* Read-only, not disabled: still readable, still selectable to copy, but plainly not something you type into. */ .input.input--readonly { background: var(--gray-50); color: var(--text-muted); cursor: default; } .input.input--readonly:focus { outline: none; border-color: var(--border-strong); box-shadow: none; } .input, .select, .textarea { width: 100%; min-height: 44px; padding: var(--s2) var(--s3); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--white); color: var(--text); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(84, 174, 166, 0.2); } .textarea { min-height: 6rem; resize: vertical; font-family: var(--font-mono); /* 16px, not the 14px this used to be. Below 16 iOS zooms the page when the field takes focus — the count note was the one control in the app that still did it — and with zooming now switched off there was no pinching back out afterwards. Monospace at 14 was small on a phone anyway. */ font-size: 1rem; line-height: 1.6; } /* --------------------------------------------------------------------------- Search box with a clear cross The installed iOS app draws no native clear button for type="search", so a search you have finished with can only be undone one backspace at a time. The cross below is ours, hidden until there is something to clear. --------------------------------------------------------------------------- */ .search-field { position: relative; } /* Room for the cross, so a long term does not run underneath it. */ .search-field__input { padding-right: 2.75rem; } /* Desktop Safari and Chrome DO draw their own; two crosses side by side reads as a bug, and only one of them is ours to position. */ .search-field__input::-webkit-search-cancel-button { display: none; } .search-field__clear { position: absolute; top: 50%; right: var(--s2); transform: translateY(-50%); display: flex; align-items: center; justify-content: center; /* 32px of tappable area around a small glyph: comfortably hit with a thumb without making the cross itself look heavy. */ width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--surface-2, rgba(0, 0, 0, 0.06)); color: var(--text-muted); font-size: 1.125rem; line-height: 1; cursor: pointer; } .search-field__clear:hover { color: var(--text); } .search-field__clear[hidden] { display: none; } .input--error, .input.is-invalid { border-color: var(--danger); background: var(--danger-bg); } .select { appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7680' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--s3) center; padding-right: var(--s6); } .checkbox { display: inline-flex; align-items: center; gap: var(--s2); cursor: pointer; font-size: 0.9375rem; } .checkbox input { width: 20px; height: 20px; accent-color: var(--teal-600); cursor: pointer; } /* -------------------------------------------------------------------------- Messages -------------------------------------------------------------------------- */ .alert { padding: var(--s3) var(--s4); border-radius: var(--radius-sm); border: 1px solid transparent; font-size: 0.9375rem; } .alert--error { background: var(--danger-bg); border-color: #f3c6c1; color: #8c2018; } .alert--success { background: var(--success-bg); border-color: #b9e0ce; color: #125b41; } .alert--warning { background: var(--warning-bg); border-color: #f6d3ae; color: #8a4308; } .alert--info { background: #eaf3f7; border-color: #c3dbe6; color: var(--navy); } /* "This is not yours to change" — a statement of fact, not a problem, so it is deliberately the quietest of the five. */ .alert--muted { background: var(--surface); border-color: var(--border); color: var(--text-muted); } .empty-state { padding: var(--s7) var(--s4); text-align: center; color: var(--text-muted); } .empty-state__title { font-size: 1rem; font-weight: 600; color: var(--text); margin-bottom: var(--s2); } /* -------------------------------------------------------------------------- Tables -------------------------------------------------------------------------- */ /* Wide tables scroll inside their own container so the page body never does. */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .table { font-size: 0.9375rem; } .table th, .table td { padding: var(--s3); text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; } .table thead th { position: sticky; top: 0; background: var(--gray-100); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gray-600); white-space: normal; vertical-align: bottom; } .table tbody tr:last-child td { border-bottom: none; } .table tbody tr:hover { background: var(--gray-50); } .table td.numeric, .table th.numeric { text-align: right; font-variant-numeric: tabular-nums; } /* First column stays put while the rest of a wide history table scrolls. */ .table--pinned th:first-child, .table--pinned td:first-child { position: sticky; left: 0; background: var(--surface); border-right: 1px solid var(--border); white-space: normal; min-width: 9rem; } .table--pinned thead th:first-child { background: var(--gray-100); z-index: 2; } .table--pinned tbody tr:hover td:first-child { background: var(--gray-50); } .cell-empty { color: var(--gray-400); } /* -------------------------------------------------------------------------- Badges -------------------------------------------------------------------------- */ .badge { display: inline-block; padding: 2px var(--s2); border-radius: 999px; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .badge--muted { background: var(--gray-100); color: var(--gray-600); } .badge--warning { background: var(--warning-bg); color: #8a4308; } .badge--case { background: #eaf3f7; color: var(--navy-700); } /* -------------------------------------------------------------------------- Modal -------------------------------------------------------------------------- */ .modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; justify-content: center; background: rgba(21, 49, 67, 0.55); padding: 0; } /* On a phone the panel takes the WHOLE screen. Sized by its content it stopped short of top and bottom, and the band that showed through read as dead space; installed on a Home Screen that band is viewing room the list needs. The header absorbs the notch inset so the title clears the clock. The breakpoint is 39.99rem so it ENDS exactly where the centred-modal rule below starts at 40rem. They used to overlap between 40 and 44rem, where the phone rule won on specificity and a tablet got a full-bleed modal it was never meant to have. */ @media (max-width: 39.99rem) { /* The panel pins ITSELF to the four edges of the viewport. Not 100dvh (a moving target on iOS), not 100% of a flex parent (which depends on the parent's alignment resolving the way you expect) — a fixed element with inset:0 is measured against the viewport directly, with nothing in between to get it wrong. */ .modal:not(.modal--narrow):not(.modal--photo) .modal__panel { position: fixed; inset: 0; width: auto; max-width: none; height: auto; max-height: none; border-radius: 0; } .modal:not(.modal--narrow):not(.modal--photo) .modal__header { padding-top: max(var(--s3), env(safe-area-inset-top, 0px)); } } .modal[hidden] { display: none; } .modal__panel { display: flex; flex-direction: column; width: 100%; max-width: 56rem; /* Never taller than the screen minus the notch, or the modal header ends up behind the status bar the same way the app header used to. */ max-height: calc(100dvh - env(safe-area-inset-top, 0px)); background: var(--surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-lg); overflow: hidden; } .modal__header { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s4); border-bottom: 1px solid var(--border); background: var(--surface); } .modal__title { font-size: 1.0625rem; } .modal__subtitle { font-size: 0.8125rem; color: var(--text-muted); margin-top: 2px; } /* "Settings › Checklists › New checklist". Sits above the title because it answers "where am I", which you read before you read what the screen is. */ /* Now that every screen has one, a trail can run four deep — Home > Settings > Documents > Templates. It scrolls sideways rather than wrapping: a wrapped trail changes the header's height as you navigate, which makes the whole panel jump. */ .modal__trail { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 3px; letter-spacing: 0.01em; display: flex; align-items: baseline; white-space: nowrap; overflow-x: auto; scrollbar-width: none; } .modal__trail::-webkit-scrollbar { display: none; } /* The current screen never scrolls out of sight: it is the part that answers "where am I". */ .modal__trail > span { flex: 0 0 auto; } .modal__trail__sep { opacity: 0.5; padding: 0 4px; } .modal__trail__here { color: var(--text); font-weight: 600; } /* "I have completed these tasks…" — deliberately not styled like the task rows above it, because it is a different kind of statement. */ .confirm-box { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 12px 14px; border: 1px solid #f6d3ae; background: var(--warning-bg); border-radius: 10px; cursor: pointer; } .confirm-box input { margin-top: 2px; flex: none; width: 20px; height: 20px; } .confirm-box__text { font-size: 0.875rem; line-height: 1.4; } .confirm-box[hidden] { display: none; } /* --------------------------------------------------------------------------- People (HR) --------------------------------------------------------------------------- */ /* Two columns on anything wider than a phone, one column on a phone. An employee record is mostly short fields — city, state, ZIP — and stacking them all makes a form nobody scrolls to the bottom of. */ .hr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); align-content: start; } .hr-grid__wide { grid-column: 1 / -1; } @media (max-width: 560px) { /* minmax(0, 1fr), not 1fr. Plain `1fr` is minmax(AUTO, 1fr), and an auto minimum lets the track grow to its widest item — so one control with a large intrinsic width drags the whole form out past the panel. The two-column rule above already got this right; the phone one did not. */ .hr-grid { grid-template-columns: minmax(0, 1fr); } } /* A bordered block for a self-contained control that is not part of the form flow — the account-status panel, the add-a-document form. */ .panel { border: 1px solid var(--border); border-radius: 10px; padding: var(--s3); background: var(--gray-50); } .panel[hidden] { display: none; } /* Active / HR only / disabled, and "needs details". Small enough to sit inline after a name without pushing the row taller. */ .status-pill { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em; vertical-align: middle; } .status-pill--1 { background: var(--warning-bg); color: #8a4308; } .status-pill--2 { background: var(--danger-bg); color: var(--danger); } .status-pill--todo { background: var(--gray-100); color: var(--text-muted); } .status-pill--ok { background: var(--success-bg); color: var(--success); } /* An expired permit is not the same kind of news as one expiring soon, so the whole row says so rather than just the pill. */ .doc-row--alarm { background: var(--danger-bg); } /* The colour pickers on Company settings, and the live preview beside them. */ .input--colour { padding: 4px; height: 44px; cursor: pointer; } /* --------------------------------------------------------------------------- The company's colours on the app itself app.php writes --brand-header and --brand-panel from the saved settings, so the header and the accents follow the same two colours the documents wear. Every rule falls back to the app's own navy, which is what a company that has never opened Company settings sees. --------------------------------------------------------------------------- */ .app-header { background: var(--brand-header, var(--navy)); color: var(--brand-header-text, var(--white)); } /* No white plate. An uploaded logo now keeps its transparency (LogoService stores a PNG for the screen alongside the flattened JPEG the PDF needs), so a clear background shows the header colour through it rather than a white block sitting on the bar. The trade-off, said out loud: a logo drawn in DARK ink on transparency will be hard to read against a dark header colour. The fix for that is a lighter header colour or a light version of the mark — not a plate behind every logo, which is what made the common case look broken. */ .app-header__logo { object-fit: contain; } /* The white plate is GONE, deliberately. It existed for one reason: the bundled fallback used to be the restaurant's taco logo, drawn in dark ink, which all but vanished on a dark header. The bundled mark is now the app's own clipboard in WHITE ink on transparency (assets/images/mark.svg), so it sits straight on the bar — and an uploaded logo never had a plate either. */ /* The page-level accents that used to be hard-coded navy. */ .page-head h1 { color: var(--brand-header, var(--navy)); } .card__header h2 { color: var(--brand-header, var(--navy)); } /* Card headers wear the panel colour — the same tint the fact panels on a generated document use, so the screen and the printed page look like they came from the same business. */ .card__header { background: var(--brand-panel, transparent); border-radius: var(--radius) var(--radius) 0 0; } /* ---- telling one store from another ------------------------------------ A stripe down the left of each store card, in a colour picked from the store itself. NOT the brand's colour: the concept's tab is directly above these cards and already says whose they are. What the eye needs here is the difference between SCB - 1 and SCB - 2, which are otherwise two identical white rectangles with near-identical names. The colour is chosen from the location id, so a store keeps the same one every time anybody opens the app — a stripe that moved would be worse than no stripe. */ .store-card { border-left: 4px solid var(--store-stripe, var(--gray-300)); } /* The stripe and the headings sit on white, so they stay legible whatever colour a company picks — only the header BAR needs the contrast switch, which is what --brand-header-text is for. */ #locations .location-card__name { color: var(--brand-header, var(--navy)); } .brand-preview { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .brand-preview__bar { padding: 6px var(--s3); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .brand-preview__panel { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 4px var(--s4); padding: var(--s3); } .brand-preview__label { font-weight: 700; } /* The preview sits on white deliberately: that is the LETTERHEAD's background, and this is where somebody checks the mark will print correctly. A pale logo that looks fine on a dark header would come out as a grey smudge on paper, and this is the screen that says so. */ .logo-preview { display: flex; align-items: center; justify-content: center; padding: var(--s3); background: #ffffff; border: 1px solid var(--border); border-radius: 10px; } .logo-preview__img { max-width: 100%; max-height: 110px; width: auto; height: auto; } /* ---- documents ---------------------------------------------------------- */ .doc-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .doc-list:empty { display: none; } .doc-row { display: flex; align-items: center; gap: var(--s3); padding: var(--s3); border-bottom: 1px solid var(--border); /* Wrap rather than squeeze. A signed row carries View AND Download now, and on a phone those two took so much of the width that the title broke mid-word — "Employee handboo / k" — and the row grew to half the screen. Wrapping drops the buttons onto their own line instead, which costs one line and keeps the title a title. */ flex-wrap: wrap; } /* The text takes the whole first line whenever the row has more than one action beside it. overflow-wrap: anywhere further down is what saves a long unbroken word from overflowing; it should never be what handles an ordinary title, and giving the text room is how it stops being asked to. */ .doc-row--actions .doc-row__open { flex: 1 1 100%; } .doc-row--actions .doc-row__icon { order: -1; } .doc-row:last-child { border-bottom: 0; } /* PDF / IMG, so you can tell at a glance what tapping will open. */ .doc-row__icon { flex: none; width: 38px; text-align: center; padding: 3px 0; border-radius: 6px; background: var(--gray-100); color: var(--text-muted); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.04em; } /* The whole row is the download link — a small "download" word beside a long title is a target nobody hits on a phone. */ .doc-row__open { display: grid; gap: 2px; min-width: 0; flex: 1; color: inherit; text-decoration: none; } .doc-row__open:hover .doc-row__title { text-decoration: underline; } .doc-row__title { font-weight: 600; } .doc-row__meta { font-size: 0.75rem; color: var(--text-muted); } .doc-row__note { font-size: 0.8125rem; color: var(--text-muted); font-style: italic; } .doc-row__hidden { font-size: 0.6875rem; font-weight: 600; color: #8a4308; } /* --------------------------------------------------------------------------- Long unbroken text Text only wraps at spaces. A filename like Ana_Reyes_Verbal_Warning_2026_07_14_FINAL.pdf, or an email address, or a pasted URL has none — so it sets a minimum width for its box, which sets one for its parent, all the way up until the modal panel is wider than the phone and the whole screen slides sideways. Measured: one such filename made My account 212px wider than an iPhone. `anywhere` rather than `break-word` because it also shrinks the element's min-content width, which is the part that stops the chain — break-word wraps the text but leaves the box just as wide. --------------------------------------------------------------------------- */ .doc-row__title, .doc-row__meta, .doc-row__note, .doc-row__hidden, .settings-row__label, .settings-row__hint, .run-row__when, .run-row__who, .run-row__note, .field__hint, .doc-sheet { overflow-wrap: anywhere; } /* A flex or grid item defaults to min-width: auto, which means "never shrink below your content". Every container that holds text somebody typed has to opt out of that, or the rule above has nothing to shrink into. */ .doc-row > *, .doc-row__open > *, .settings-row > *, .settings-row__text > *, .hr-grid > *, .field > * { min-width: 0; } .input, .select, .textarea { max-width: 100%; } /* --------------------------------------------------------------------------- Date and time inputs iOS gives these an intrinsic width based on the locale's date format plus its native chrome, centres the value inside them, and does NOT honour width:100% while that native appearance is on. Inside a grid track the input then demands more room than the panel has and the whole form slides out past its edge — which is exactly what a phone screenshot showed on the "Due by" field. Turning the appearance off makes them size like every other input. The picker is unaffected: iOS still opens its wheel on tap, and the indicator below keeps the affordance visible on desktop. --------------------------------------------------------------------------- */ input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] { -webkit-appearance: none; appearance: none; width: 100%; /* Beats the UA minimum, which is what actually forces the overflow. */ min-width: 0; max-width: 100%; /* Safari centres the value; everything else here is left-aligned, and a centred date among left-aligned boxes reads as a different control. */ text-align: left; } /* The value lives in its own shadow box that keeps an intrinsic width of its own even after the appearance is off. */ input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value { text-align: left; min-width: 0; } /* appearance:none hides the calendar button in desktop Chrome; put it back so the field still looks like something you tap. */ input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { opacity: 0.55; cursor: pointer; } /* ---- documents to sign -------------------------------------------------- */ /* --------------------------------------------------------------------------- A document, on screen Laid out to match the PDF: letterhead, title, a block of facts with a label column, section headings, hanging-indent list items. The blocks come from the server's parser, so the two cannot drift apart — what somebody reads before signing is what the file copy says. --------------------------------------------------------------------------- */ .doc-sheet { padding: var(--s5) var(--s4); border: 1px solid var(--border); border-radius: 10px; background: var(--surface); max-height: 58vh; overflow-y: auto; line-height: 1.55; } /* The manual, which is only ever read — nothing sits under it waiting to be agreed to, so there is no reason to keep the bottom of the screen clear. Without this the help pages were a half-height box of text with a band of empty white beneath them. The modal body scrolls instead of the sheet. */ .doc-sheet--full { max-height: none; overflow-y: visible; } .doc-sheet__head { padding-bottom: var(--s3); margin-bottom: var(--s4); border-bottom: 1px solid var(--border-strong); } .doc-sheet__company { display: block; font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); } .doc-sheet__title { margin-top: 4px; font-size: 1.25rem; line-height: 1.25; } /* Only used when a response arrives without blocks — an older cached copy of the app talking to a newer server. */ .doc-sheet__plain { white-space: pre-wrap; } /* A filled bar, exactly as the PDF draws it. The custom properties are set per-sheet from the company's saved colours, and fall back to the app's own navy when nothing has been chosen. */ .doc-h { margin: var(--s5) calc(var(--s4) * -1) var(--s3); padding: 6px var(--s4); background: var(--doc-header, var(--navy)); color: var(--doc-header-text, var(--white)); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .doc-h:first-child { margin-top: 0; } .doc-h2 { margin: var(--s4) 0 var(--s2); font-size: 0.9375rem; } .doc-p { margin: 0 0 var(--s3); } /* The label column, aligned — what makes a run of facts read as a header. */ .doc-facts { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 4px var(--s4); margin: 0 0 var(--s4); } .doc-facts { background: var(--doc-panel, var(--gray-100)); padding: var(--s3) var(--s4); margin-left: calc(var(--s4) * -1); margin-right: calc(var(--s4) * -1); } .doc-facts dt { font-weight: 700; } .doc-facts dd { margin: 0; } @media (max-width: 460px) { /* On a narrow phone the two columns squeeze the value into two words a line. Stack instead, label above value. */ .doc-facts { grid-template-columns: 1fr; gap: 0; } .doc-facts dt { margin-top: var(--s2); } } /* The marker hangs, the text aligns — the same shape as the PDF. */ .doc-item { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); margin-bottom: var(--s2); } .doc-item__marker { color: var(--text-muted); font-variant-numeric: tabular-nums; } /* A checkbox row on a rendered document — the printed-form look, matching the PDF: a drawn box, an X when ticked, all options visible either way. */ .doc-check { display: grid; grid-template-columns: 1.05rem 1fr; gap: 0.45rem; align-items: baseline; margin: 2px 0; } .doc-check__box { display: inline-flex; align-items: center; justify-content: center; width: 0.85rem; height: 0.85rem; border: 1.5px solid #414d55; border-radius: 2px; font-size: 0.7rem; font-weight: 700; line-height: 1; transform: translateY(1px); } .doc-check--on .doc-check__box { color: #1b2b35; } /* A full-width field inside the two-column send-form grid — a checkbox group squeezed into half a phone column wraps one word per line. */ .field--full { grid-column: 1 / -1; } .doc-note { margin: 0 0 var(--s3) var(--s4); font-style: italic; color: var(--text-muted); } .doc-rule { border: 0; border-top: 1px solid var(--border); margin: var(--s4) 0; } /* A row whose whole body is a button rather than a link — same look, because to the reader it is the same thing. */ .doc-row__open--button { background: none; border: 0; padding: 0; font: inherit; text-align: left; cursor: pointer; } .textarea--tall { min-height: 16rem; font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 0.875rem; } /* Tappable {{placeholder}} tokens. Typing one from memory is how you get a typo nobody notices until it is in somebody's warning letter. */ .chip-row { display: flex; flex-wrap: wrap; gap: 6px; } .chip { padding: 3px 9px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--gray-50); color: var(--text-muted); font-size: 0.75rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; } .chip:hover { background: var(--gray-100); color: var(--text); } .settings-row--dim { opacity: 0.55; } /* --------------------------------------------------------------------------- Signatures --------------------------------------------------------------------------- */ /* touch-action: none is the whole reason a finger can draw here. Without it the browser claims the gesture as a scroll and the stroke stops dead after a few pixels. */ .sig-pad__canvas { touch-action: none; display: block; border: 1px dashed var(--border-strong); border-radius: 10px; background: var(--white); /* A signature is drawn edge to edge; a highlight on a stray tap looks like a bug. */ -webkit-tap-highlight-color: transparent; cursor: crosshair; max-width: 100%; } .sig-pad[hidden] { display: none; } /* The three script styles, shown as what they will actually look like. */ .sig-styles { display: grid; gap: var(--s2); margin-top: var(--s3); } .sig-style { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3); border: 1px solid var(--border); border-radius: 10px; background: var(--white); cursor: pointer; text-align: left; min-height: 62px; } .sig-style--on { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; } .sig-style__name { font-size: 1.5rem; line-height: 1.1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sig-style__label { flex: none; font-size: 0.6875rem; color: var(--text-muted); } /* Adopted signatures, as pickable tiles. */ .sig-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s2); } .sig-tile { display: grid; gap: 4px; padding: var(--s2); border: 1px solid var(--border); border-radius: 10px; background: var(--white); cursor: pointer; } .sig-tile--on { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; } .sig-tile__image { width: 100%; height: 52px; object-fit: contain; } .sig-tile__meta { font-size: 0.6875rem; color: var(--text-muted); } /* The mark on an already-signed document. */ .sig-shown { display: block; max-width: 220px; height: auto; margin-bottom: var(--s2); } /* A two-button segmented control — type it / draw it. */ .seg-row { display: flex; border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden; } .seg { flex: 1; padding: 10px var(--s3); border: 0; background: var(--white); color: var(--text-muted); font: inherit; font-weight: 600; cursor: pointer; } .seg--on { background: var(--primary); color: var(--white); } /* Reorder mode: the row stops being a button and grows a pair of arrows. Arrows rather than drag-and-drop, because dragging inside a scrolling modal on a phone fights the scroll and loses. */ .settings-row--reorder { cursor: default; } .reorder-arrows { display: flex; gap: 2px; flex: none; } .reorder-arrows .btn[disabled] { opacity: 0.25; } .app-banner--amber { background: var(--warning-bg); border-color: #f6d3ae; color: #8a4308; } /* The optional note somebody left when they submitted a checklist. */ .run-row__note { font-size: 0.8125rem; color: var(--text-muted); font-style: italic; margin-top: 4px; } /* Back one level, to the left of the X. Only drawn when there is somewhere behind this screen to go — see backTo(). */ .modal__back { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text-muted); cursor: pointer; } .modal__back:hover { background: var(--gray-100); color: var(--text); } /* The ? beside the close button: the manual for the screen you are on. Same size and weight as the back arrow, quieter colour — it is an offer, not an instruction, and it sits next to the control that leaves the screen. */ .modal__help { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text-muted); cursor: pointer; } .modal__help:hover { background: var(--gray-100); color: var(--text); } .modal__help[hidden] { display: none; } .modal__help svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .modal__back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* A crumb you can press. Looks like the text beside it until you realise it is a button — underlined on hover rather than styled as one, because a row of buttons up there would compete with the screen's own controls. */ .modal__trail__step { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; } .modal__trail__step:hover { text-decoration: underline; color: var(--text); } .modal__close { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px; border: none; border-radius: var(--radius-sm); background: transparent; font-size: 1.5rem; line-height: 1; color: var(--gray-500); } .modal__close:hover { background: var(--gray-100); color: var(--text); } .modal__body { flex: 1 1 auto; overflow-y: auto; /* Up and down only. Nothing on any of these screens is meant to be read by scrolling sideways, so a stray wide element becomes a clipped element rather than a panel that slides off the phone. The rules below are what stop anything getting wide in the first place; this is the backstop for whatever they miss. */ overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: var(--s4); } .modal__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); /* Clears the iPhone home indicator. max(), not a sum: the inset already includes room to be clear of it, so adding the normal padding on top just wasted a strip of screen. */ padding-bottom: max(var(--s3), env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); background: var(--gray-50); } @media (min-width: 40rem) { .modal { align-items: center; padding: var(--s5); } .modal__panel { border-radius: var(--radius-lg); max-height: calc(100dvh - 3rem); } } /* -------------------------------------------------------------------------- Count sheet -------------------------------------------------------------------------- */ .count-row { display: grid; /* name | note | quantity, one line per item. The note lived on its own full-width second line for a day; half as many items fit on a screen, and counting is a walk down a list. minmax(0, ...) on the text columns so a long name or note truncates instead of blowing the row open. 1.4:1 between name and note is measured, not guessed: across this company's real 65 item names on a 375px phone it puts 60 of them on one line while keeping the note box ~96px. An even split wrapped 7; pushing to 2:1 rescues only 2 more while crushing the note to 77px. The five longest names (Printer Rolls Carbonless…) wrap to a second line whatever the split, and truncating them instead would make "Tortilla Maiz A…" ambiguous between Amarilla and Blanca on the one screen where picking the wrong one corrupts a count. */ grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 5.5rem; gap: var(--s3); align-items: center; padding: var(--s3) 0; border-bottom: 1px solid var(--border); } .count-row:last-of-type { border-bottom: none; } .count-row__main { min-width: 0; } .count-row__name { font-weight: 550; } .count-row__type { font-size: 0.8125rem; color: var(--text-muted); } .count-row__qty { text-align: center; font-variant-numeric: tabular-nums; font-size: 1.0625rem; font-weight: 600; } .count-row.is-invalid .count-row__qty { border-color: var(--danger); background: var(--danger-bg); } .count-progress { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) 0 var(--s3); margin-bottom: var(--s2); background: var(--surface); font-size: 0.875rem; color: var(--text-muted); border-bottom: 1px solid var(--border); } .progress-bar { flex: 1 1 auto; height: 6px; border-radius: 999px; background: var(--gray-200); overflow: hidden; } .progress-bar__fill { height: 100%; width: 0; background: var(--teal-600); border-radius: 999px; transition: width 0.2s ease; } /* -------------------------------------------------------------------------- Shopping list -------------------------------------------------------------------------- */ /* Controls above, actions below, in a panel that reads as one group. The dropdowns are full-width form controls, so they get their own labelled row rather than being flex-wrapped in among the buttons — which is what left the "Group by" label stranded on the line above its select. */ .shop-toolbar { display: grid; gap: var(--s3); padding: var(--s3); margin-bottom: var(--s4); background: var(--gray-50); border: 1px solid var(--border); border-radius: var(--radius); } .shop-toolbar__controls { display: grid; /* Side by side when there is room, stacked on a phone. */ grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--s3); } .shop-toolbar__actions { display: flex; flex-wrap: wrap; gap: var(--s2); } /* Generate is the primary action, so it leads and takes the room it needs; the rest sit beside it. */ .shop-toolbar__actions .btn { flex: 0 1 auto; } @media (max-width: 26rem) { .shop-toolbar__actions .btn { flex: 1 1 auto; } } .shop-section { margin-bottom: var(--s5); } .shop-section__title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: var(--s2) var(--s3); background: var(--navy); color: var(--white); border-radius: var(--radius-sm) var(--radius-sm) 0 0; font-size: 0.9375rem; font-weight: 650; } .shop-section__subtotal { font-variant-numeric: tabular-nums; font-weight: 600; } /* Which count the numbers below came from. Quiet, but present — a list built off a three-week-old count looks identical to one built this morning, and the difference is the whole value of the list. */ .shop-section__source { padding: var(--s2) var(--s3); background: var(--gray-50); border-bottom: 1px solid var(--border); font-size: 0.75rem; color: var(--text-muted); } /* Grouped by vendor there are no store sections to attach it to, so the same line sits above the list, one per store. */ .shop-source-list { margin-bottom: var(--s3); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } .shop-source-list .shop-section__source:last-child { border-bottom: 0; } /* Rows are deliberately compact — a full shopping trip should fit on one screen rather than needing constant scrolling. Padding is tight, the meta line sits inline with the name, and the whole row is a