/*
KeyCodeMart - the components
----------------------------
Hand-written, with no framework underneath it. The reason is the same one
that keeps the NuGet list at two packages: a grid of items and rates is a
dense, unusual layout, and every framework this would have pulled in has to
be fought before it will draw one. What is here is what the screens use.
NO COLOUR IS NAMED IN THIS FILE. Everything comes from theme.css. See the
note at the top of that file for why.
Read in this order: the reset, the shell, the menu, then the pieces a screen
is made of - cards, tables, forms, buttons, notices - and the permission grid
last, because it is the one component that exists for exactly one screen.
*/
/* ═══════════════════════════════════════════════════════════ the reset ══ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Anchored sections glide rather than jump, and every anchor already clears
the two sticky bars through scroll-margin. Honoured only when the machine
has not asked for less motion - see the block at the foot of the reset. */
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--ground);
color: var(--ink);
font-family: var(--font);
font-size: .9375rem;
line-height: 1.55;
/* Grayscale antialiasing on the two platforms that otherwise render this
weight of text noticeably heavier than it was drawn. */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* NO overflow-x: hidden ON THE BODY, and this is a trap worth naming because
it is the standard advice for stopping sideways scroll.
Setting one axis to hidden computes the other to auto, which makes the body
itself the scrolling box instead of the viewport. Everything still scrolls
by hand, so it looks fine - but window.scrollTo and element.scrollIntoView
silently stop working, and on this page that is the section nav, the
anchored headings and the scroll spy all quietly failing at once.
Sideways scroll is a real fault, but it is caused by one child that is too
wide, and the fix is to find that child. Every wide thing here - the
section nav, tables, the code and diagram blocks - scrolls inside its own
box instead. */
/* THE HEADING SCALE.
Six steps, each a clear jump from the last, because hierarchy is what lets
somebody skim. The tightening letter-spacing as size goes up is doing the
real work: display text set at body tracking always looks loose, and that
looseness is most of what reads as "unpolished" on a landing page. */
h1, h2, h3 { margin: 0 0 var(--gap-sm); line-height: 1.2; font-weight: 650; }
h1 { font-size: 1.75rem; letter-spacing: -.022em; }
h2 { font-size: 1.25rem; letter-spacing: -.015em; }
h3 { font-size: 1.0625rem; letter-spacing: -.01em; }
/* Headings break at a sensible place rather than leaving one word alone on
the last line - the single cheapest typographic improvement available. */
h1, h2, h3 { text-wrap: balance; }
p { margin: 0 0 var(--gap); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Never remove an outline without replacing it. A till is keyed by somebody
tabbing between fields without looking, and the ring is how they know where
they are.
Two layers rather than one: the halo underneath keeps the ring visible when
the focused control sits on the accent itself, where a plain accent outline
would vanish into its own background. */
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: var(--radius-sm);
box-shadow: 0 0 0 4px var(--accent-soft);
}
/* ONE PLACE TURNS EVERY ANIMATION OFF. A person who has asked their machine
for less motion has usually asked for a reason, and honouring it in each
component separately means it gets forgotten in the next one. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
}
.ico { width: 1.15rem; height: 1.15rem; flex: none; }
/* THE PUBLIC WRAP. Capped and centred, because prose past about 80 characters
is hard to read and a landing page is read. */
.wrap { width: min(80rem, 100% - 2rem); margin-inline: auto; }
/* THE WORKING WRAP, and it is a different thing.
A grid of items with rates, batches and expiry is SCANNED, not read, and
every column pushed off the right edge is one the operator has to scroll
for. Capping the working screens at the same 80rem as the landing page left
a wide monitor with several inches of empty ground down each side and a
table scrolling inside a narrow box in the middle - which is the gap the
owner pointed at.
Nearly full width, with just enough inset that content is not welded to the
bezel. */
.wrap-app { width: calc(100% - 1.5rem); margin-inline: auto; max-width: 130rem; }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.right { text-align: right; }
.spacer { flex: 1 1 auto; }
.stack { display: grid; gap: var(--gap); }
.row { display: flex; align-items: center; gap: var(--gap-sm); flex-wrap: wrap; }
/* ══════════════════════════════════════════════════════════ the topbar ══ */
/* A hairline and a whisper of shadow, not a slab. The bar has to separate
itself from a page that scrolls under it without becoming a second piece of
furniture competing with the content. */
.topbar {
background: var(--raised);
border-bottom: 1px solid var(--line);
box-shadow: 0 1px 2px rgb(0 0 0 / .03);
/* This bar belongs to the public pages, where the BODY scrolls - so it
has to stick, or the landing page's section nav (pinned under it at
--header-h) is left hanging with a gap above it that the page shows
through. The working shells draw their own bar above a scroller. */
position: sticky;
top: 0;
z-index: 20;
}
/* The gap is what keeps the mark off the actions on a narrow laptop, and the
height follows the logo token rather than being set beside it - so making
the mark bigger cannot crop it. */
.topbar-in {
display: flex;
align-items: center;
gap: var(--gap);
min-height: var(--header-h);
padding-block: .25rem;
}
.brandmark:hover { text-decoration: none; }
/* THE LOGO CARRIES ITS OWN WHITE GROUND.
It is a JPEG drawn on white, so on Midnight Mint - or any palette in night
mode - dropping it straight onto the bar would show a white rectangle with
hard corners. The plate below is that white made deliberate: same colour,
rounded, inset, so it reads as a badge rather than as a mistake. Delete the
background and the padding the day the mark arrives as an SVG or a
transparent PNG; nothing else here changes.
SIZED BY HEIGHT ONLY, never by width, and never with both set in CSS - the
artwork is 1600x639 and the aspect ratio is preserved by letting width stay
auto. width/height on the itself reserve the space so the bar does
not jump while the file loads.
The mark's own margin is generous, so a 64px plate renders the visible
wordmark near 44px. That is the size at which "Mart Billing Software" under
the name is still readable rather than a grey smudge, which is the whole
reason to show a logo rather than set the name in type. */
/* THE FILE'S OWN WHITE MARGIN IS CROPPED OFF, and that is what lets the mark
get BIGGER while the bar gets SHORTER - two things that otherwise pull
against each other.
MEASURED, NOT GUESSED. keymart-pro.jpg is 1600x639, and the artwork inside
it runs from y=167 to y=476. That is 310px of ink in 639px of file:
51.5 per cent of the image is blank white margin baked into the JPEG.
So a 44px was rendering a 21px mark and charging the header 44px of
height for it. Every attempt to make the mark bigger made the bar deeper,
because more than half of what was growing was empty.
The anchor is now the mark itself: --logo-h is the height of the VISIBLE
artwork, and the image is scaled and pulled up behind a clipping box so
the white above and below never occupies the bar.
1.814 = 0.88 / (310 / 639) scale that makes the ink 88% of the box,
leaving 6% breathing room top and bottom
0.4142 the pull-up that puts the ink at that 6%
Delete both numbers and this whole block the day the mark arrives as an
SVG or a tightly cropped PNG - then height: var(--logo-h) is all it needs. */
/* NO PLATE, NO CROP. keymart-pro.png is the mark cut out of its white ground
with a real alpha channel and trimmed to the artwork, so it sits on
whatever the palette provides.
All of the arithmetic that used to live here - the 1.814 scale and the
0.4142 pull-up that hid the file's 51.5 per cent of blank margin - is gone
with the file that needed it. --logo-h is now simply the height.
ONLY WHITE THAT TOUCHED THE BORDER WAS REMOVED, by a flood fill from the
edges. The white letters inside the PRO badge are enclosed by teal, so the
fill never reached them and they are still opaque - which is what stops the
badge reading as a hole once the bar goes dark. */
.brandmark {
display: block;
flex: none;
line-height: 0;
}
.brandmark img {
display: block;
height: var(--logo-h);
width: auto;
max-width: 100%;
}
/* The text mark is gone from all four shells - every one of them carries the
image now - so the rules that styled two words either side of a went
with it. */
/* THE WORKING SHELLS CARRY A SMALLER MARK, and this is a deliberate departure
from "twice as big everywhere".
The public bar is a brand moment and has one job. The mart, owner and
operator bars are chrome above a till: every millimetre they take is taken
from the grid of items underneath, and a 64px mark there pushes the first
row of a purchase bill off a laptop screen. 44px is still a third again
larger than the mark used to be and unmistakably a logo.
BOTH TOKENS HAVE TO BE RESTATED HERE, and the reason is a genuine trap in
custom properties: --header-h is declared on :root as a calc over --logo-h,
and that substitution uses :root's --logo-h, not the value some descendant
later overrides. Setting only --logo-h here gave the working shells a 44px
mark inside a bar still 82px tall - the shrunk logo with none of the space
it was shrunk to save. */
.shell-top {
--logo-h: 2.625rem;
--header-h: calc(2.625rem + .5625rem);
}
/* Below a phone width the mark steps down again rather than pushing the
sign-in actions onto a second row. */
/* A step DOWN on a phone, so the mark and the three actions have a chance of
sharing one row. It read 2.75rem here for a while, which was larger than
the desktop value it was supposed to be reducing. */
@media (max-width: 30rem) {
:root { --logo-h: 2.5rem; }
}
/* ── who is keying ───────────────────────────────────────────────────────── */
/*
THE NAME, AND THE THREE THINGS SOMEBODY DOES TO THEIR OWN ACCOUNT.
On a shared till the name is the thing that matters most: two people work
one machine and the bills carry whoever is signed in. Somebody who glances
up and sees the wrong name has caught a mistake that is otherwise found
weeks later by an accountant. So the initials stay visible at every width
and everything else folds away.
*/
.profile { position: relative; }
.profile > summary {
display: inline-flex; align-items: center; gap: .45rem;
padding: .25rem .5rem .25rem .25rem;
border: 1px solid transparent;
border-radius: 2rem;
cursor: pointer;
list-style: none;
font-size: .8125rem;
font-weight: 600;
color: var(--ink);
white-space: nowrap;
}
.profile > summary::-webkit-details-marker { display: none; }
.profile > summary:hover { border-color: var(--line); background: var(--sunken); }
.profile[open] > summary { border-color: var(--accent); background: var(--sunken); }
.avatar {
display: inline-flex; align-items: center; justify-content: center;
width: 1.9rem; height: 1.9rem;
flex: none;
border-radius: 50%;
background: var(--accent);
color: var(--raised);
font-size: .6875rem;
font-weight: 700;
letter-spacing: .02em;
}
.avatar.big { width: 2.4rem; height: 2.4rem; font-size: .8125rem; }
.profile-pop {
position: absolute;
top: calc(100% + .35rem);
right: 0;
z-index: 40;
min-width: 15rem;
display: grid;
padding: .3rem;
background: var(--raised);
border: 1px solid var(--line-strong);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
/* The head of the panel repeats the name in full, because the bar shows only
initials once the window is narrow and this is the place somebody checks
when they are not sure who is signed in. */
.profile-who {
display: flex; align-items: center; gap: .55rem;
padding: .5rem .55rem .6rem;
border-bottom: 1px solid var(--line);
margin-bottom: .3rem;
}
.profile-who > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.profile-who b { font-size: .875rem; }
.profile-who .faint { font-size: .75rem; }
.profile-pop a,
.profile-pop button {
display: flex; align-items: center; gap: .5rem;
width: 100%;
padding: .45rem .55rem;
border: none;
border-radius: var(--radius);
background: none;
color: var(--ink);
font: inherit;
font-size: .8125rem;
text-align: left;
cursor: pointer;
}
.profile-pop a:hover,
.profile-pop button:hover { background: var(--sunken); color: var(--accent); text-decoration: none; }
.profile-pop .ico { width: 1.05rem; height: 1.05rem; flex: none; color: var(--ink-faint); }
.profile-pop a:hover .ico, .profile-pop button:hover .ico { color: var(--accent); }
/* The way out sits under a line of its own. It is the one item on the panel
that cannot be undone by clicking again, and it should not be next to
"Appearance" as though it were the same kind of thing. */
.profile-cut { height: 1px; background: var(--line); margin: .3rem .3rem; }
.profile-pop button.out:hover { color: var(--bad); }
.profile-pop button.out:hover .ico { color: var(--bad); }
.profile-pop form { margin: 0; }
@media (max-width: 52rem) { .profile > summary .lbl-text { display: none; } }
/* What the top bar says about where you are: the mart, and who is keying.
Kept quiet - it is a label, not a heading. */
/* NAME AND MARK TRAVEL TOGETHER. Two loose children of the bar drifted
apart the moment anything else was added between them; one wrapper keeps
the pair intact at every width. */
/* WHAT SCREEN THIS IS, beside the button that opens the rail.
It reads as a heading because it is one, but at the size of a bar rather
than the size of a page: this sits 8px from a logo and 8px from a date,
and a 25px heading between them would be shouting across a strip of quiet
furniture. The sentence under it is the same sentence the page used to
carry - see the note in _Person.cshtml. */
.bar-head {
display: flex; flex-direction: column;
justify-content: center;
min-width: 0;
line-height: 1.25;
}
.bar-head b { font-size: 1rem; letter-spacing: -.01em; }
/* The sentence is the first thing to go when the bar runs out of room; the
screen name is not. */
.bar-head .faint { font-size: .75rem; }
/* The sentence goes when the bar tightens. THE NAME NEVER DOES: the page no
longer carries a heading of its own, so on a phone this is the only place
that says which screen you are on.
SCOPED TO THE BAR, not to every head. This was written when the head lived
in the application bar with the date and the mark crowding it, and it is
still right there. The head on the screen strip is in different
circumstances - it has a row to itself and it trims its sentence to an
ellipsis rather than overflowing - so blanking it at 64rem took the
description off a 1024px laptop for no reason. That head keeps its own
ladder, further down, and gives the sentence up at 52rem. */
@media (max-width: 64rem) { .topbar .bar-head .faint { display: none; } }
@media (max-width: 40rem) { .bar-head b { font-size: .9375rem; } }
/* THE DAY, set as a stamp rather than as another line of prose - a quiet
ground and the numeral face, so it reads as a fact the software is
reporting rather than as something the page is telling you. */
.bar-date {
display: inline-flex; align-items: center;
flex: none;
padding: .3rem .6rem;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--sunken);
color: var(--ink-soft);
font-size: .75rem;
white-space: nowrap;
}
/* On a narrow bar the date is the least urgent thing in it. */
@media (max-width: 52rem) { .bar-date { display: none; } }
/* THE MARK IN THE BAR. It sits where the person used to, at the trailing
end - which on a bar whose left is already carrying a toggle and a screen
name is the only place left that is not a squeeze. */
.bar-brand { flex: none; margin-left: .25rem; }
/* THE MARK STANDS DOWN ON A PHONE, and only on a phone.
The bar carries four things now: the rail toggle, which shop you are
keying in, the button that starts the day's work, and the mark. At 375px
there is room for three of them. The wordmark is 153px of that bar - more
than the shop's name - and it is the only one of the four that tells you
nothing you did not already know: you are looking at the product.
The alternative was a second row of chrome, which is what happened before
this rule: the mark wrapped onto its own line and the bar went from 45px
to 85px on the smallest screen there is. Shrinking it instead would take
it to 22px, where the tagline under the name stops being readable at all.
So on a phone the bar says toggle, shop, new - and on every screen wider
than that the mark is exactly where it was. */
@media (max-width: 46rem) { .bar-brand { display: none; } }
.whoami { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.whereami { display: flex; flex-direction: column; line-height: 1.2; }
.whereami .mart { font-weight: 600; }
.whereami .who { font-size: .8125rem; color: var(--ink-soft); }
.drawer-toggle {
display: inline-flex; align-items: center; justify-content: center;
width: 2.25rem; height: 2.25rem;
border: 1px solid var(--line); border-radius: var(--radius-sm);
background: var(--raised); color: var(--ink-soft); cursor: pointer;
}
.drawer-toggle:hover { background: var(--sunken); color: var(--ink); }
/* ═══════════════════════════════════════════════════════════ the shell ══ */
/* Menu on the left, work on the right. The grid column is what collapses, so
putting the menu away is one class on one element and the screen beside it
reflows on its own. */
/* THE SHELL IS THE WHOLE PAGE NOW. It used to be a band inside the content
column, with the rail floating in it as a rounded panel; the rail is the
left edge of the application, so the two columns start at the top of the
window and run to the bottom of it.
NO GAP AND NO PADDING between them: a moat between a rail and the work it
leads to is what made it read as a widget parked beside the page rather
than as part of the frame. */
.shell {
/* ONE HEIGHT FOR THE WHOLE TOP STRIP. The brand plate and the bar beside
it are read as a single band across the window, and they were coming
out 2px apart - which at that width is a visible step. Declared once
here and taken by both.
3.0625rem IS 49px, AND IT IS A MEASUREMENT RATHER THAN A PREFERENCE.
It was 2.8125rem (45px), which was only ever a floor: the bar's own
contents - the mart name, the six shortcuts, the date, the avatar -
stack up to 48px plus a 1px border, so the bar ignored the token and
rendered 49 while anything that obeyed the token rendered 45.
That is how the brand plate came to hang below the bar even after
being told to use the same number. The token now states the height the
bar actually is, so min-height binds on both sides instead of being
overshot on one. If the bar's contents ever grow past this, they will
push it out again - and the fix then is this number, in this one
place. */
--bar-h: 3.0625rem;
display: grid;
grid-template-columns: var(--menu-w) minmax(0, 1fr);
align-items: stretch;
/* ═══ THE APPLICATION SITS ON THE PAGE AS A PANEL ═══
A gutter of half a gap all round, a deeper ground behind it, and the
four corners rounded. It costs eight pixels and it is what separates a
product from a page: the work has an edge, and the edge is deliberate.
NOTHING IS CLIPPED TO GET IT. overflow:hidden on this element would
make it the scrollport, and the two sticky bars inside would stop
sticking to the window - which is the whole reason they exist. So each
piece rounds its own outside corner instead: the rail the two on the
left, the bar the top right, the column the bottom right.
--gap-sm is the gutter, named once here and read by everything that
has to line up with it - including the sticky offsets, which are
measured from the window and not from this box. */
--page-gutter: var(--gap-sm);
/* A touch larger than --radius-lg. The panel is the biggest rounded
thing on the screen and a corner reads smaller the longer the edges
running into it are; 20px here matches 16px on a card. */
--page-radius: 1.25rem;
/* THE WINDOW, NOT THE DOCUMENT. The work scrolls inside - see main,
below - so the foot of the panel is always the foot of the screen. */
height: calc(100vh - var(--page-gutter) * 2);
border-radius: var(--page-radius);
/* Now that nothing inside sticks to the window, one clip rounds all four
corners and no piece has to round its own. */
overflow: hidden;
/* AN EDGE, NOT JUST A DIFFERENT GROUND.
Leaning on the ground behind it to show the corners works in daylight,
where --sunken sits a shade under the rail. At night it does not: the
rail IS --sunken there, so the panel and the page behind it came out
the same colour and the whole left side of the rounding disappeared.
A hairline is true in every theme and both modes, and it is what makes
this read as a panel rather than as a page that happens to be inset. */
border: 1px solid var(--line);
}
/* Only where the shell is: the landing page and the sign-in screens have
their own grounds and are not panels. */
body:has(.shell) {
background: var(--sunken);
padding: var(--gap-sm);
}
/* ═════════════════════════════════════════ what shows around the panel ══ */
/*
THE FRAME IS EIGHT PIXELS WIDE, so whatever lives in it has to work at a
glance or not at all. A slow wash of the palette's own accent, drifting
behind the panel, is enough: it catches the eye when you look at the edge
and it is invisible while you are keying, which on a screen somebody sits
in front of for eight hours is the whole requirement.
IT IS THE ACCENT, MIXED DOWN, so it belongs to whichever palette is on -
green in Counter Green, marigold in Shelf Edge - rather than being a colour
this file invented.
ONE TRANSFORM, NOTHING ELSE. The gradients are painted once onto a layer
larger than the window and that layer is nudged; nothing repaints, nothing
reflows, and the compositor carries it. Forty seconds end to end - slow
enough that you never catch it moving, only notice it has.
*/
body:has(.shell)::before {
content: "";
position: fixed;
inset: -25%;
z-index: -1;
pointer-events: none;
background:
radial-gradient(38% 38% at 22% 18%,
color-mix(in srgb, var(--accent) 34%, transparent), transparent 70%),
radial-gradient(32% 32% at 78% 82%,
color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%);
animation: page-wash 40s var(--ease) infinite alternate;
will-change: transform;
}
/* The travel is what makes it read as weather rather than as a stain. At two
and a half percent the two ends of the run were, side by side, the same
picture; at seven the corner it lights moves the width of a card over the
forty seconds, which is plainly a change and still far too slow to catch
in the act. */
@keyframes page-wash {
from { transform: translate3d(-7%, -4%, 0) scale(1); }
to { transform: translate3d( 7%, 4%, 0) scale(1.14); }
}
/* Somebody who has asked the machine to stop moving things means it. The
wash stays - it is a background, and a still one is still nicer than a
flat grey - it simply stops drifting. */
@media (prefers-reduced-motion: reduce) {
body:has(.shell)::before { animation: none; }
}
/* On a phone the panel is full bleed, so there is no frame for any of this
to show in and it would be a layer painted for nobody. */
@media (max-width: 60rem) {
body:has(.shell)::before { display: none; }
}
/* Measured on the whole element, borders included, so the plate beside it can
be given the same number and land on the same line. */
.shell-right .topbar { min-height: var(--bar-h); }
.shell-right .topbar-in { min-height: 0; }
/* Everything that is not the rail. A column, so the bar sits above the work
and the work takes the rest. */
.shell-right {
min-width: 0;
min-height: 0; /* or the scroller below cannot shrink */
display: flex; flex-direction: column;
background: var(--ground);
}
/* THE ONE THING THAT SCROLLS. The bars above it are siblings, so they stay
put without needing to be sticky about it, and the panel keeps its shape
however long the register is. */
.shell-right > main {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
}
/* THE SCREEN STRIP, under the application bar.
The bar above it belongs to the product - the rail toggle, the day, the
mark. This belongs to where you are: which shop, what this screen is,
which year is open, and the things a person starts by habit.
IT STAYS PUT WHEN THE WORK SCROLLS, and that is the point of separating
them: the button that opens the till is wanted from the middle of a stock
report, which is exactly when a strip that had scrolled away is two
clicks further than it should be. It sits directly under the bar, so the
two read as one piece of chrome rather than two floating rows. */
.page-bar {
position: relative;
z-index: 15;
background: var(--raised);
border-bottom: 1px solid var(--line);
}
/* THE STRIP IS ONE ROW, AND IT HAS TO BE TOLD SO.
It was allowed to wrap, and a wrapping strip does not fail evenly: it
fails by the length of whatever sentence the screen happens to have.
Measured at 1280px - Bill format, whose sentence is short, sat on one row
with its action in the corner; Preferences went to two rows and put the
action 903px away from that corner; Voucher numbering went to THREE and
read as a centred block rather than a header. Three screens of the same
kind, three different shapes, none of them chosen.
So the row never breaks. The screen's name always shows in full and the
action stays pinned to the far end where a person learns to find it; the
SENTENCE is the part that gives way, ending in an ellipsis when the window
is too narrow to hold all of it. That is the right thing to sacrifice - it
explains the screen, and the screen is already open. */
.page-bar-in {
display: flex;
align-items: center;
gap: var(--gap);
min-height: 2.5rem;
padding-block: .2rem;
flex-wrap: nowrap;
}
/* Nothing but the head may be squeezed - a button squeezed is a button with
its label cut in half. */
.page-bar-in > * { flex: none; }
.page-bar-in > .spacer { flex: 1 1 auto; }
/* THE STRIP'S OWN BUTTONS ARE PILLS.
They were .btn-quiet - no border, no fill - which on the strip read as
stray words rather than things to press: "Show the menu" and "← All items"
sat there like part of the sentence. A pill with a hairline is unmistakably
a control, and the strip is the one place a pill fits: it is a single row
of short labels, and a rounded shape says "one of a small set" the way a
square button does not.
FILLED IN THE MART'S COLOUR AT REST - the owner's call, after a grey pill
(looked like a footnote) and a black one (looked like the rail had leaked
into the strip). --accent with --accent-ink on it, so it is whatever colour
the mart chose and never a fixed one. On hover it deepens a step toward
the ink and lifts a hair, so the press has somewhere to go. Primary
buttons keep their own fill and only take the shape. */
.page-bar .btn:not(.btn-primary) {
min-height: 2rem;
padding: .3rem .9rem;
border-radius: 999px;
font-size: .8125rem;
gap: .4rem;
background: var(--accent);
border: 1px solid transparent;
color: var(--accent-ink);
box-shadow: 0 1px 2px rgb(0 0 0 / .12);
transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
box-shadow var(--dur) var(--ease);
}
.page-bar .btn:not(.btn-primary) .ico { width: .95rem; height: .95rem; flex: none; }
.page-bar .btn:not(.btn-primary):hover {
background: color-mix(in srgb, var(--accent) 82%, var(--ink));
color: var(--accent-ink);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgb(0 0 0 / .18);
text-decoration: none;
}
.page-bar .btn:not(.btn-primary):active { transform: none; box-shadow: none; }
.page-bar .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The primary action takes the pill shape and the lift, nothing else. */
.page-bar .btn-primary { border-radius: 999px; min-height: 2rem; padding: .3rem 1rem; font-size: .8125rem; }
.page-bar .btn-primary:hover { transform: translateY(-1px); }
/* The key hints beside them, quieter than the buttons and not fighting them. */
.page-bar .esc { font-size: .75rem; color: var(--ink-faint); }
/* A box on the strip - the day picker on "The day" - dressed like the
strip's pills: the same height, a hairline, rounded. */
.page-bar input:not([type=checkbox]):not([type=radio]) {
font: inherit; font-size: .8125rem; color: var(--ink);
background: var(--raised); border: 1px solid var(--line-strong); border-radius: 999px;
min-height: 2rem; padding: .25rem .7rem;
}
.page-bar input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
/* .bar-head.screen-head, not .screen-head, and the extra class is load-
bearing: ".page-bar .bar-head" further down this file sets flex-wrap and
align-items at exactly the same specificity, and being later it won. Both
of the declarations below were being dropped on the floor. */
.page-bar .bar-head.screen-head {
flex: 0 1 auto;
min-width: 0;
flex-wrap: nowrap;
/* CENTRED, NOT ON THE BASELINE, and the reason is worth writing down:
an overflow:hidden flex item no longer offers the baseline of its text
- it offers its bottom edge. Aligning that against the baseline of the
name beside it pushed this head to 50px when its tallest child was 23,
and the strip to 61px on the screens whose sentence is long enough to
need trimming. Centring is what the row actually wants anyway. */
align-items: center;
}
/* The name of the screen is never the thing that gets cut. */
.page-bar .screen-head b { flex: none; white-space: nowrap; }
.page-bar .screen-head .faint {
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ══════════════════════════════════ THE TWO HEADS, ONE PER BAR ══
The application bar carries the SHOP: which mart these keystrokes are
going into. The strip beneath carries the SCREEN: what it is, and the
sentence that says why.
Both are laid out the same way - the name and its second line side by
side rather than stacked, because a bar that stacks is a bar of double
the height on every screen for the sake of a line most people read
once. */
.bar-head.mart-head,
.page-bar .bar-head { flex-direction: row; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
/* THE SHOP'S NAME IS THE ONE PROPER NOUN IN THE CHROME, and it was set at
the same weight as the sentence beside it. It carries a little more:
the tracking pulled in the way a name is set rather than a line of
prose, and a short accent rule leading it.
The rule is drawn rather than written into the view - it is a mark of
where you are, not a word, so it belongs in the styling. IT IS THE ONE
THING WEARING THE ACCENT in the chrome, which is what makes it read as
identity rather than as another heading: the screen title below it is
set plainly, so the two never compete. */
.bar-head.mart-head b {
position: relative;
padding-left: .7rem;
font-size: 1.0625rem;
font-weight: 700;
letter-spacing: -.022em;
color: var(--ink);
}
.bar-head.mart-head b::before {
content: "";
position: absolute;
left: 0; top: .1em; bottom: .12em;
width: 3px;
border-radius: 3px;
background: var(--accent);
}
/* THE SCREEN'S NAME, on the strip. The largest word in the chrome, because
it is the one the page used to carry as its own
- it has moved, it
has not shrunk. */
.page-bar .screen-head b {
font-size: 1.125rem;
font-weight: 700;
letter-spacing: -.022em;
color: var(--ink);
}
/* A hairline between a name and the sentence beside it, so the two are
plainly two things on a row that has no room to stack them. */
.bar-head.mart-head .faint,
.page-bar .bar-head .faint {
position: relative;
padding-left: .8rem;
font-size: .8125rem;
}
.bar-head.mart-head .faint::before,
.page-bar .bar-head .faint::before {
content: "";
position: absolute;
left: 0; top: .15em; bottom: .1em;
width: 1px;
background: var(--line-strong);
}
/* The branch goes first when the bar tightens; the shop never does. */
@media (max-width: 62rem) { .bar-head.mart-head .faint { display: none; } }
@media (max-width: 52rem) { .page-bar .bar-head .faint { display: none; } }
/* AND ON A PHONE THE STRIP MAY BREAK AFTER ALL.
One row is right where there is a row to be had. Customers and suppliers
puts a title, three filters and a New button on its strip; at 375px that
is 377px of content in a 351px box, and because nothing in it may shrink,
what gave way was the SCREEN NAME - pushed off the left edge until it read
"and s". A heading you cannot read is worse than a strip of two rows.
So below the width where the sentence has already gone, wrapping comes
back. It costs nothing on the screens that do not need it: a title and one
button still sit on a single row and never reach for a second. */
@media (max-width: 52rem) {
.page-bar-in { flex-wrap: wrap; row-gap: .35rem; }
}
/* THE NAME GIVES WAY BEFORE THE BAR BREAKS.
On a phone the bar is carrying the rail toggle, the shop, the button that
starts the day and the mark. A long shop name pushed the mark onto a
second row and made the bar 85px of a 812px screen - two rows of chrome
before any work.
So the name is the thing that shrinks: it takes what room is left and
ends in an ellipsis rather than wrapping the row. Nothing is lost - the
element carries the full name in its title, so a shop whose name is cut
is one hover away from being read in full. */
.bar-head.mart-head { flex: 0 1 auto; min-width: 0; }
.bar-head.mart-head b {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Put away, the rail is icons only - so the gap beside it shrinks with it.
Leaving the full gap made a narrow strip of icons sit in a wide moat, which
reads as a layout that has broken rather than one that has collapsed. */
.shell.is-collapsed { grid-template-columns: var(--menu-w-thin) minmax(0, 1fr); }
/* PUT AWAY, THE MENU KEEPS ITS ICONS AND ITS HIGHLIGHT - so it stays a map
rather than becoming a strip of symbols nobody can read. */
.shell.is-collapsed .menu-h { display: none; }
.shell.is-collapsed .menu a { justify-content: center; padding-inline: 0; }
/* ═══ THE NAME COMES BACK ON HOVER ═══
display: none ON THE LABEL WAS TWO BUGS IN ONE LINE, and it read as
"on hover no menu is showing".
The first is the obvious one: a rail of twelve unlabelled icons is a
guessing game. "Is that box the stock report or the purchase order?" is
answered by clicking and finding out, which is the opposite of a menu.
The second is quieter and worse. A display: none span is not hidden from
sight, it is REMOVED FROM THE PAGE - so the link lost its accessible name
along with its visible one. Collapsed, every entry in this menu announced
itself to a screen reader as an unlabelled link. Twelve of them.
So the label is not removed any more. It is moved out of the way and
brought back under the pointer, which fixes both at once: the name is in
the document the whole time for anything reading it, and it appears beside
the icon for anyone looking at it.
POSITION: FIXED, NOT ABSOLUTE, and that is the load-bearing detail. The
rail sets overflow: auto so a long module list can scroll inside itself;
an absolutely positioned label would be clipped by that at the rail's
edge - which is exactly 48px away, so it would be cut off mid-word. A
fixed element is positioned against the viewport and escapes the clip.
With no top/left of its own it stays at its static position, which is
where the icon put it.
ONE COMPROMISE, STATED: a fixed label does not scroll with the rail. If
somebody holds the pointer still and scrolls the icons under it, the name
stays where it was. That lasts as long as the scroll does, and it is the
price of not being clipped. The rail only scrolls when the modules do not
fit, which on a normal screen they do. */
.shell.is-collapsed .menu .lbl-text {
position: fixed;
z-index: 40;
/* Clear of the rail, and clear of its shadow. */
margin-left: calc(var(--menu-w-thin) + var(--gap-sm));
padding: .3rem .5rem;
border-radius: var(--radius-sm);
background: var(--rail);
color: var(--rail-ink);
border: 1px solid color-mix(in srgb, var(--rail-ink) 22%, var(--rail));
box-shadow: 0 2px 8px rgb(0 0 0 / .18);
font-size: .8125rem;
line-height: 1.2;
white-space: nowrap;
/* Invisible rather than absent - see above. opacity keeps it in the
accessibility tree; pointer-events keeps it from eating the hover that
is showing it. */
opacity: 0;
pointer-events: none;
transition: opacity var(--dur) var(--ease);
}
/* :focus-visible as well as :hover, because the rail is reachable by keyboard
and somebody tabbing through twelve icons needs the name just as much as
somebody pointing at them. */
.shell.is-collapsed .menu a:hover .lbl-text,
.shell.is-collapsed .menu a:focus-visible .lbl-text,
.shell.is-collapsed .menu .grp > summary:hover .lbl-text,
.shell.is-collapsed .menu .grp > summary:focus-visible .lbl-text,
.shell.is-collapsed .rail-out button:hover .lbl-text,
.shell.is-collapsed .rail-out button:focus-visible .lbl-text {
opacity: 1;
}
/* Somebody who has asked for less motion gets the label without the fade. */
@media (prefers-reduced-motion: reduce) {
.shell.is-collapsed .menu .lbl-text { transition: none; }
}
.shell-main { min-width: 0; padding-block: var(--gap) var(--gap-lg); } /* min-width: without it a wide table stretches the grid */
@media (max-width: 60rem) {
.shell, .shell.is-collapsed { grid-template-columns: minmax(0, 1fr); min-height: 0; }
/* ═══ NO PANEL ON A PHONE ═══
The gutter and the rounded corners are worth eight pixels on a desktop,
where they say where the application ends. On a 375px screen those same
eight pixels each side are eight pixels of the work, and there is no
"outside" to show anyway - the application IS the window. So the panel
goes full bleed and every corner squares up. */
body:has(.shell) { padding: 0; background: var(--ground); }
/* The window scrolls again here: the shell is not a fixed frame on a
phone, where the address bar and the keyboard both change the height
of the viewport under you. */
.shell { --page-gutter: 0px; height: auto; min-height: 0; border-radius: 0; border: 0; overflow: visible; }
.shell-right > main { overflow: visible; }
.shell .menu { height: auto; }
.shell .menu { border-radius: var(--radius); }
.shell-right { border-radius: 0; }
.topbar { border-start-end-radius: 0; }
/* The plate stops being sticky in a band that is itself scrolling. */
.menu .rail-brand { position: static; border-radius: var(--radius) 0 0 0; }
.rail-out { margin-top: var(--gap-sm); }
/* THE RAIL BECOMES A BAND, AND THE BAND IS BOUNDED.
Stacked above the work at full height it was eleven rows before the
first figure - a phone opened on the dashboard showed the menu and
nothing else. Nothing is hidden and nothing is dropped: the band
keeps every entry and scrolls inside itself, which it is already set
up to do (overflow and overscroll-behavior are on .menu above). */
.shell .menu { position: static; height: auto; max-height: 45vh; border-radius: var(--radius); }
/* ═══ AND ON A PHONE IT STARTS PUT AWAY ═══
Bounding the band was not enough. 45vh is still HALF THE SCREEN spent
on the menu before the work begins, and it is worse on a module screen
because that module's group is open inside it: opening Items showed the
logo, Dashboard, MODULES, Masters, Overview, Items, New item and
Expired stock - and the items themselves below the fold.
THE BUTTON IN THE BAR ALREADY EXISTED AND DID NOTHING HERE. It toggles
.is-collapsed, which on a desk narrows the rail to its icons - but this
breakpoint gives .shell and .shell.is-collapsed the same single column,
so on a phone the two states looked identical and the menu could not be
put away at all.
Now it can. Collapsed means gone on a phone rather than narrowed, which
is what a menu behind a button is; the drawer script defaults it closed
at this width and remembers anybody who says otherwise. */
.shell.is-collapsed .menu { display: none; }
/* A screen that hangs its own actions in the bar (see the TopActions
section in _Work.cshtml) can put more in it than a narrow window has
room for. Wrapping to a second row costs a few pixels of height;
the alternative is the mart and the operator's name squeezed until
neither can be read. */
.topbar-in { flex-wrap: wrap; row-gap: var(--gap-sm); }
}
/* ════════════════════════════════════════════════════════════ the menu ══ */
/* A DARK RAIL BESIDE A LIGHT WORKSPACE. See --rail in theme.css for how it
is derived; nothing here names a colour.
IT RUNS THE FULL HEIGHT rather than stopping where the last entry does.
A short dark box floating in the corner reads as a widget; a rail that
reaches the floor reads as the edge of the application - and on a screen
with one mart on it, it is what stops the page looking like content
parked at the top of an empty field. */
.menu {
/* A full-height column of the panel; it no longer has a window to
stick to, and the grid stretches it for us. */
position: relative;
/* A COLUMN, NOT A GRID, and the reason is one line further down: Sign
out is pushed to the foot with margin-top:auto, and auto margins do
nothing against a grid whose rows are already packed to the start. */
display: flex; flex-direction: column; gap: 1px;
background: var(--rail);
border: 0;
border-radius: 0; /* the shell clips the corners now */
padding: 0 var(--gap-sm) var(--gap-sm);
color: var(--rail-ink);
/* ═══ A STICKY MENU STILL HAS TO FIT ON THE SCREEN ═══
Sticky positioning pins the top and says nothing about the bottom, so
ten modules with one of them expanded simply ran off the foot of the
window with no way to reach the last few entries - Chart of accounts
was unreachable on a laptop. Bounding the height to what is left below
the top bar and letting it scroll is the whole fix.
overscroll-behavior stops a flick inside the menu from carrying on and
scrolling the page underneath once the list ends, which on a till is
the difference between finding a screen and losing your place. */
height: 100%;
overflow-y: auto;
overscroll-behavior: contain;
}
/* A scrollbar that is only there when it is needed, and quiet when it is. */
.menu { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--rail-ink) 26%, var(--rail)) transparent; }
.menu::-webkit-scrollbar { width: 8px; }
.menu::-webkit-scrollbar-track { background: transparent; }
.menu::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--rail-ink) 26%, var(--rail)); border-radius: 4px; }
.menu::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--rail-ink) 45%, var(--rail)); }
.menu a, .menu .locked-item {
position: relative;
display: flex; align-items: center; gap: .6rem;
padding: .5rem .6rem;
border-radius: var(--radius-sm);
color: color-mix(in srgb, var(--rail-ink) 90%, var(--rail));
font-size: .875rem;
white-space: nowrap;
transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.menu a:hover {
background: color-mix(in srgb, var(--rail-ink) 14%, var(--rail));
color: var(--rail-ink);
text-decoration: none;
}
/* The icon leads the eye down the rail, so it takes the colour of the state
rather than staying grey while the label changes underneath it. */
.menu a .ico { color: color-mix(in srgb, var(--rail-ink) 74%, var(--rail)); transition: color var(--dur) var(--ease); }
.menu a:hover .ico { color: var(--rail-ink); }
/* THE LABEL IS INK, NOT ACCENT. Accent on accent-soft measures 4.08:1 in
the day palettes - under the 4.5 that normal text needs, on the one
entry in the rail somebody is most likely to read. The colour has not
left: it is in the bar on the edge and in the icon, both of which are
graphics and only owe 3:1. The label just stops paying for it. */
/* ON A DARK RAIL THE CURRENT SCREEN IS A FILLED PILL, not a tint. A tint
that reads clearly against white is nearly invisible against near-black,
and this is the one entry that has to be findable at a glance from across
a counter. accent-ink is the palette's own answer to "what is legible on
the accent", so every theme gets a readable pill for free. */
.menu a.on {
background: var(--accent);
color: var(--accent-ink);
font-weight: 600;
}
.menu a.on .ico { color: var(--accent-ink); }
/* WHERE YOU ARE, SAID TWICE. The tint alone is easy to lose on the pale
palettes and in a menu that is mostly tint-free; a solid bar on the edge is
readable at a glance from across a counter, and it is the one mark in the
rail that cannot be mistaken for a hover. */
/* A marker on the trailing edge of the pill. On the tinted version this bar
sat on the left and carried the accent; on a filled pill the accent is
the pill, so it moves to the far edge and is drawn in the ink instead -
the same "you are here" mark, still visible when the rail is collapsed to
icons and the label is gone. */
.menu a.on::before {
content: "";
position: absolute;
right: .35rem; top: 50%;
width: 3px; height: 1rem;
transform: translateY(-50%);
border-radius: 3px;
background: var(--accent-ink);
opacity: .75;
}
/* A MODULE NOBODY MAY OPEN IS SHOWN, NOT HIDDEN. A cashier who can see that
GST exists and is closed to them knows there is something to ask the owner
for; one who sees nothing concludes the software cannot do it. */
.menu .locked-item { color: color-mix(in srgb, var(--rail-ink) 58%, var(--rail)); cursor: default; }
.menu .locked-item .ico { color: color-mix(in srgb, var(--rail-ink) 48%, var(--rail)); opacity: 1; }
.menu .locked-item .lock { margin-left: auto; font-size: .8rem; opacity: .7; }
/* A LABEL NEEDS THE AIR ABOVE IT, not below: it belongs to the list that
follows, and with equal space on both sides it read as though it belonged
to the entry above. The first one loses the extra, so the rail does not
start with a gap. */
.menu-h {
padding: 1.1rem .6rem .3rem;
font-size: .6875rem;
text-transform: uppercase;
letter-spacing: .07em;
color: color-mix(in srgb, var(--rail-ink) 72%, var(--rail));
font-weight: 700;
}
/* ────────────────────────────────────────────────── modules and screens ── */
/*
A module that has screens inside it is a . Native disclosure gives
keyboard support, works before the JavaScript loads, and survives it failing
— which on a till on a bad connection is a real state.
ONLY THE GROUP HOLDING THE CURRENT SCREEN IS OPEN, so the menu stays a short
list instead of becoming a wall of forty entries. That is the space this
gets back.
*/
/* WHO IS SIGNED IN, AT THE HEAD OF THE RAIL.
IT SWAPPED PLACES WITH THE MARK, and the swap paid for itself twice. The
mark is back on a light surface - the bar - which is what the artwork was
drawn for, so the plate that had to be built to make it legible against
near-black is gone. And the rail head now carries the thing worth a glance
rather than the thing you learn once.
Flush across the rail and stuck to its top, so it is the head of the
column rather than a card dropped into it, and so it stays put when forty
entries scroll underneath. */
/* OPEN, IT IS A PORTRAIT: the disc centred and the name under it. Beside
each other they were competing with the row of module entries below for
the same left-to-right reading; stacked and centred, the head of the rail
is plainly a different kind of thing from the list it heads.
Put away it goes back to just the disc - see the collapsed rules below. */
.rail-who {
position: sticky; top: 0; z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: .5rem;
box-sizing: border-box;
margin-inline: calc(var(--gap-sm) * -1);
margin-bottom: var(--gap-sm);
padding: 1.15rem var(--gap) 1rem;
background: var(--rail);
border-bottom: 1px solid color-mix(in srgb, var(--rail-ink) 15%, var(--rail));
text-align: center;
}
/* Bigger, because it is the thing the block is now built around rather than
a mark beside a line of text. */
.rail-who .avatar { width: 2.75rem; height: 2.75rem; font-size: .9375rem; }
/* A RING RATHER THAN A BORDER. On a near-black rail a bordered circle reads
as a hole; a ring set slightly off the surface reads as a disc sitting on
it, which is what an avatar is meant to look like. */
.rail-who .avatar {
background: var(--accent);
color: var(--accent-ink);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--rail-ink) 18%, var(--rail));
}
.rail-who-text { display: flex; flex-direction: column; align-items: center; max-width: 100%; min-width: 0; line-height: 1.3; }
/* A long name is cut with an ellipsis rather than wrapped: the head is one
bar high and a second line would push the whole rail down. */
.rail-who-text b {
max-width: 100%;
font-size: .9375rem;
color: var(--rail-ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rail-who-text > span {
font-size: .625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: color-mix(in srgb, var(--rail-ink) 60%, var(--rail));
}
/* Put away, the initials are the whole of it - which is the one part of a
name that still means something at 48px. */
/* Put away, the disc alone, and back to its ordinary size: a 44px circle in
a 48px rail leaves no room for the rail to be a rail. */
.shell.is-collapsed .rail-who { padding: .7rem 0; gap: 0; }
.shell.is-collapsed .rail-who .avatar { width: 1.9rem; height: 1.9rem; font-size: .6875rem; }
.shell.is-collapsed .rail-who-text { display: none; }
/* ── the way out, at the foot ──
margin-top:auto is the whole mechanism: it eats every spare pixel in the
column, so the button sits on the floor of the rail however short the
menu is, and travels back up the moment the menu grows. */
.rail-out { margin: auto 0 0; padding-top: var(--gap-sm); }
.rail-out button {
display: flex; align-items: center; gap: .6rem;
width: 100%;
padding: .5rem .6rem;
border: 0;
border-radius: var(--radius-sm);
background: none;
color: color-mix(in srgb, var(--rail-ink) 90%, var(--rail));
font: inherit;
font-size: .875rem;
text-align: left;
white-space: nowrap;
cursor: pointer;
transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.rail-out button .ico { color: color-mix(in srgb, var(--rail-ink) 74%, var(--rail)); flex: none; }
/* Signing out is the one thing in this rail somebody does by accident, so
it answers in the colour of a thing you meant to do. */
.rail-out button:hover { background: color-mix(in srgb, var(--bad) 22%, var(--rail)); color: var(--rail-ink); }
.rail-out button:hover .ico { color: var(--rail-ink); }
.shell.is-collapsed .rail-out button { justify-content: center; padding-inline: 0; }
.menu > .menu-h:first-child { padding-top: .25rem; }
.menu .grp { border-radius: var(--radius-sm); }
.menu .grp > summary {
display: flex;
align-items: center;
gap: .6rem;
padding: .5rem .6rem;
border-radius: var(--radius-sm);
color: color-mix(in srgb, var(--rail-ink) 90%, var(--rail));
font-size: .875rem;
cursor: pointer;
white-space: nowrap;
list-style: none; /* the default triangle, replaced below */
user-select: none;
}
.menu .grp > summary::-webkit-details-marker { display: none; }
.menu .grp > summary::marker { content: ""; }
.menu .grp > summary { transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.menu .grp > summary:hover {
background: color-mix(in srgb, var(--rail-ink) 14%, var(--rail));
color: var(--rail-ink);
}
.menu .grp > summary .ico { color: color-mix(in srgb, var(--rail-ink) 74%, var(--rail)); }
.menu .grp[open] > summary .ico { color: var(--rail-ink); }
.menu .grp[open] > summary { color: var(--rail-ink); font-weight: 600; }
/* A chevron drawn from a border rather than a glyph, so it rotates cleanly
and needs no icon font. */
.menu .chev {
margin-left: auto;
width: .4rem; height: .4rem;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(-45deg);
transition: transform .15s ease;
opacity: .6;
flex: none;
}
.menu .grp[open] .chev { transform: rotate(45deg); }
/* ══════════════════════════════════════════ the mark, at the rail head ══ */
/*
IT CHANGED PLACES WITH THE PERSON, who is out in the bar now. The rail runs
the full height of the window and is on screen whatever you are doing, so
the product signs itself here rather than in the corner of one bar.
ON A PLATE, and it has to be. The artwork is dark teal drawn on white, with
opaque white inside the letters - it cannot be lightened for a dark ground,
and against the rail as it stands it measures about 2:1. --logo-plate is
white in every palette and in both modes for exactly this reason: it is the
image own ground, not a design choice.
STICKY, like the head it replaces, so the mark stays put while the modules
under it scroll.
*/
/* SCOPED TO .menu, and it has to be: ".menu a" is a class and a type, which
outranks a bare ".rail-brand" - it was quietly winning the radius AND the
padding of this plate. */
.menu .rail-brand {
display: flex;
align-items: center;
justify-content: center;
position: sticky; top: 0; z-index: 2;
margin-inline: calc(var(--gap-sm) * -1);
margin-bottom: var(--gap-sm);
/* THE PLATE AND THE TOP BAR SHARE ONE BOTTOM EDGE, and they have to:
they sit side by side at the top of the application, each with its own
1px bottom border, and those two borders read as ONE line across the
head of the screen. Any difference in height breaks that line and the
rail looks like it is sliding out from under the bar.
It was broken. The plate was padded .85rem above and below a 2.5rem
mark, which came to 68px against a 49px bar - the white panel hung
nineteen pixels below it, which is what "correct the menu and logo
layout" was about.
--bar-h ALREADY EXISTED FOR THIS, declared on .shell and used by
.shell-right .topbar - and this plate was simply not taking it. The
token's own comment says it was added because the two came out "2px
apart, which at that width is a visible step"; the plate then grew its
own padding and drifted nineteen. Both sides read it now, so there is
one number and no way for them to disagree again.
The padding is gone from the block axis on purpose: the height is the
token's to decide, and align-items: center above puts the mark in the
middle of whatever that is. Left and right padding stays, because it is
what keeps the wordmark off the edges. */
min-height: var(--bar-h);
padding: 0 var(--gap);
background: var(--logo-plate);
border-bottom: 1px solid color-mix(in srgb, var(--rail-ink) 15%, var(--rail));
/* Square: the shell clips the panel corner over it. */
}
.menu .rail-brand img { height: var(--logo-h); width: auto; max-width: 100%; }
/* The square mark waits until the rail is put away. */
.menu .rail-brand .mark-square { display: none; }
.menu .rail-brand:hover { text-decoration: none; }
/* COLLAPSED, THE WORDMARK IS CROPPED TO ITS CART. The rail is 3rem wide
there, and a mark four and a half times wider than it is tall would come
out nine pixels high - not a mark, a smudge. object-fit crops instead of
scaling, and the cart sits at the left of the artwork, so what survives is
the part somebody actually recognises. */
.shell.is-collapsed .menu .rail-brand { padding: .55rem .25rem; }
/* PUT AWAY, THE CART STANDS IN FOR THE WHOLE MARK.
This was a crop of the wordmark - object-fit cutting the lettering off at
whatever column the arithmetic landed on. It read as a picture that had
failed to load rather than as a logo. It is a separate file now, cut from
the same artwork at the gap the designer already left between the cart and
the K, so nothing is sliced through. */
.shell.is-collapsed .menu .rail-brand .mark-wide { display: none; }
.shell.is-collapsed .menu .rail-brand .mark-square {
display: block;
width: 1.7rem;
height: 1.7rem;
max-width: 100%;
}
/* ═════════════════════════════════════ the things you start, in the bar ══ */
/*
THEY WERE BEHIND A "NEW" MENU. A menu is two clicks and a guess at what is
inside it; six buttons are one click and no guess, and the row itself says
what this end of the bar is for.
Held together as one segmented control rather than left as six loose icons,
because they ARE one thing - the half-dozen jobs somebody starts by habit -
and six unattached buttons beside the shop name read as clutter.
*/
.starter-bar {
display: inline-flex;
align-items: center;
gap: .15rem;
flex: none;
padding: .15rem;
border-radius: var(--radius);
background: var(--sunken);
border: 1px solid var(--line);
}
.starter-bar .btn-icon { border-color: transparent; background: none; }
/* NAMED, NOT JUST DRAWN. Each button is its glyph and a short word - Till,
Sale, Quotation, Purchase, Order, Stock - so nobody has to hover to
learn what six symbols mean. The button widens to fit the word; under
78rem the words step back and the glyphs stay, because the bar also
carries the shop, the date and whoever is keying. */
.starter-bar .btn-icon:has(> .lbl) {
width: auto;
height: 1.85rem;
padding: 0 .65rem 0 .5rem;
gap: .35rem;
font-size: .8125rem;
font-weight: 600;
color: var(--ink);
text-decoration: none;
}
.starter-bar .btn-icon .lbl { white-space: nowrap; }
.starter-bar .btn-icon:has(> .lbl) .ico { color: var(--accent); }
.starter-bar .btn-icon:has(> .lbl):hover { background: var(--accent-soft); color: var(--accent); }
@media (max-width: 78rem) {
.starter-bar .btn-icon .lbl { display: none; }
.starter-bar .btn-icon:has(> .lbl) { width: 1.75rem; padding: 0; }
}
/* ON A PHONE THE ROW STANDS DOWN. Six buttons is 220px of a 351px bar that
also carries the rail toggle, the shop and whoever is keying - and every
one of them is a row in the rail underneath, spelled out in words. */
@media (max-width: 62rem) { .starter-bar { display: none; } }
.menu .grp-items {
display: grid;
gap: 1px;
/* Indented under the module and hung off a hairline, so a sub-screen is
visibly inside something rather than another top-level entry. */
margin: 1px 0 .3rem .95rem;
padding-left: .5rem;
border-left: 1px solid var(--line);
}
.menu .grp-items a { font-size: .8125rem; padding: .34rem .5rem; }
.menu .grp-items .ico { width: 1rem; height: 1rem; opacity: .8; }
/* Put away, the sub-screens go with it — the drawer keeps icons and the
current highlight, and a nested list of unlabelled icons is unreadable. */
.shell.is-collapsed .menu .grp-items,
.shell.is-collapsed .menu .chev { display: none; }
.shell.is-collapsed .menu .grp > summary { justify-content: center; padding-inline: 0; }
/* ═══════════════════════════════════════════════════════════ the pieces ══ */
/* A PANEL ON A WORKING SCREEN IS NOT A PANEL ON A BROCHURE. 28px of padding
is generous on a landing page and wasteful here, where four of these stack
down a laptop and every row of air is a row of the register nobody can see.
20px keeps them comfortably apart and gets a whole line back per panel. */
.card {
/* Declared as a token because a child that bleeds to the card's edge -
see .spec-row - has to cancel exactly this and no other number. */
--pad-card: 1.25rem;
background: var(--raised);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--pad-card);
box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: var(--gap); }
.card-head {
display: flex; align-items: center; gap: .65rem;
margin-bottom: var(--gap);
padding-bottom: .6rem;
border-bottom: 1px solid var(--line);
}
/* A PANEL HEADING IS NOT A PAGE HEADING. At the default h2 it was 20px and
competing with the screen name above it; --fs-lg puts the two in order. */
.card-head h2 { margin: 0; font-size: var(--fs-lg); letter-spacing: -.01em; }
/* ON A PHONE THE HEADING KEEPS ITS LINE. With a sentence beside it in the
same row, the heading was the thing that shrank - "Prices on the shelf"
broke into three lines next to a caption that had plenty. Now the caption
is what moves, to a row of its own under the heading. */
@media (max-width: 40rem) {
.card-head { flex-wrap: wrap; }
.card-head h2 { flex: none; }
}
/* THE PANEL ICON SITS IN A TINTED TILE - the same device the landing page
uses, so the two halves of the product look like one product. It gives the
heading a fixed thing to start from instead of a loose glyph, and it is
drawn on the