/* ===================================================================== mobile-kit.css — Repark MOBILE COMPONENT KIT (Phase 1). A reusable, presentation-only component system for the <=1180px app, built to a Finimize / ElevenReader polish bar with Linnworks-style functional patterns. LIGHT + DARK, one brand-blue accent, soft cards, glance-first density, NO horizontal scroll. STATUS: kit only. In Phase 1 this file is loaded ONLY by the standalone demo page (mobile-kit-demo.html). It is NOT linked into index.html, so the real app — desktop AND mobile — is completely unchanged. Every class is namespaced `rk-` and is unused by any real screen until Phase 2 rollout. THEME: tokens switch on [data-theme="dark"] (the same attribute the app's existing toggle sets on ). Using the attribute (not only `html[...]`) lets a single subtree render dark — so the demo can show light & dark side-by-side, and the real toggle still drives it app-wide in Phase 2. ===================================================================== */ /* --------------------------------------------------------------------- TOKENS — LIGHT (default) --------------------------------------------------------------------- */ :root{ /* spacing — 8px grid (+4px micro-step) */ --rk-s1:4px; --rk-s2:8px; --rk-s3:12px; --rk-s4:16px; --rk-s5:20px; --rk-s6:24px; --rk-s8:32px; --rk-s10:40px; /* type — fluid: big bold headings -> small tracked labels */ --rk-fs-display:clamp(24px, 6.2vw, 32px); --rk-fs-h1:clamp(20px, 5vw, 26px); --rk-fs-h2:clamp(17px, 4.2vw, 20px); --rk-fs-title:clamp(15px, 3.9vw, 17px); --rk-fs-body:clamp(14px, 3.6vw, 15px); --rk-fs-label:clamp(11px, 2.9vw, 12px); /* radius */ --rk-r-sm:10px; --rk-r:14px; --rk-r-lg:20px; --rk-r-pill:999px; /* motion — aliases onto motion.css (single source of truth). Names kept because ~12 rules in this kit still reference them. */ --rk-t-tap:var(--t-fast); --rk-t-ui:var(--t-base); --rk-ease:var(--e-out); /* surfaces — near-neutral, never pure #fff base */ --rk-bg:#eef3f9; --rk-surface:#ffffff; --rk-surface-2:#eef3f9; --rk-inset:#f4f7fb; --rk-line:#e3eaf2; --rk-border:#d6e0ec; /* ink */ --rk-ink:#0f1c2e; --rk-ink-2:#42526b; --rk-muted:#6b7a90; /* one brand-blue accent */ --rk-accent:#0369a1; --rk-accent-2:#075985; --rk-accent-ink:#ffffff; --rk-accent-weak:#e7f2fb; --rk-accent-weak-ink:#075985; /* status — red / amber / green / blue */ --rk-ok:#15803d; --rk-ok-weak:#e6f6ec; --rk-warn:#b45309; --rk-warn-weak:#fbeede; --rk-bad:#b91c1c; --rk-bad-weak:#fbe9e9; --rk-info:#0369a1; --rk-info-weak:#e7f2fb; /* elevation — soft, single source (hairline OR shadow, not both heavy) */ --rk-shadow:0 1px 2px rgba(16,32,52,.05), 0 8px 20px rgba(16,32,52,.06); --rk-shadow-lg:0 16px 38px rgba(16,32,52,.16); --rk-fab-shadow:0 10px 24px rgba(3,105,161,.40); } /* --------------------------------------------------------------------- TOKENS — DARK (true dark, never pure #000; reuses the app's dark palette) --------------------------------------------------------------------- */ [data-theme="dark"]{ --rk-bg:#0b1220; --rk-surface:#162133; --rk-surface-2:#1d2941; --rk-inset:#111a2b; --rk-line:#243049; --rk-border:#2a3650; --rk-ink:#e6edf6; --rk-ink-2:#c2cede; --rk-muted:#9fb0c4; --rk-accent:#38a3e0; /* lifted blue for contrast on dark */ --rk-accent-2:#7cc4f2; --rk-accent-ink:#06121f; --rk-accent-weak:#102a40; --rk-accent-weak-ink:#bae6fd; --rk-ok:#4ade80; --rk-ok-weak:#0f2e22; --rk-warn:#fbbf24; --rk-warn-weak:#33240a; --rk-bad:#f87171; --rk-bad-weak:#3a1a1d; --rk-info:#7cc4f2; --rk-info-weak:#102a40; --rk-shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 26px rgba(0,0,0,.45); --rk-shadow-lg:0 18px 40px rgba(0,0,0,.6); --rk-fab-shadow:0 10px 26px rgba(0,0,0,.55); } /* ===================================================================== BASE / TYPOGRAPHY ===================================================================== */ .rk{ background:var(--rk-bg); color:var(--rk-ink); font:400 var(--rk-fs-body)/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; -webkit-font-smoothing:antialiased; } .rk *{ box-sizing:border-box; } .rk-eyebrow{ font-size:var(--rk-fs-label); font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--rk-accent-weak-ink); } .rk-display{ font-size:var(--rk-fs-display); font-weight:800; letter-spacing:-.02em; line-height:1.12; color:var(--rk-ink); margin:0; } .rk-h1{ font-size:var(--rk-fs-h1); font-weight:800; letter-spacing:-.01em; line-height:1.2; color:var(--rk-ink); margin:0; } .rk-h2{ font-size:var(--rk-fs-h2); font-weight:700; line-height:1.25; color:var(--rk-ink); margin:0; } .rk-sub{ font-size:var(--rk-fs-body); color:var(--rk-muted); margin:0; } .rk-label{ font-size:var(--rk-fs-label); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--rk-muted); } /* ===================================================================== (a) LIST CARD — title + 3–5 glance fields + status pill + thumb/count ===================================================================== */ .rk-card{ background:var(--rk-surface); border:1px solid var(--rk-line); border-radius:var(--rk-r); box-shadow:var(--rk-shadow); padding:var(--rk-s4); display:flex; flex-direction:column; gap:var(--rk-s3); } .rk-card + .rk-card{ margin-top:var(--rk-s3); } .rk-card:active{ transform:translateY(1px); transition:transform var(--rk-t-tap) var(--rk-ease); } .rk-card-head{ display:flex; align-items:flex-start; gap:var(--rk-s3); } .rk-thumb{ width:46px; height:46px; flex:0 0 auto; border-radius:12px; background:var(--rk-inset); border:1px solid var(--rk-line); display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--rk-accent); font-size:16px; overflow:hidden; } .rk-thumb img{ width:100%; height:100%; object-fit:cover; } .rk-card-head .rk-titles{ min-width:0; flex:1 1 auto; } .rk-card-title{ font-size:var(--rk-fs-title); font-weight:700; color:var(--rk-ink); line-height:1.25; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .rk-card-meta{ font-size:var(--rk-fs-label); color:var(--rk-muted); margin-top:2px; } .rk-card-head .rk-pill, .rk-card-head .rk-count{ flex:0 0 auto; margin-left:auto; } /* glance fields: 2-up label/value grid, generous, never sideways */ .rk-fields{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--rk-s3) var(--rk-s4); } .rk-field{ display:flex; flex-direction:column; gap:2px; min-width:0; } .rk-field.wide{ grid-column:1 / -1; } .rk-field .k{ font-size:var(--rk-fs-label); font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--rk-muted); } .rk-field .v{ font-size:var(--rk-fs-body); font-weight:600; color:var(--rk-ink); overflow-wrap:anywhere; } .rk-card-actions{ display:flex; gap:var(--rk-s2); flex-wrap:wrap; } .rk-card-actions .rk-btn{ flex:1 1 auto; } /* trailing glance number (e.g. Stock Move qty) + location-flow chips (mirrors the Linnworks "Stock Move" card: P1-TH-9 -> P2, qty on the right) */ .rk-card-head .rk-num{ margin-left:auto; flex:0 0 auto; align-self:center; font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--rk-ink); } .rk-flow{ display:flex; align-items:center; gap:var(--rk-s2); flex-wrap:wrap; } .rk-loc{ padding:5px 12px; border-radius:var(--rk-r-pill); font-size:var(--rk-fs-label); font-weight:800; white-space:nowrap; background:var(--rk-ok-weak); color:var(--rk-ok); } .rk-loc.to{ background:var(--rk-warn-weak); color:var(--rk-warn); } .rk-loc.neutral{ background:var(--rk-surface-2); color:var(--rk-ink-2); } .rk-flow .arr{ color:var(--rk-muted); font-size:16px; line-height:1; } /* status pill + count badge */ .rk-pill{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:var(--rk-r-pill); font-size:var(--rk-fs-label); font-weight:800; line-height:1; white-space:nowrap; } .rk-pill::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; } .rk-pill.ok{ background:var(--rk-ok-weak); color:var(--rk-ok); } .rk-pill.warn{ background:var(--rk-warn-weak); color:var(--rk-warn); } .rk-pill.bad{ background:var(--rk-bad-weak); color:var(--rk-bad); } .rk-pill.info{ background:var(--rk-info-weak); color:var(--rk-info); } .rk-pill.neutral{ background:var(--rk-surface-2); color:var(--rk-ink-2); } .rk-pill.neutral::before{ opacity:.5; } .rk-count{ min-width:24px; height:24px; padding:0 8px; border-radius:var(--rk-r-pill); background:var(--rk-accent-weak); color:var(--rk-accent-weak-ink); font-size:12px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; } /* ===================================================================== (b) ACCORDION — collapsed by default; tap to reveal the rest ===================================================================== */ .rk-acc{ background:var(--rk-surface); border:1px solid var(--rk-line); border-radius:var(--rk-r); overflow:hidden; box-shadow:var(--rk-shadow); } .rk-acc + .rk-acc{ margin-top:var(--rk-s2); } .rk-acc-sum{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:var(--rk-s3); padding:var(--rk-s4); min-height:54px; font-size:var(--rk-fs-title); font-weight:700; color:var(--rk-ink); } .rk-acc-sum::-webkit-details-marker{ display:none; } .rk-acc-sum .rk-acc-ico{ width:34px; height:34px; flex:0 0 auto; border-radius:10px; background:var(--rk-accent-weak); color:var(--rk-accent-weak-ink); display:flex; align-items:center; justify-content:center; font-size:16px; } .rk-acc-sum .rk-chev{ margin-left:auto; color:var(--rk-muted); flex:0 0 auto; transition:transform var(--rk-t-ui) var(--rk-ease); } .rk-acc[open] > .rk-acc-sum .rk-chev{ transform:rotate(180deg); } .rk-acc-sum:active{ background:var(--rk-surface-2); } .rk-acc-body{ padding:0 var(--rk-s4) var(--rk-s4); display:flex; flex-direction:column; gap:var(--rk-s3); } .rk-acc-body .rk-fields{ padding-top:var(--rk-s1); } /* ===================================================================== (c) GROUPED FORM — labelled groups + single prominent bottom Save ===================================================================== */ .rk-form{ display:flex; flex-direction:column; gap:var(--rk-s4); } .rk-group{ background:var(--rk-surface); border:1px solid var(--rk-line); border-radius:var(--rk-r); box-shadow:var(--rk-shadow); padding:var(--rk-s4); display:flex; flex-direction:column; gap:var(--rk-s4); } .rk-group > .rk-label{ margin-bottom:calc(-1 * var(--rk-s2)); } .rk-input-row{ display:flex; flex-direction:column; gap:6px; } .rk-input-row > label{ font-size:var(--rk-fs-label); font-weight:700; color:var(--rk-ink-2); } .rk-input{ width:100%; min-height:48px; font-size:16px; /* >=16px: no iOS zoom */ padding:0 14px; border-radius:var(--rk-r-sm); border:1px solid var(--rk-border); background:var(--rk-surface); color:var(--rk-ink); transition:border-color var(--rk-t-tap) var(--rk-ease), box-shadow var(--rk-t-tap) var(--rk-ease); } textarea.rk-input{ min-height:96px; padding:12px 14px; resize:vertical; line-height:1.5; } select.rk-input{ appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--rk-muted) 50%),linear-gradient(135deg,var(--rk-muted) 50%,transparent 50%); background-position:calc(100% - 18px) 20px, calc(100% - 12px) 20px; background-size:6px 6px,6px 6px; background-repeat:no-repeat; padding-right:38px; } .rk-input:focus{ outline:none; border-color:var(--rk-accent); box-shadow:0 0 0 3px var(--rk-accent-weak); } .rk-input::placeholder{ color:var(--rk-muted); } /* sticky single Save bar (sits above the bottom tab bar in real screens) */ .rk-savebar{ position:sticky; bottom:0; display:flex; gap:var(--rk-s2); padding:var(--rk-s3); margin:0 calc(-1 * var(--rk-s1)); background:color-mix(in srgb, var(--rk-bg) 86%, transparent); backdrop-filter:saturate(1.2) blur(8px); -webkit-backdrop-filter:saturate(1.2) blur(8px); border-top:1px solid var(--rk-line); } /* buttons */ .rk-btn{ min-height:48px; border-radius:var(--rk-r-sm); font-size:var(--rk-fs-body); font-weight:700; border:1px solid transparent; cursor:pointer; padding:0 18px; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:filter var(--rk-t-tap) var(--rk-ease), transform var(--rk-t-tap) var(--rk-ease), background var(--rk-t-tap) var(--rk-ease); } .rk-btn:active{ transform:translateY(1px); } .rk-btn.primary{ background:var(--rk-accent); color:var(--rk-accent-ink); } .rk-btn.primary:hover{ filter:brightness(1.05); } .rk-btn.ghost{ background:var(--rk-surface); border-color:var(--rk-border); color:var(--rk-ink); } /* .subtle only set a background, leaving the base `border:1px solid transparent` — so next to a .ghost button (which DOES set border-color) it read as a flat block rather than a button. Give it an edge; keep it quieter than .ghost. */ .rk-btn.subtle{ background:var(--rk-surface-2); color:var(--rk-ink); border-color:var(--rk-border); } .rk-btn.danger{ background:var(--rk-bad-weak); color:var(--rk-bad); } .rk-btn.block{ width:100%; } .rk-btn.lg{ min-height:54px; font-size:var(--rk-fs-title); } /* ===================================================================== (d) QUICK-ACTION TILE GRID ===================================================================== */ .rk-tiles{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--rk-s3); } .rk-tile{ background:var(--rk-surface); border:1px solid var(--rk-line); border-radius:var(--rk-r); box-shadow:var(--rk-shadow); padding:var(--rk-s4); min-height:96px; display:flex; flex-direction:column; gap:var(--rk-s2); cursor:pointer; text-align:left; transition:transform var(--rk-t-tap) var(--rk-ease); -webkit-tap-highlight-color:transparent; } .rk-tile:active{ transform:translateY(1px); } /* Keep the tile's own surface colour under tap/focus — mobile browsers otherwise leave the last-tapped tile with a persistent dark focus/tap fill. Keyboard users still get the :focus-visible outline (polish.css). */ .rk-tile:focus,.rk-tile:active{ background:var(--rk-surface); } .rk-tile-ico{ width:40px; height:40px; border-radius:12px; background:var(--rk-accent-weak); color:var(--rk-accent-weak-ink); display:flex; align-items:center; justify-content:center; font-size:20px; } .rk-tile-ico svg{ width:22px; height:22px; } .rk-tile-title{ font-size:var(--rk-fs-body); font-weight:700; color:var(--rk-ink); margin-top:auto; } .rk-tile-sub{ font-size:var(--rk-fs-label); color:var(--rk-muted); } /* stat card (for dashboards) */ .rk-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--rk-s3); } .rk-stat{ background:var(--rk-surface); border:1px solid var(--rk-line); border-radius:var(--rk-r); box-shadow:var(--rk-shadow); padding:var(--rk-s4); display:flex; flex-direction:column; gap:var(--rk-s1); } .rk-stat .num{ font-size:clamp(22px,6vw,28px); font-weight:800; color:var(--rk-ink); letter-spacing:-.02em; } .rk-stat .lbl{ font-size:var(--rk-fs-label); font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--rk-muted); } .rk-stat .trend{ font-size:var(--rk-fs-label); font-weight:700; } .rk-stat .trend.up{ color:var(--rk-ok); } .rk-stat .trend.down{ color:var(--rk-bad); } /* ===================================================================== (e) BOTTOM TAB BAR — icon + label ===================================================================== */ .rk-tabbar{ display:flex; gap:2px; background:var(--rk-surface); border-top:1px solid var(--rk-line); box-shadow:0 -6px 18px rgba(16,32,52,.08); padding:6px 4px; } .rk-tabbar button{ flex:1 1 0; min-width:0; min-height:50px; background:none; border:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--rk-muted); border-radius:10px; font-size:11px; font-weight:700; line-height:1; transition:color var(--rk-t-tap) var(--rk-ease), background var(--rk-t-tap) var(--rk-ease); } .rk-tabbar button .ico{ font-size:20px; line-height:1; } .rk-tabbar button.active{ color:var(--rk-accent); } .rk-tabbar button:active{ background:var(--rk-surface-2); } /* ===================================================================== (f) FLOATING ACTION BUTTON ===================================================================== */ .rk-fab{ width:56px; height:56px; border-radius:18px; border:0; cursor:pointer; background:var(--rk-accent); color:var(--rk-accent-ink); box-shadow:var(--rk-fab-shadow); font-size:26px; line-height:1; display:inline-flex; align-items:center; justify-content:center; transition:transform var(--rk-t-tap) var(--rk-ease), filter var(--rk-t-tap) var(--rk-ease); } .rk-fab:active{ transform:translateY(1px) scale(.97); } .rk-fab:hover{ filter:brightness(1.05); } /* The fixed FAB sits at z-index 1399, ~1300 levels above the slide-in drawers (.ct-drawer is z-index 100), so it painted OVER the drawer's own primary action and won the tap (elementFromPoint at its centre returned the FAB, not the button underneath). It belongs to the page behind — stand it down while a drawer is open. */ body:has(.ct-drawer.open) .rk-fab-fixed{ display:none !important; } /* ===================================================================== (g) CHIP / TAB ROW — WRAPS to fit; never sideways-scrolls or clips ===================================================================== */ .rk-chips{ display:flex; flex-wrap:wrap; gap:var(--rk-s2); } .rk-chip{ flex:0 0 auto; min-height:40px; padding:0 16px; border-radius:var(--rk-r-pill); background:var(--rk-surface); border:1px solid var(--rk-border); color:var(--rk-ink-2); font-size:var(--rk-fs-label); font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:7px; transition:background var(--rk-t-tap) var(--rk-ease), color var(--rk-t-tap) var(--rk-ease); white-space:nowrap; } .rk-chip .rk-count{ background:var(--rk-surface-2); } .rk-chip.active{ background:var(--rk-accent); border-color:var(--rk-accent); color:var(--rk-accent-ink); } .rk-chip.active .rk-count{ background:rgba(255,255,255,.22); color:#fff; } /* segmented tabs (also wraps) */ .rk-seg{ display:flex; flex-wrap:wrap; gap:4px; background:var(--rk-surface-2); border:1px solid var(--rk-line); border-radius:var(--rk-r-sm); padding:4px; } .rk-seg button{ flex:1 1 auto; min-height:40px; border:0; border-radius:8px; cursor:pointer; background:transparent; color:var(--rk-muted); font-size:var(--rk-fs-label); font-weight:700; white-space:nowrap; padding:0 12px; } .rk-seg button.active{ background:var(--rk-surface); color:var(--rk-accent); box-shadow:var(--rk-shadow); } /* ===================================================================== (h) EMPTY STATE ===================================================================== */ .rk-empty{ text-align:center; padding:var(--rk-s10) var(--rk-s5); color:var(--rk-muted); background:var(--rk-surface); border:1px dashed var(--rk-border); border-radius:var(--rk-r); display:flex; flex-direction:column; align-items:center; gap:var(--rk-s2); } .rk-empty .rk-empty-ico{ width:56px; height:56px; border-radius:18px; background:var(--rk-surface-2); display:flex; align-items:center; justify-content:center; font-size:26px; opacity:.9; } .rk-empty h3{ margin:0; font-size:var(--rk-fs-title); font-weight:700; color:var(--rk-ink); } .rk-empty p{ margin:0; font-size:var(--rk-fs-body); max-width:34ch; } /* ===================================================================== SCREEN SCAFFOLD — header + scroll body (used to compose real screens) ===================================================================== */ .rk-screen{ display:flex; flex-direction:column; gap:var(--rk-s4); } .rk-screen-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--rk-s3); } .rk-section-gap{ height:var(--rk-s2); } @media (prefers-reduced-motion: reduce){ .rk *{ transition:none !important; } } /* ===================================================================== PHASE 0 — UX FOUNDATION PRIMITIVES (mobile UX plan, Phase 0). ADDITIVE and NOT wired into any real screen: these classes simply EXIST so later phases can use them. EVERY rule is inside @media (max-width:1180px), so desktop (>1180px) is byte-for-byte unchanged. Reduced-motion is killed at the end of the block. Reuses existing tokens (--rk-t-tap/--rk-t-ui/ --rk-ease + colour tokens) — adds no new global tokens. ===================================================================== */ @media (max-width: 1180px){ /* 1) SKELETON shimmer — card-shaped loading placeholder --------------- */ .rk-skel{ background:var(--rk-surface); border:1px solid var(--rk-line); border-radius:var(--rk-r); box-shadow:var(--rk-shadow); padding:var(--rk-s4); display:flex; flex-direction:column; gap:var(--rk-s3); } .rk-skel + .rk-skel{ margin-top:var(--rk-s3); } .rk-skel-row{ display:flex; align-items:center; gap:var(--rk-s3); } .rk-skel-col{ display:flex; flex-direction:column; gap:8px; flex:1 1 auto; min-width:0; } .rk-skel-box{ border-radius:8px; background:var(--rk-inset); background-image:linear-gradient(90deg, rgba(148,163,184,0) 0, rgba(148,163,184,.30) 50%, rgba(148,163,184,0) 100%); background-size:180% 100%; background-repeat:no-repeat; animation:rms-shimmer var(--t-shimmer) var(--e-in-out) infinite; } [data-theme="dark"] .rk-skel-box{ background-image:linear-gradient(90deg, rgba(226,232,240,0) 0, rgba(226,232,240,.10) 50%, rgba(226,232,240,0) 100%); } .rk-skel-box.avatar{ width:46px; height:46px; border-radius:12px; flex:0 0 auto; } .rk-skel-box.line{ height:12px; width:100%; } .rk-skel-box.w40{ width:40%; } .rk-skel-box.w70{ width:70%; } .rk-skel-box.w90{ width:90%; } .rk-skel-box.pill{ height:22px; width:76px; border-radius:999px; margin-left:auto; flex:0 0 auto; } /* 2) TOAST / SNACKBAR — single fixed host + stacked cards + Undo slot -- */ .rk-toast-host{ position:fixed; left:0; right:0; bottom:calc(72px + env(safe-area-inset-bottom)); z-index:1700; display:flex; flex-direction:column; align-items:center; gap:var(--rk-s2); padding:0 var(--rk-s3); pointer-events:none; } .rk-toast{ pointer-events:auto; position:relative; width:100%; max-width:460px; overflow:hidden; display:flex; align-items:center; gap:var(--rk-s3); background:var(--rk-surface); color:var(--rk-ink); border:1px solid var(--rk-line); border-radius:var(--rk-r); box-shadow:var(--rk-shadow-lg); padding:var(--rk-s3) var(--rk-s4); font-size:var(--rk-fs-body); font-weight:600; --rise:14px; animation:rms-rise var(--t-base) var(--e-out); } .rk-toast::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--rk-info); } .rk-toast.ok::before{ background:var(--rk-ok); } .rk-toast.err::before{ background:var(--rk-bad); } .rk-toast.info::before{ background:var(--rk-info); } .rk-toast-ico{ flex:0 0 auto; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; background:var(--rk-info-weak); color:var(--rk-info); } .rk-toast.ok .rk-toast-ico{ background:var(--rk-ok-weak); color:var(--rk-ok); } .rk-toast.err .rk-toast-ico{ background:var(--rk-bad-weak); color:var(--rk-bad); } .rk-toast-msg{ flex:1 1 auto; min-width:0; } .rk-toast-undo{ flex:0 0 auto; background:none; border:0; cursor:pointer; color:var(--rk-accent); font-weight:800; font-size:var(--rk-fs-body); padding:6px 4px; } .rk-toast.leaving{ --rise:14px; animation:rms-rise-out var(--t-base) var(--e-out) forwards; } /* 3) SWIPE — REMOVED (swipe-to-reveal retired; per-card buttons used directly). */ /* 4) URGENCY / countdown pill — extends .rk-pill --------------------- */ .rk-pill.urgent{ background:var(--rk-bad-weak); color:var(--rk-bad); } .rk-pill.soon{ background:var(--rk-warn-weak); color:var(--rk-warn); } .rk-pill.urgent::before,.rk-pill.soon::before{ animation:rms-pulse var(--t-pulse) var(--e-in-out) infinite; } /* 5) EMPTY STATE — additive CTA + hint slots (base .rk-empty unchanged) */ .rk-empty .rk-empty-cta{ margin-top:var(--rk-s2); display:flex; flex-direction:column; align-items:center; gap:var(--rk-s2); width:100%; } .rk-empty .rk-empty-cta .rk-btn{ min-width:200px; } .rk-empty .rk-empty-hint{ font-size:var(--rk-fs-label); color:var(--rk-muted); } /* 6) STEPS / timeline — Ordered -> Picked -> Labelled -> Shipped ------ */ .rk-steps{ display:flex; align-items:flex-start; } .rk-step{ flex:1 1 0; min-width:0; position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; } .rk-step::before{ content:""; position:absolute; top:12px; left:-50%; width:100%; height:2px; background:var(--rk-line); z-index:0; } .rk-step:first-child::before{ display:none; } .rk-step-dot{ position:relative; z-index:1; width:26px; height:26px; border-radius:50%; background:var(--rk-surface-2); border:2px solid var(--rk-line); color:var(--rk-muted); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; } .rk-step-lbl{ margin-top:6px; font-size:var(--rk-fs-label); font-weight:700; color:var(--rk-muted); max-width:9ch; } .rk-step.done .rk-step-dot{ background:var(--rk-ok); border-color:var(--rk-ok); color:#fff; } .rk-step.done::before,.rk-step.current::before{ background:var(--rk-ok); } .rk-step.current .rk-step-dot{ background:var(--rk-accent); border-color:var(--rk-accent); color:var(--rk-accent-ink); } .rk-step.current .rk-step-lbl{ color:var(--rk-ink); } } /* Reduced motion: freeze shimmer / toast / pulse / swipe transitions (gated) */ @media (max-width: 1180px) and (prefers-reduced-motion: reduce){ .rk-skel-box,.rk-toast,.rk-pill.urgent::before,.rk-pill.soon::before{ animation:none !important; } } /* ===================================================================== PHASE 1 — GLOBAL LOADING BAR. A thin indeterminate bar pinned to the top, shown while requests are in flight (driven by rkLoadbar, wired into apiFetch). Gated <=1180px so desktop is byte-for-byte unchanged (and the JS never even creates the element on desktop). ===================================================================== */ @media (max-width: 1180px){ .rk-loadbar{ position:fixed; top:0; left:0; right:0; height:3px; z-index:1800; background:var(--rk-accent-weak); pointer-events:none; opacity:0; transition:opacity var(--rk-t-tap) var(--rk-ease); overflow:hidden; } .rk-loadbar.active{ opacity:1; } .rk-loadbar::before{ content:""; position:absolute; top:0; bottom:0; left:0; width:42%; background:var(--rk-accent); border-radius:0 3px 3px 0; } /* Animate ONLY while the bar is shown. Unguarded, this infinite animation keeps compositing behind the opacity:0 bar for the life of the page. */ .rk-loadbar.active::before{ animation:rkLoadbarSlide var(--t-pulse) var(--e-in-out) infinite; } @keyframes rkLoadbarSlide{ 0%{ left:-42%; } 60%{ left:100%; } 100%{ left:100%; } } } /* reduced motion: static indeterminate (no moving animation) */ @media (max-width: 1180px) and (prefers-reduced-motion: reduce){ .rk-loadbar::before{ animation:none !important; left:0; width:100%; opacity:.55; } }