/* ============================================================================ JEM Groom App — standalone stylesheet. Ports the design tokens + base classes from assets/jem.css and the kept screen styles: screen 20 (20-mobile-responsive-grids.html), screen 20c (the 4-step New Movement wizard, 20c-mobile-new-movement.html) and screen 20d (Movement details, 20d-mobile-movement-details.html). No external stylesheet and no third-party font CDN: the brand faces are SELF-HOSTED from wwwroot/fonts, so the app stays fully self-contained / offline capable. Dropped from the mock-ups: .stage, the explain panels, the gesture demo, the phone bezel / status bar / notch and the story-export chrome — the real device frames it. ============================================================================ */ /* ============================================================================ Brand faces — Proxima Nova (body) and Minerva Modern (display). The same files and the same declarations as JEM (Juddmonte.Jem.Web Assets/styles/fonts.scss), copied rather than referenced: the two apps deploy separately, and this one is meant to run with no external asset host. Minerva ships three real cuts mapped to the standard CSS weight scale, so font-weight picks the drawn weight rather than a browser-synthesised bold. font-display: swap so a slow face never blanks the text — it falls through --font-display's stack to Proxima Nova and then to the system UI font. ============================================================================ */ @font-face { font-family: 'proxima_nova'; src: url('../fonts/proxima_nova_font-webfont.woff2') format('woff2'), url('../fonts/proxima_nova_font-webfont.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'proxima_nova'; src: url('../fonts/proxima_nova_bold_font-webfont.woff2') format('woff2'), url('../fonts/proxima_nova_bold_font-webfont.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'minerva_modern'; src: url('../fonts/minervamodern_regular-webfont.woff2') format('woff2'), url('../fonts/minervamodern_regular-webfont.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'minerva_modern'; src: url('../fonts/minervamodern_bold-webfont.woff2') format('woff2'), url('../fonts/minervamodern_bold-webfont.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'minerva_modern'; src: url('../fonts/minervamodern_black-webfont.woff2') format('woff2'), url('../fonts/minervamodern_black-webfont.woff') format('woff'); font-weight: 900; font-style: normal; font-display: swap; } /* ============================================================================ JEM design tokens — the same palette as JEM (Juddmonte.Jem.Web Assets/styles/_jem-tokens.scss), so the two Juddmonte apps look like one family. Written as plain CSS: the source is SCSS and its `//` comments are NOT valid here — CSS would treat the rest of the line as a declaration and silently drop it. ── HOW THIS PALETTE WORKS — read before adding or picking a colour ────────── THE NUMERIC SUFFIXES ARE BRAND-MANDATED TINTS, NOT ARBITRARY SHADES. Juddmonte's brand guidelines supply five core colours and state: "Percentages of 100%, 80%, 60%, 40% and 20% can be used from any of the core palette colours. No other percentage may be used." The -80/-60/-40/-20 suffixes ARE those percentages, so: - DO pick from the five steps that exist. DO NOT invent a -70, a -90, or a one-off hex. - Every step is a TINT — lower number = LIGHTER (closer to white), never darker. There is no darker-than-100% step. If you need a darker state (e.g. a hover), do it with a filter or an overlay, not by inventing a token. THE BRAND SECTION IS BRAND ONLY. pink / green / forest / charcoal / gainsboro are Juddmonte's own identity. Semantic UI colours (info / warning / danger) are deliberately NOT in it — they are web convention, named the way Bootstrap and every other UI framework names them, and are free to change without touching brand. A TOKEN THAT IS NOT DEFINED BELOW DOES NOT EXIST. An undefined var() does not fail the build — it silently drops the declaration — so a plausible-looking name will compile and simply render nothing. Check the list before reaching for one. --jem-forest and --jem-gainsboro were added for completeness of the brand set; they may show as unused. That is intentional — do not prune them. ============================================================================ */ :root { /* ── Juddmonte brand palette ──────────────────────────── */ --jem-pink: #f277c6; --jem-pink-80: #f592d1; --jem-pink-60: #f7addd; --jem-pink-40: #fac9e8; --jem-pink-20: #fce4f4; --jem-green: #00af66; --jem-green-80: #33bf85; --jem-green-60: #66cfa3; --jem-green-40: #99dfc2; --jem-green-20: #ccefe0; --jem-forest: #005844; --jem-forest-80: #337969; --jem-forest-60: #669b8f; --jem-forest-40: #99bcb4; --jem-forest-20: #ccdeda; --jem-charcoal: #333f48; --jem-charcoal-80: #5c656d; --jem-charcoal-60: #858c91; --jem-charcoal-40: #adb2b6; --jem-charcoal-20: #d6d9da; --jem-gainsboro: #d9e1e2; --jem-gainsboro-80: #e1e7e8; --jem-gainsboro-60: #e8edee; --jem-gainsboro-40: #f0f3f3; --jem-gainsboro-20: #f7f9f9; /* ── Other web colours ────────────────────────────────── */ --jem-info: #5fa888; --jem-info-soft: #cfe5d9; --jem-warning: #d97706; --jem-warning-soft: #fef3c7; --jem-danger: #d12b3f; /* LATE, not broken. A softer red than --jem-danger on purpose: it reads against the charcoal header, where the danger red goes muddy, and overdue work is a nudge rather than an error. */ --jem-late: #ff7878; --jem-danger-soft: #fde2e5; /* ── Neutrals ─────────────────────────────────────────── */ --ink: #0f172a; --ink-2: #334155; --ink-3: #64748b; --ink-4: #94a3b8; --line: #e2e8f0; --line-2: #cbd5e1; --bg: #f6f7f9; --bg-2: #eef1f5; --card: #ffffff; /* ── Typography ───────────────────────────────────────── */ --font: proxima_nova, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Display face for headings and top-level navigation. Falls back through the whole of --font's stack, so a failed/slow Minerva load degrades to proxima_nova rather than to a system serif. */ --font-display: minerva_modern, proxima_nova, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* ── Shape / elevation ────────────────────────────────── */ --radius: 6px; --radius-lg: 10px; --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-2: 0 4px 14px rgba(15, 23, 42, 0.08); --shadow-3: 0 10px 30px rgba(15, 23, 42, 0.12); } /* ---------- Base (from jem.css) ---------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; background: var(--jem-charcoal); /* frames the app column on wider screens */ color: var(--ink); font-family: var(--font); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; overflow: hidden; /* NO DOUBLE-TAP ZOOM, anywhere (JGMA-46). `manipulation` is pan + pinch-zoom without double-tap, and touch-action INTERSECTS down the tree, so this changes no gesture region the app already declares: pan-y, pinch-zoom and none stay as they are, and an `auto` (declared, or the default on a region that declares nothing) loses only double-tap zoom. Pinch is stopped separately — by the viewport tag on Android and the gesture listeners in index.html on iOS. ZoomPreventionTests. */ touch-action: manipulation; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } /* ── Display face on every heading, as in JEM ──────────────────────────────── Minerva Modern for h1-h6, plus the nav-bar titles: those are
rather than headings (the bar is chrome, not document structure), so an element selector alone would miss the one place the app most looks like a header. Deliberately element-based otherwise: headings are written as plain

-

across Home, the wizard and Movement details, so anything class-based would have to be chased across files and would silently miss the next one added. No font-weight here — each heading keeps the weight its own rule sets, and the three Minerva cuts (400/700/900) mean the real weight is chosen rather than a browser-synthesised bold. No !important either: unlike JEM there is no Radzen here setting its own font-family on headings. */ h1, h2, h3, h4, h5, h6, .m-nav .title, .m-header .title { font-family: var(--font-display); } /* Force native controls to render light so text stays visible even under an OS dark theme. */ input, select, textarea { color-scheme: light; } select option { color: var(--ink); background: #fff; } /* ---------- Layout: the one viewport-height column (JGMA-84) ---------- MainLayout's wrapper. The page — an .app-shell or an .auth-status — FILLS what is left under the environment banner, instead of each claiming the full viewport height itself. With a full 100dvh of its own, the banner would push it 15px past the bottom of the screen, where `html, body { overflow: hidden }` would cut it off. */ .layout { height: 100vh; height: 100dvh; display: flex; flex-direction: column; } /* has-env-banner hands the status-bar inset to the banner, so .m-nav does not pad it twice. */ .layout.has-env-banner { --top-inset: 0px; } /* The red DEV ENVIRONMENT banner (JGMA-84), shown only in UAT. Above the page rather than inside .m-header, so it takes its own space and needs no negative margin. padding-top clears the status bar in the installed iPhone app (viewport-fit=cover + black-translucent). */ .env-banner { flex: 0 0 auto; background: #db0000; width: 100%; text-align: center; color: #fff; font-weight: bold; font-size: 12px; padding-top: env(safe-area-inset-top, 0px); } /* ---------- App shell (replaces each mock-up's phone .inner) ---------- */ .app-shell { position: relative; width: 100%; max-width: 480px; margin: 0 auto; /* Fills .layout below the banner (JGMA-84); it used to be a fixed 100vh / 100dvh of its own. */ flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: var(--bg); overflow: hidden; } /* ============================================================================ Screen 20 — Today's moves (Pages/Home.razor) ============================================================================ */ /* ---------- Header ---------- */ .m-header { background: var(--jem-charcoal); color: #fff; /* An even 10px (JGMA-9). It read `calc(env(safe-area-inset-top,0px) + 14px) 18px 14px`, which made a header now carrying four rows — title, day strip, farm, tabs — taller than the list it introduces. */ padding: 10px; /* Positioned ONLY to win the paint order against a pulled .m-list (JGMA-10). A transform creates a stacking context, so while the list is being pulled it paints in the positioned layer — above every non-positioned sibling. Unpositioned, this header would have the list slide OVER it, tabs and all. Pairs with .m-list's z-index below; .m-fab's 20 still clears both. BOTH OF THESE MAKE A SHEET RENDERED INSIDE THIS HEADER UNUSABLE, so do not put one here (JGMA-58). Positioned, it becomes the containing block, and a `.sheet`'s `bottom: 0` pins to the bottom of this 228px header rather than the screen; the stacking context then traps the sheet in the z-index-2 layer, under .m-fab's 20. The farm switcher hit both and now renders through a section outlet into .app-shell, beside the other three sheets. See FarmSelector. */ position: relative; z-index: 2; } .m-header .top { display: flex; align-items: center; gap: 5px; } .m-header .top .title { font-size: 19px; font-weight: 700; margin: 0; } /* Titles are

for semantics/FocusOnNavigate; hide the programmatic focus ring. */ h1.title:focus { outline: none; } /* The slot JGMA-12 fills with the magnifier. A FIXED 32x32, so the top row does not reflow when it arrives. IT ALSO CARRIES THE AUTO MARGIN NOW, which is what right-aligns the trailing group. That margin belongs to whichever control is FIRST in that group and has moved each time the first one changed: the Online pill, then the log-out button, then Reset — and now this, because the Reset button was removed. `.m-header .top .reset` went with it; nothing else used that class. */ .m-header .top .search-slot { width: 32px; height: 32px; flex: 0 0 32px; display: block; margin-left: auto; } /* The name-and-date line lives inside .dpick-head now and takes that row's treatment entirely. It was its own 12px flex row here, and held the reset button. */ .m-header .who { display: inline; } /* Logout button (header + wizard nav) */ .logout-btn { width: 30px; height: 30px; border-radius: 8px; flex: 0 0 30px; display: grid; place-items: center; padding: 0; color: var(--ink-4); background: transparent; border: 0; cursor: pointer; transition: background 140ms, color 140ms; -webkit-tap-highlight-color: transparent; } /* Hover AND press, the same treatment every other button in this app got — it only had :active, so on a pointer it gave no sign it was a control until you clicked it. */ @media (hover: hover) { .logout-btn:hover { background: rgba(255, 255, 255, 0.14); color: #fff; } } .logout-btn:active { background: rgba(255, 255, 255, 0.14); color: #fff; } .logout-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* Logout / delete confirmation dialog actions */ .logout-actions { display: flex; gap: 10px; margin-top: 4px; } .logout-actions button { flex: 1; border: 0; padding: 14px; border-radius: 12px; font-weight: 700; font-size: 15px; cursor: pointer; font-family: inherit; } .logout-actions .la-cancel { background: var(--jem-gainsboro-40); color: var(--ink-2); } /* Same reasoning as .sheet-actions .destructive — this is the "Delete Move?" confirm, the most destructive action in the app, so it cannot be the one button still wearing the accent colour. */ .logout-actions .la-confirm { background: var(--jem-danger); color: #fff; } /* Location bar (full-width switcher in the header / wizard) */ .m-locbar { background: var(--jem-charcoal); padding: 0 14px 12px; flex: 0 0 auto; } /* CENTRED, AND NO CARET. The name is the whole content of this control now, so it is centred across the full width of the bar rather than set left with a chevron pushed to the right margin. The caret went with it: .lb-caret is gone, and with nothing left to space away from the label the flex `gap` went too. */ .m-locbar .lb-btn { width: 100%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.1); border: 0; border-radius: 9px; padding: 9px 12px; color: #fff; cursor: pointer; font: inherit; } .m-locbar .lb-btn:active { background: rgba(255,255,255,0.2); } .m-locbar .lb-name { font-size: 13px; font-weight: 700; } /* EXACTLY ONE FARM: the same text with no button around it (§6.2 asks for static text, not a one-item dropdown), centred to match the switchable form above. 5px OF VERTICAL PADDING, which is where this stops matching .lb-btn. It was 9px 12px, so the row kept the same height whether or not this groom could switch; there is no button here for that to be the inside of, so it sits tighter — but not flush. Zero was tried and read as cramped against the day strip above and the tabs below. */ .m-locbar .lb-static { display: block; text-align: center; padding: 5px 12px; font-size: 13px; font-weight: 700; color: #fff; } /* Zero farms (§6.2) and the inline retryable failure (§8). Both stand where the selector would. */ /* Left padding only on the right, so the Retry beside it sits against the bar's own edge — the same shape as .loc-fail above. 5px vertically, matching .lb-static. */ .m-locbar .loc-none { margin: 0; padding: 5px 0 5px 12px; font-size: 13px; color: var(--ink-4); } /* THE RETRYABLE FAILURE STATE. One row: what went wrong on the left, what to do about it hard right, so the action is where the thumb already is rather than tucked under the sentence. Both take the late red — it is the same "something needs you" register as an overdue day, and it stops the row reading as ordinary header furniture. */ /* Both states put a message against a button, so both lay out the same way. */ .m-locbar:has(.loc-fail), .m-locbar:has(.loc-none-retry) { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .m-locbar .loc-fail { margin: 0; padding: 5px 0 5px 12px; font-size: 13px; font-weight: 700; color: var(--jem-late); } /* Resting state only. The hover wash is .mini-btn's and stays as it is everywhere else. */ .m-locbar .loc-retry { flex: 0 0 auto; color: var(--jem-late); border-color: var(--jem-late); } /* The zero-farm Retry keeps .mini-btn's neutral chrome. NOT .loc-retry's red: nothing has failed here — the derivation succeeded and the answer was none — and colouring it as a fault would say otherwise. */ .m-locbar .loc-none-retry { flex: 0 0 auto; } /* Inside the navy header the bar has no chrome of its own — just spacing. */ .m-header .m-locbar { background: transparent; padding: 0; margin: 8px 0 10px; } /* Location switcher sheet list */ .sheet .loc-list { display: grid; gap: 8px; margin-top: 6px; } .loc-list { display: grid; gap: 8px; } /* A BUTTON, not a div (JGMA-58). It was a div with an @onclick, which no keyboard can reach and no screen reader announces as actionable — and a :focus style was asked for, which a div cannot have without a tabindex. `font: inherit` and `width: 100%` undo what the button element brings with it. */ .loc-row { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; width: 100%; font: inherit; text-align: inherit; color: inherit; } /* The CURRENT farm, when one is shown. Section 6.3 excludes it from this list today, so nothing carries .on — this is here so the styling is right the moment that changes, and because the trailing-count rules below already depend on it. */ .loc-row.on { border-color: var(--jem-green); background: var(--jem-green); color: #fff; } .loc-row.on .loc-name { color: #fff; } /* Every other row. :focus-visible rather than :focus so a pointer tap does not leave a ring behind. */ .loc-row:not(.on):hover, .loc-row:not(.on):focus-visible { background: var(--jem-green-20); } .loc-row .loc-meta { flex: 1; min-width: 0; } /* Centred, now that the tile is gone and the name is the row's whole content. */ .loc-row .loc-name { font-weight: 700; font-size: 14px; color: var(--ink); text-align: center; } .loc-row .loc-sub { font-size: 11px; color: var(--ink-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Counts stack, to-do above overdue, right-aligned so the pills share a right edge. */ .loc-row .loc-counts { flex: 0 0 auto; display: grid; gap: 4px; justify-items: end; } .loc-row .loc-count { font-size: 11px; font-weight: 700; color: var(--jem-forest); background: var(--jem-green-20); border-radius: 999px; padding: 3px 9px; white-space: nowrap; } .loc-row.on .loc-count { background: #fff; } /* Overdue keeps its red on the selected row too — a white pill there would read as "fine". */ .loc-row .loc-count.late, .loc-row.on .loc-count.late { color: var(--jem-danger); background: var(--jem-danger-soft); } /* ---------- Tabs ---------- */ /* margin-top RESTORED, and it is NOT paid for twice. JGMA-9 removed it on the grounds that the farm bar above already carries a 10px bottom margin — but the two are adjacent siblings in a block container (.m-header is not flex), so their margins COLLAPSE to a single 10px rather than stacking. Without it the gap was right only while the farm bar rendered: Loading draws nothing at all, so the tabs sat flush against the day strip until the farm list resolved. Collapsing gives one rule that is correct in every farm state. */ .m-tabs { display: flex; background: rgba(0, 0, 0, 0.18); border-radius: 10px; padding: 4px; margin-top: 10px; } /* white-space: nowrap keeps "Requires Action" (JGMA-70) on one line. Without it the third tab wraps at 360px and stands a row taller than its two neighbours, which drags the whole strip with it. min-width: 0 lets the three share the row instead of each demanding its content width. */ .m-tabs button { flex: 1; min-width: 0; background: transparent; border: 0; padding: 9px 6px; border-radius: 7px; font-size: 14px; font-weight: 600; color: var(--ink-4); cursor: pointer; white-space: nowrap; } .m-tabs button.on { background: var(--jem-green); color: #fff; } .m-tabs button .count { background: rgba(255,255,255,0.22); padding: 1px 7px; border-radius: 999px; margin-left: 4px; font-size: 11px; } /* The Requires Action count, which is a warning rather than a tally — so it keeps its colour when the tab is NOT selected, unlike the other two. That is the point of the tab: the number has to read as something outstanding from across a yard, not as a neutral count of rows. */ .m-tabs button .count.alert { background: var(--jem-warning); color: #fff; } .m-tabs button.on .count.alert { background: rgba(255,255,255,0.28); } /* ---------- List area ---------- */ /* background, position and z-index are JGMA-10's, and all three serve the pull-to-refresh spinner that sits BEHIND this list in .ptr-anchor: opaque so the spinner does not show through the list at rest, positioned so it paints above the spinner rather than relying on source order, and below .m-header's 2 so a pulled list slides UNDER the header. overscroll-behavior-y is belt and braces — a pull that wins calls preventDefault() outright — and is `none` rather than `contain` because contain preserves this element's own bounce and only stops chaining, and there is nothing here to chain to. */ .m-list { padding: 12px; flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--bg); position: relative; z-index: 1; overscroll-behavior-y: none; /* Carries the list home after a pull, and down to the parked offset on the Retry path. swipe.js suppresses it with an inline `transition: none` while the thumb is actually dragging, so the list tracks the finger 1:1 and only ANIMATES when it is let go. */ transition: transform 240ms ease; } .m-list::-webkit-scrollbar { width: 0; } /* ---------- Pull to refresh (JGMA-10) ---------- New selectors, so this is a new section rather than an override block — nothing here shadows an existing rule. The three edits this feature DOES make to existing rules are in place, at .m-header and .m-list above, per CLAUDE.md's "edit rules in place" house rule. .ptr-anchor is zero-height and IN FLOW. In flow, because .app-shell is overflow:hidden and so is still a scroll container whose scrollHeight exceeds its height — anything positioned against the SHELL is dragged out of place when the browser scrolls it to reveal a focused control (the reason .busy-veil is fixed rather than absolute; see its block below). Zero height, because it must not change the flex column's layout: .m-list is flex:1 1 auto; overflow-y:auto only by virtue of .app-shell being that column, and boxing it in a wrapper would stop it scrolling altogether. */ .ptr-anchor { position: relative; flex: 0 0 0; height: 0; } /* Sits in the gap the pull opens, painted beneath the opaque .m-list and revealed as it translates down. The sweep is a conic gradient driven by --ptr-fill, which swipe.js writes on :root — on the document root deliberately, because Blazor's diff does not manage it and OnAfterRenderAsync re-renders this element on every pass. */ .ptr-spin { position: absolute; top: 10px; left: 50%; width: 28px; height: 28px; margin-left: -14px; border-radius: 50%; background: conic-gradient(var(--jem-green) calc(var(--ptr-fill, 0) * 360deg), transparent 0); /* Punched out to a ring rather than a filled disc. */ mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); opacity: calc(0.35 + var(--ptr-fill, 0) * 0.65); } /* The refresh itself. A FIXED arc that rotates, ignoring --ptr-fill entirely: swipe.js clears that property when the gesture ends, and on the Retry-from-the-dialog path it was never set at all, so a fill-driven sweep would render at zero for the whole refresh. */ .ptr-spin.spinning { background: conic-gradient(var(--jem-green) 0deg 90deg, transparent 90deg); opacity: 1; animation: busy-spin 700ms linear infinite; } /* C# parks the list here for the duration, which is what makes the Retry path — where no finger ever touched the screen — look identical to a pulled refresh. On the drag path swipe.js has already written the same offset inline, and inline wins, so the two agree rather than fight. */ .ptr-refreshing .m-list { transform: translateY(56px); } /* Visually hidden but ANNOUNCED. The clip-rect pattern, not display:none or visibility:hidden — neither of which is read out, which would defeat the point of the element. app.css carried no such utility before this. */ .ptr-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Same bargain the busy veil strikes: the information survives, the motion does not. The FILL still tracks the thumb, because that is the affordance telling a groom when letting go will refresh — it is information, not decoration. Only the rotation and the travel are dropped. */ @media (prefers-reduced-motion: reduce) { /* THE SHAPE CHANGES TOO, and it has to. Swapping only the rotation for a pulse — which is what .busy-spinner does — leaves a 90deg arc that neither turns nor fills, and that reads as a progress ring STUCK at a quarter rather than as work in progress. .busy-spinner survives the same swap because it sits beside a "Saving..." label; this indicator deliberately has no text, so its shape is the only thing carrying the meaning. A full ring, pulsing, says "working" without implying a position. */ .ptr-spin.spinning { background: conic-gradient(var(--jem-green) 0deg 360deg); animation: busy-pulse 1.4s ease-in-out infinite; } .m-list { transition: none; } } /* Floating action button — start a new movement */ .m-fab { position: absolute; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); z-index: 20; display: inline-flex; align-items: center; gap: 8px; background: var(--jem-pink); color: #fff; padding: 12px 18px 12px 14px; border-radius: 999px; box-shadow: 0 6px 18px color-mix(in srgb, var(--jem-pink) 45%, transparent); font-weight: 700; font-size: 14px; text-decoration: none; } .m-fab:active { filter: brightness(0.92); } .m-fab .plus { font-size: 20px; line-height: 1; } .list-hint { text-align: center; font-size: 11px; color: var(--ink-3); padding: 4px 0 12px; display: flex; align-items: center; justify-content: center; gap: 8px; } .list-hint .arrow { color: var(--jem-green); font-weight: 700; } /* ---------- Swipe row / move card ---------- */ .swipe-row { position: relative; border-radius: 14px; margin-bottom: 12px; overflow: hidden; background: var(--jem-green); touch-action: pan-y; } .swipe-row .bg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; color: #fff; font-weight: 700; font-size: 14px; } /* TWO "Confirm move" labels, one at each edge (JGMA-79): a drag in EITHER direction confirms, and swipe.js fades in whichever the drag uncovers. The background is the confirm green both ways — it is .swipe-row's own — so there is no longer a second colour for a left drag. (The amber .flagging rule and the .flag-side label went with the flag mode; nothing adds either.) */ .swipe-row .bg .confirm-side { display: flex; align-items: center; gap: 8px; } .swipe-row .bg .confirm-side.end { margin-left: auto; opacity: 0; } /* JGMA-24: a groom who may not confirm gets no swipe actions, so the row must not look as though it has any. The confirm green lives on .swipe-row ITSELF rather than on .bg, so hiding .bg alone would leave the card sliding aside over a bare green panel — the affordance minus its label. The grab cursor goes for the same reason: it advertises a gesture that is not there. `user-select: none` STAYS on .move-card — the tap path is ungated and still needs it. */ .swipe-row.no-swipe { background: transparent; } .swipe-row.no-swipe .move-card { cursor: default; } .move-card { position: relative; background: #fff; border-radius: 14px; padding: 14px 16px; box-shadow: 0 1px 3px rgba(15,23,42,0.1); will-change: transform; cursor: grab; user-select: none; } .move-card:active { cursor: grabbing; } .move-card .horse-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .move-card .type-badge { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 7px; border-radius: 999px; flex: 0 0 auto; } /* The five movement types, re-cut onto the brand palette — they were a blue, a cyan and a purple, none of which are Juddmonte colours. Each is a -20 tint behind the 100% colour, EXCEPT where that pairing fails contrast: green on green-20 and pink on pink-20 are both around 2:1 at this size, so those two take forest and charcoal instead. Distinguishability lives in the BACKGROUND — grey, teal, amber, mint, pink — which is what a groom actually scans. */ .move-card .type-badge.local { background: var(--jem-gainsboro-40); color: var(--jem-charcoal); } .move-card .type-badge.intra { background: var(--jem-forest-20); color: var(--jem-forest); } .move-card .type-badge.departure { background: var(--jem-warning-soft); color: var(--jem-warning); } .move-card .type-badge.arrival { background: var(--jem-green-20); color: var(--jem-forest); } .move-card .type-badge.bulk { background: var(--jem-pink-20); color: var(--jem-charcoal); } /* Flexes so the date + badge keep their width and a long name ellipsizes instead of shoving them. */ .move-card .horse { font-size: 16px; font-weight: 700; line-height: 1.15; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Tabular figures so the dates line up down the column. */ .move-card .move-date { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; } /* ---------- Overdue: scheduled before today ---------- The list is ordered oldest-first so these sit at the top, but the card has to SAY it is late as well — otherwise the groom is left comparing dates to work out why this one is first. Two surfaces, because the card has two: the card face and the .route row nested inside it, which carries its own grey. Tinting only the card left that inner row a cold grey island on red. The route keeps a slightly deeper tint than the card, preserving the same "inset panel" relationship the grey pair has. Text stays dark ink — the tints are light enough to read on, and recolouring the horse name would trade legibility for emphasis it does not need. */ .move-card.overdue { background: var(--jem-danger-soft); } .move-card.overdue .route { background: var(--jem-danger-soft); } .move-card.overdue .route.more { color: var(--jem-danger); } .move-card.overdue .move-date { color: var(--jem-danger); } /* The badge that SAYS it (JGMA-68). The tint above is the emphasis; this is the label, and it exists because colour alone reaches neither a screen reader nor a greyscale screen. Sized and shaped like .type-badge beside it rather than inventing a second badge language on one row — the difference is the danger palette, which is the row's one piece of new information. */ .move-card .overdue-badge { flex: 0 0 auto; font-size: 10px; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase; white-space: nowrap; padding: 3px 7px; border-radius: 999px; background: var(--jem-danger); color: #fff; } .move-card .route { margin-top: 10px; background: var(--jem-gainsboro-20); border-radius: 8px; padding: 9px 11px; font-size: 13px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .move-card .route .ep { font-weight: 600; } .move-card .route .arrow { color: var(--jem-green); font-weight: 800; } /* A batch, whose horses take different routes — the per-horse list is in the details panel. */ .move-card .route.more { color: var(--ink-3); font-weight: 600; } /* ---------- Done card ---------- */ .done-card { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--jem-green); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; display: flex; align-items: center; gap: 12px; animation: dropIn 280ms ease; } @keyframes dropIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } .done-card .check { width: 30px; height: 30px; border-radius: 50%; background: var(--jem-green); color: #fff; display: grid; place-items: center; flex: 0 0 30px; } /* The middle column has to be allowed to shrink, or a long route pushes the time off the card. */ .done-card .dc-meta { flex: 1 1 auto; min-width: 0; } .done-card .horse { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Now carries the same route row the to-do cards do (Components/MoveRoute.razor), so it needs that row's parts — the arrow and the two endpoints — at this card's smaller scale. */ .done-card .meta { font-size: 11px; color: var(--ink-3); margin-top: 1px; display: flex; align-items: center; gap: 5px; min-width: 0; } .done-card .meta .ep { font-weight: 600; color: var(--ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .done-card .meta .arrow { color: var(--jem-green); font-weight: 800; flex: 0 0 auto; } .done-card .time { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); } /* Tappable — it opens the detail panel, same as a to-do card. */ .done-card { cursor: pointer; -webkit-tap-highlight-color: transparent; } @media (hover: hover) { .done-card:hover { background: var(--jem-gainsboro-20); } } .done-card:active { background: var(--jem-gainsboro-40); } .done-card.flagged { border-left-color: var(--jem-warning); } .done-card.flagged .check { background: var(--jem-warning); } /* Requires Action (JGMA-70) borrows the flagged card's amber, deliberately rather than inventing a third colour. Both say the same thing to a groom — this one is not finished — and the two can never appear in the same list, because a flagged movement writes no ledger row and so can never qualify for Requires Action (JGMA-68 AC 4). A distinct colour would be a distinction without a difference, on a screen whose whole palette is three colours. */ .done-card.needs-place { border-left-color: var(--jem-warning); } .done-card.needs-place .check { background: var(--jem-warning); } .empty-state { text-align: center; padding: 50px 24px; color: var(--ink-3); } .empty-state .ico { font-size: 40px; opacity: 0.4; margin-bottom: 10px; line-height: 0; } .empty-state .big { font-size: 15px; font-weight: 600; color: var(--ink-2); } /* ---------- Bottom sheets (shared base) ---------- */ .sheet-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,0.5); z-index: 30; opacity: 0; pointer-events: none; transition: opacity 200ms; } .sheet-backdrop.show { opacity: 1; pointer-events: auto; } .sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 31; background: #fff; border-radius: 18px 18px 0 0; padding: 12px 16px 22px; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 22px); /* VISIBILITY IS LOAD-BEARING, NOT DECORATION (JGMA-26). A transform MOVES an element; it removes it from neither the accessibility tree nor the tab order. Every .sheet is rendered unconditionally, so on the transform alone a screen reader read out the notes box, the date field and Cancel / Save of sheets nobody had opened, and Tab walked into them. `visibility 0s linear 260ms` delays the flip to hidden until the slide has finished — without the delay the sheet VANISHES instead of sliding away. Opening carries no delay (see .show). NOT display:none: swipe.attachDragDismiss measures panel.offsetHeight to size a dismiss drag, which reads 0 under display:none and breaks swipe-down-to-dismiss on every sheet. visibility preserves layout, so the measurement stays correct. Asserted by SheetVisibilityTests. .detail-modal, .cal-sheet and the wizard's .alert-backdrop carry the same technique at their OWN durations (JGMA-46) — see each rule. */ transform: translateY(100%); visibility: hidden; transition: transform 260ms cubic-bezier(.2,.9,.3,1.2), visibility 0s linear 260ms; /* Reserve vertical drags for swipe-down-to-dismiss (from anywhere on the sheet). */ touch-action: pinch-zoom; } /* The transition is RESTATED here, not duplicated by accident: this rule declared none of its own, so it would otherwise inherit the delayed one above and the sheet would POP IN at the end of the slide instead of sliding in. SheetVisibilityTests asserts it for that reason. */ .sheet.show { transform: translateY(0); visibility: visible; transition: transform 260ms cubic-bezier(.2,.9,.3,1.2), visibility 0s; } .sheet .grab-zone { padding: 4px 0 10px; cursor: grab; touch-action: none; } .sheet .grab-zone:active { cursor: grabbing; } .sheet .grab { width: 38px; height: 4px; background: var(--line-2); border-radius: 4px; margin: 0 auto; } .sheet h3 { margin: 0 0 10px; font-size: 16px; font-weight: 700; text-align: center; } .sheet .sub { font-size: 12px; color: var(--ink-3); margin-bottom: 12px; } /* Confirm sheet body. The photo placeholder's rules went with it (JGMA-79): the box sat inside the deleted flag mode, and attachments are JGMA-80's. */ .sheet textarea { width: 100%; border: 1px solid var(--line-2); border-radius: 10px; padding: 11px; font: inherit; font-size: 16px; min-height: 80px; resize: none; outline: none; background: #fff; color: var(--ink); } .sheet .field { margin-bottom: 12px; } .sheet .field label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; } .sheet .actions { display: flex; gap: 10px; margin-top: 14px; } .sheet .actions button { flex: 1; border: 0; padding: 14px; border-radius: 12px; font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit; } .sheet .actions .cancel { background: var(--jem-gainsboro-40); color: var(--ink-2); } .sheet .actions .save { background: var(--jem-warning); color: #fff; } .sheet .actions .save.confirm { background: var(--jem-green); } /* Delete-move confirm must sit ABOVE the detail modal it is launched from. */ #del-backdrop { z-index: 70; } #del-sheet { z-index: 71; } /* The small outlined controls in the header — Today and Retry. RENAMED FROM a Reset-specific name: it started life on the "Reset demo" button alone, but Today and Retry are ordinary parts of the app and will outlive the demo data entirely. A class named after the one control that is going away is a class that has to be renamed later anyway. THAT RENAME PAID OFF: the Reset button has since been removed and this class did not have to move with it. Today and Retry are its only wearers now. --ink-3 rather than --ink-2 (JGMA-9): against the charcoal header the darker border read as no border at all, so the control did not look like one until you hovered it. Hover goes to #fff with the label, so the whole button brightens together instead of the text alone. font-weight and letter-spacing belong HERE rather than in a second rule further down: there used to be a stray `.mini-btn { font-weight: 700 }` a thousand lines away, left by the append-only habit this file has since dropped. */ .mini-btn { background: transparent; border: 1px solid var(--ink-3); color: var(--ink-4); border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: 1px; padding: 3px 7px; cursor: pointer; } .mini-btn:hover { color: #fff; border-color: #fff; } /* ---------- Move detail modal (mirrors S10 detail card) ---------- */ .detail-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,0.5); z-index: 40; opacity: 0; pointer-events: none; transition: opacity 200ms; } .detail-backdrop.show { opacity: 1; pointer-events: auto; } .detail-modal { position: absolute; left: 0; right: 0; bottom: 0; z-index: 41; max-height: calc(100% - 56px); background: #fff; border-radius: 18px 18px 0 0; overflow: hidden; display: flex; flex-direction: column; /* Hidden from assistive technology and the tab order while closed, as .sheet is (JGMA-46): a transform alone left every closed detail panel readable and tabbable. The visibility flip waits out THIS rule's 300ms slide, not .sheet's 260ms, or the panel vanishes before it has slid away. */ transform: translateY(100%); visibility: hidden; transition: transform 300ms cubic-bezier(.2,.9,.3,1.1), visibility 0s linear 300ms; } /* Restated, not duplicated: without its own undelayed transition this rule inherits the delayed one above and the panel POPS IN at the end of its slide. SheetVisibilityTests asserts both. */ .detail-modal.show { transform: translateY(0); visibility: visible; transition: transform 300ms cubic-bezier(.2,.9,.3,1.1), visibility 0s; } .detail-modal > header { padding: 10px 16px 14px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg,var(--jem-gainsboro-20),#fff); display: flex; align-items: center; gap: 10px; flex: 0 0 auto; touch-action: pinch-zoom; } .detail-modal > header h3 { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.25; } .detail-modal .dm-grab-zone { flex: 0 0 auto; padding: 10px 0 4px; cursor: grab; touch-action: none; } .detail-modal .dm-grab-zone:active { cursor: grabbing; } .detail-modal .grab { width: 38px; height: 4px; background: var(--line-2); border-radius: 4px; margin: 0 auto; } .detail-body { flex: 1 1 auto; overflow-y: auto; padding-bottom: calc(env(safe-area-inset-bottom, 0px)); } .detail-body::-webkit-scrollbar { width: 0; } .status { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; flex: 0 0 auto; } .status.scheduled { background: var(--jem-gainsboro-40); color: var(--jem-charcoal); } .status.transit { background: var(--jem-warning-soft); color: var(--jem-warning); } .status.arrived { background: var(--jem-green-20); color: var(--jem-forest); } .detail-body .section { padding: 14px 16px; border-bottom: 1px solid var(--line); } .detail-body .section h4 { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; color: var(--ink-3); letter-spacing: 0.5px; font-weight: 700; } .detail-body .kv { display: grid; grid-template-columns: 96px 1fr; gap: 6px 12px; font-size: 12px; } .detail-body .kv .k { color: var(--ink-3); } .detail-body .kv .v { color: var(--ink); font-weight: 500; } /* "by" is a connector, not data — dropping the value weight is enough to sit it back; it keeps the row.s colour so the attribution reads as one phrase with the name it introduces. */ .detail-body .kv .v .by { font-weight: 400; } /* Overdue: the DATE only. The label stays muted grey — "Scheduled" is not the thing that is late — and the class sits on a span around the date rather than the whole value, so the "by " after it is not reddened along with it. */ .detail-body .kv .v .overdue { color: var(--jem-danger); font-weight: 700; } /* "Moves" — the per-horse routes. Same two-column shape as .kv above, but the name column is `max-content`: it grows to the LONGEST name in this move and no further, so every route starts at the same x without a fixed width that would either truncate names or waste the row. The value column is minmax(0, 1fr) so a three-part route wraps inside the panel rather than widening it. */ .detail-body .kv.routes { grid-template-columns: max-content minmax(0, 1fr); gap: 7px 14px; } .detail-body .kv.routes .k { white-space: nowrap; } .detail-body .kv.routes .v { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .detail-body .kv.routes .ep { font-weight: 600; } .detail-body .kv.routes .arrow { color: var(--jem-green); font-weight: 800; } /* The two notes, read-only (JGMA-79). A note is free text a person typed, so its own line breaks are kept (pre-line) — D3's prefill joins several notes one per line, and flattening them would run two people's words together. Under Moves, a horse's own note takes a full line beneath its route. */ .detail-body .kv .v.note { white-space: pre-line; overflow-wrap: anywhere; } .detail-body .kv.routes .horse-note { flex-basis: 100%; font-size: 12px; color: var(--ink-2); font-weight: 400; white-space: pre-line; overflow-wrap: anywhere; } .detail-body .kv.routes .horse-note .hn-k { color: var(--ink-3); margin-right: 4px; } /* Detail-modal action row (Edit / Delete move) */ .detail-body .action-row { display: flex; gap: 8px; flex-wrap: wrap; } /* inline-flex + gap so the leading icon sits on the label's optical centre. */ .detail-body .action-row .act { border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); border-radius: 9px; padding: 9px 13px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 7px; } .detail-body .action-row .act svg { flex: 0 0 auto; } .detail-body .action-row .act:active { background: var(--jem-gainsboro-40); } .detail-body .action-row .act.danger { border-color: var(--jem-danger-soft); background: var(--jem-danger); color: #fff; } /* ============================================================================ Calendar overlay (Components/CalendarSheet.razor) — shared by screen 20's confirm/flag sheet and the 20c wizard's "When?" step. Sits above the sheets. ============================================================================ */ .cal-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,0.5); z-index: 55; opacity: 0; pointer-events: none; transition: opacity 200ms; } .cal-backdrop.show { opacity: 1; pointer-events: auto; } .cal-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 56; background: #fff; border-radius: 18px 18px 0 0; padding: 5px 16px 22px; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 22px); /* Hidden while closed, as .sheet is (JGMA-46). One pair covers all three calendars — hdr-cal-sheet, confirm-cal-sheet and the wizard's — since each renders through CalendarSheet; before this a closed one left a whole month of day buttons in the accessibility tree and the tab order, on every step of the wizard. Its own 300ms curve, which differs from .detail-modal's in the last term. */ transform: translateY(100%); visibility: hidden; transition: transform 300ms cubic-bezier(.2,.9,.3,1), visibility 0s linear 300ms; } .cal-sheet.show { transform: translateY(0); visibility: visible; transition: transform 300ms cubic-bezier(.2,.9,.3,1), visibility 0s; } .cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .cal-head .cal-title { font-size: 15px; font-weight: 800; color: var(--ink); } .cal-nav { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); font-size: 16px; cursor: pointer; display: grid; place-items: center; } .cal-nav:disabled { opacity: 0.35; cursor: not-allowed; } .cal-dow { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; margin-bottom: 4px; } .cal-dow span { text-align: center; font-size: 10px; font-weight: 700; color: var(--ink-4); text-transform: uppercase; } .cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; } .cal-day { aspect-ratio: 1; border: 0; background: transparent; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; display: grid; place-items: center; font-family: inherit; } .cal-day:hover:not(:disabled) { background: var(--jem-green-20); } .cal-day.empty { visibility: hidden; } .cal-day:disabled { color: var(--line-2); cursor: not-allowed; } .cal-day.sel { background: var(--jem-green); color: #fff; } /* Quick-date grid + "other date" button (wizard step 3 + screen 20 sheet) */ .quick-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 14px; } .quick-btn { border: 1px solid var(--line-2); background: #fff; border-radius: 12px; padding: 16px 10px; font-size: 14px; font-weight: 700; color: var(--ink-2); cursor: pointer; text-align: center; display: flex; flex-direction: column; gap: 4px; align-items: center; font-family: inherit; } .quick-btn .qb-sub { font-size: 11px; font-weight: 500; color: var(--ink-3); } .quick-btn:active { background: var(--jem-gainsboro-20); } .quick-btn.on { border-color: var(--jem-green); background: var(--jem-green-20); color: var(--jem-forest); } .quick-btn.on .qb-sub { color: var(--jem-forest); } .other-btn { width: 100%; border: 1px solid var(--line-2); background: #fff; border-radius: 12px; padding: 16px; font-size: 14px; font-weight: 700; color: var(--ink-2); cursor: pointer; display: flex; align-items: center; gap: 10px; font-family: inherit; } .other-btn .ob-meta { text-align: left; flex: 1; } .other-btn.on { border-color: var(--jem-green); background: var(--jem-green-20); color: var(--jem-forest); } .other-btn .ob-cal { margin-left: auto; color: var(--ink-3); display: flex; } .other-btn.on .ob-cal { color: var(--jem-forest); } /* Screen 20's confirm/flag sheet uses a slightly tighter date button than the wizard. */ .sheet .other-btn { padding: 14px; } /* ============================================================================ Screen 20c — New Movement wizard (Pages/NewMovement.razor) A linear 4-step flow: Move what? → To where? → When? → Review. ============================================================================ */ /* Nav header */ /* --top-inset is 0 only under the environment banner, which takes the inset instead (JGMA-84). */ .m-nav { background: var(--jem-charcoal); color: #fff; padding: calc(var(--top-inset, env(safe-area-inset-top, 0px)) + 10px) 12px 12px; display: flex; align-items: center; gap: 5px; flex: 0 0 auto; } /* align-items: baseline (not the grid `place-items: center` it had) — the ‹ glyph carries a lot of empty space below its baseline, so centring the box left it sitting visibly high of the title. */ .m-nav .back { width: 34px; height: 34px; border-radius: 8px; flex: 0 0 34px; display: grid; align-items: center; justify-items: center; color: #fff; background: transparent; border: 0; font-size: 24px; line-height: 1; cursor: pointer; } .m-nav .back:active { background: rgba(255, 255, 255, 0.14); } .m-nav .title { font-size: 19px; font-weight: 700; margin: 0; } .m-nav .logout-btn { margin-left: auto; } /* Stepper */ .stepper { flex: 0 0 auto; background: var(--jem-charcoal); padding: 0 14px 14px; display: flex; align-items: flex-start; } .stepper .seg { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; } .stepper .seg .track { position: absolute; top: 13px; height: 2px; background: var(--jem-charcoal-80); left: -50%; right: 50%; z-index: 0; } .stepper .seg:first-child .track { display: none; } .stepper .seg.done .track, .stepper .seg.current .track { background: var(--jem-green); } .stepper .dot { width: 26px; height: 26px; border-radius: 50%; z-index: 1; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--jem-charcoal-80); color: var(--ink-4); border: 0; font-family: var(--font-mono); } .stepper .seg.done .dot { background: var(--jem-green); color: #fff; } .stepper .seg.done { cursor: pointer; } .stepper .seg.current .dot { background: #fff; color: var(--jem-charcoal); box-shadow: 0 0 0 3px rgba(255,255,255,0.22); } .stepper .lbl { font-size: 9px; color: var(--ink-3); margin-top: 5px; text-align: center; line-height: 1.1; text-transform: uppercase; letter-spacing: 0.3px; font-weight: 600; } .stepper .seg.current .lbl { color: #fff; } .stepper .seg.done .lbl { color: var(--ink-4); } /* Step area */ .m-form { flex: 1 1 auto; overflow-y: auto; padding: 16px 14px 22px; background: var(--bg); } .m-form::-webkit-scrollbar { width: 0; } .step-panel { display: none; } .step-panel.on { display: block; animation: stepIn 220ms ease; } @keyframes stepIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } } .step-h { margin: 0 0 4px; font-size: 20px; font-weight: 700; color: var(--ink); } .step-lead { font-size: 12px; color: var(--ink-3); margin-bottom: 14px; } .view { display: none; } .view.on { display: block; } /* Search input */ .search-input { position: relative; margin-bottom: 12px; } .search-input input { width: 100%; border: 1px solid var(--line-2); border-radius: 10px; padding: 11px 11px 11px 34px; font: inherit; font-size: 16px; outline: none; color: var(--ink); background: #fff; } .search-input input:focus { border-color: var(--jem-info); box-shadow: 0 0 0 3px color-mix(in srgb, var(--jem-info) 18%, transparent); } .search-input .mag { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-3); display: flex; } /* Result rows (horses / paddocks / yards) */ .res-row { border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 10px 11px; display: flex; gap: 11px; cursor: pointer; align-items: center; margin-bottom: 8px; } .res-row:active { background: var(--jem-gainsboro-20); } .res-row.disabled { cursor: default; opacity: 0.5; background: var(--jem-gainsboro-20); } .res-row.disabled:active { background: var(--jem-gainsboro-20); } .res-row.picked { cursor: default; background: var(--jem-green-20); border-color: var(--jem-green); } .res-row.picked:active { background: var(--jem-green-20); } .res-row .r-added { font-size: 11px; font-weight: 800; color: var(--jem-forest); flex: 0 0 auto; letter-spacing: 0.3px; display: flex; align-items: center; gap: 3px; } .res-row .r-ic { width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-weight: 800; flex: 0 0 38px; font-size: 14px; } .res-row.horse .r-ic { background: linear-gradient(135deg,var(--jem-green-40),var(--jem-green)); } .res-row.foal .r-ic { background: linear-gradient(135deg,var(--jem-pink-20),var(--jem-pink)); } /* Icons, not emoji — Material Symbols inlined by Components/Icon.razor. They inherit the tile's colour, so white on the gradient, matching the white initials on the horse tiles beside them. */ .res-row.loc .r-ic { background: linear-gradient(135deg, var(--jem-forest-40), var(--jem-forest)); } .res-row.loc .r-ic.outside { background: linear-gradient(135deg,var(--jem-warning-soft),var(--jem-warning)); } .res-row .r-meta { min-width: 0; flex: 1; } .res-row .r-name { font-size: 13px; font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: 6px; } .res-row .r-dis { font-size: 11px; color: var(--ink-3); margin-top: 2px; line-height: 1.35; } .res-row .r-loc { font-size: 10.5px; color: var(--jem-forest); font-weight: 600; margin-top: 2px; display: flex; align-items: center; gap: 3px; } .res-row .r-loc .icon { flex: 0 0 auto; margin-left: -1px; } .res-row .chev { color: var(--line-2); font-size: 20px; flex: 0 0 auto; } .r-tag { font-size: 9px; font-weight: 800; color: var(--ink-3); background: var(--jem-gainsboro-40); border-radius: 5px; padding: 2px 6px; letter-spacing: 0.3px; text-transform: uppercase; flex: 0 0 auto; } .r-tag.foal { background: var(--jem-pink-20); color: var(--jem-charcoal); } .r-tag.kind { background: var(--jem-gainsboro-40); color: var(--jem-charcoal); } .loading { text-align: center; padding: 30px 20px; color: var(--ink-3); font-size: 13px; } /* Selections list */ .count-lead { font-size: 11px; color: var(--ink-3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; } .sel-list { display: grid; gap: 10px; margin-bottom: 14px; } /* The row itself is INERT — removing is the ✕'s job. The whole row used to carry the remove handler with the ✕ as decoration, so a tap on the name or the location opened the remove sheet. */ .sel-row { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; display: flex; align-items: center; gap: 11px; } .sel-row .s-ic { width: 38px; height: 38px; border-radius: 8px; background: linear-gradient(135deg,var(--jem-green-40),var(--jem-green)); display: grid; place-items: center; color: #fff; font-weight: 800; flex: 0 0 38px; font-size: 14px; } .sel-row.foal .s-ic { background: linear-gradient(135deg,var(--jem-pink-20),var(--jem-pink)); } .sel-row .s-meta { min-width: 0; flex: 1; } .sel-row .s-name { font-size: 13px; font-weight: 800; color: var(--ink); letter-spacing: 0.2px; display: flex; align-items: center; gap: 6px; } .sel-row .s-dis { font-size: 11px; color: var(--ink-3); margin-top: 2px; } /* A real button: 40px of hitbox (negative margin borrows the row's own padding rather than growing the row), an outlined circle so it reads as pressable, and a red hover/press state so what it does is legible before it is tapped. */ .sel-row .s-x { flex: 0 0 40px; width: 40px; height: 40px; margin: -4px -6px -4px 0; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 9px; background: #fff; color: var(--ink-3); font-size: 15px; line-height: 1; font-family: inherit; cursor: pointer; transition: background 140ms, color 140ms, border-color 140ms, transform 100ms; -webkit-tap-highlight-color: transparent; } @media (hover: hover) { .sel-row .s-x:hover { background: var(--jem-danger-soft); border-color: var(--jem-danger); color: var(--jem-danger); } } .sel-row .s-x:active { background: var(--jem-danger-soft); border-color: var(--jem-danger); color: var(--jem-danger); transform: scale(0.9); } .sel-row .s-x:focus-visible { outline: 2px solid var(--jem-danger); outline-offset: 2px; } .add-btn { width: 100%; border: 2px dashed var(--line-2); background: #fff; color: var(--jem-forest); border-radius: 12px; padding: 14px; font-size: 14px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; } .add-btn:active { background: var(--jem-green-20); border-color: var(--jem-green); } /* Movement details' note box (JGMA-79) — the confirm sheet's textarea, on a screen that is not a sheet. */ .m-body .md-note { width: 100%; border: 1px solid var(--line-2); border-radius: 10px; padding: 11px; font: inherit; font-size: 16px; min-height: 80px; resize: vertical; outline: none; background: #fff; color: var(--ink); } .m-body .md-note:focus-visible { border-color: var(--jem-green); } /* Destination chosen card (light — matches the origin card, not dark) */ .chosen-card { background: var(--jem-gainsboro-20); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; padding: 8px 11px; display: flex; align-items: center; gap: 12px; cursor: pointer; } .chosen-card:active { background: var(--jem-gainsboro-40); } .chosen-card .cc-meta { flex: 1; min-width: 0; } .chosen-card .cc-lbl { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.6px; font-weight: 800; } .chosen-card .cc-name { font-size: 15px; font-weight: 800; color: var(--ink); } .chosen-card .cc-hint { font-size: 11px; color: var(--ink-3); } /* Read-only origin card (Step 2) — compact: label + farm name only (light/outlined) */ .origin-card { display: flex; align-items: center; gap: 12px; background: var(--jem-gainsboro-20); border: 1px solid var(--line); border-radius: 14px; padding: 8px 11px; margin-bottom: 10px; } .origin-card .oc-meta { flex: 1; min-width: 0; } .origin-card .oc-lbl { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.6px; font-weight: 800; } .origin-card .oc-name { font-size: 15px; font-weight: 800; color: var(--ink); } /* --------------------------------------------------------------------------- Per-horse destination — Paddock / Yard / Box (Step 2 on 20c, the roster on 20d; markup in Components/HorseSpotPicker.razor). This replaced a recursive destination TREE, which put paddocks and yards in a parent/child relationship they do not have and could express only one of the two at a time. Three INDEPENDENT selects stacked one per line, each with its own label and its own "All" button. Stacked rather than side by side because the app column is a phone: three dropdowns across ~330px leaves each too narrow to read a paddock name in. Native