/*
* ux.css: the interactions kit's styles, paired with /assets/ux.js.
*
* Shared by every signed-in back office: repeater.com.au /admin and /account,
* aphelion.ltd /admin, the Aphileon OS dashboard and the customer backends
* built from the templates. One copy lives in each repo (rep and aphelion
* public/assets/ux.css); change both together, the tests compare them.
*
* It reads the host's own tokens where they exist (--surface, --text,
* --scrim, --radius-lg, --font-sans) and falls back to neutral values, so it
* drops into any page. Everything sits behind :where() or a ux- class, so a
* host's own rule always wins.
*
* What is here:
* type balanced headings, pretty paragraphs, tabular numbers
* .ux-hit hit slop: a bigger tap area than the drawn control
* .ux-sq continuous (squircle) corners where the browser draws them
* .ux-skel* skeleton loaders
* .ux-img image placeholder that sharpens in (our BlurHash stand-in)
* .ux-toast* the toast stack
* .ux-sheet* sheets: a bottom sheet on phones, a dialog on wide screens
* view transitions between pages and tabs
* .ux-busy a button whose request is still out
*/
:root {
--ux-ease: cubic-bezier(.2, .8, .2, 1);
--ux-spring: cubic-bezier(.32, .72, 0, 1);
--ux-skel: color-mix(in srgb, currentColor 9%, transparent);
--ux-skel-hi: color-mix(in srgb, currentColor 4%, transparent);
--ux-hit: 8px;
--ux-toast-bg: #2f2e2c;
--ux-toast-fg: #ffffff;
--ux-toast-muted: #d6d3cd;
--ux-sheet-bg: var(--surface, var(--bg, #ffffff));
--ux-sheet-fg: var(--text, var(--fg, #1f1e1d));
--ux-scrim: var(--scrim, rgba(15, 15, 15, .35));
--ux-radius: var(--radius-lg, 20px);
--ux-font: var(--font-sans, var(--sans, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif));
}
/* ---------------- Type: balanced headlines, tabular numbers ---------------- */
:where(h1, h2, h3, h4, h5, h6, legend, caption, .ux-balance) { text-wrap: balance; }
:where(p, li, dd, figcaption, blockquote) { text-wrap: pretty; }
/* Figures that line up in columns and don't jiggle while they count. */
:where(table, time, output, meter, progress, kbd, input[type=number], .ux-num, [data-ux-num]) { font-variant-numeric: tabular-nums; }
/* ---------------- Hit slop ----------------
The tap area grows past the drawn control by --ux-hit (12px on touch).
Don't put it on two controls closer than that, or the later one wins the gap. */
:where(.ux-hit) { position: relative; }
.ux-hit::after { content: ""; position: absolute; inset: calc(var(--ux-hit) * -1); border-radius: inherit; }
@media (pointer: coarse) { .ux-hit::after { inset: -12px; } }
/* ---------------- Continuous corners ----------------
Chrome draws a true squircle; Safari and Firefox keep the plain radius. */
@supports (corner-shape: squircle) {
:where(.ux-sq, .ux-toast, .ux-sheet__panel, .ux-skel--card) { corner-shape: superellipse(1.6); }
}
/* ---------------- Skeletons ---------------- */
@keyframes ux-pulse { 50% { opacity: .5; } }
:where(.ux-skel) {
display: block; border-radius: 8px; background: var(--ux-skel);
animation: ux-pulse 1.4s ease-in-out infinite;
}
.ux-skel--line { height: 12px; margin: 10px 0; }
.ux-skel--line:nth-child(3n+2) { width: 82%; }
.ux-skel--line:nth-child(3n) { width: 58%; }
.ux-skel--title { height: 18px; width: 40%; margin: 6px 0 14px; }
.ux-skel--card { height: 92px; border-radius: var(--ux-radius); }
.ux-skel--chip { display: inline-block; height: 26px; width: 84px; border-radius: 999px; margin-right: 6px; }
.ux-skel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.ux-skel-table { display: grid; gap: 0; }
.ux-skel-table > .ux-skel-row { display: grid; grid-template-columns: var(--ux-skel-cols, 2fr 1fr 1fr 1fr); gap: 16px; padding: 12px 4px; border-bottom: 1px solid var(--ux-skel-hi); }
.ux-skel-table > .ux-skel-row:last-child { border-bottom: 0; }
.ux-skel-row > .ux-skel { height: 12px; }
.ux-skel-row > .ux-skel:nth-child(2n) { width: 70%; }
/* Three lines drawn from one element, for a "Loading…" line the host can't rebuild. */
:where(.ux-skel-lines) {
color: transparent !important; user-select: none; min-height: 64px;
background-image: linear-gradient(var(--ux-skel) 0 0), linear-gradient(var(--ux-skel) 0 0), linear-gradient(var(--ux-skel) 0 0);
background-size: 100% 12px, 82% 12px, 58% 12px;
background-position: 0 6px, 0 28px, 0 50px;
background-repeat: no-repeat;
animation: ux-pulse 1.4s ease-in-out infinite;
}
.ux-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* ---------------- Image placeholder ----------------
A soft fill in the image's box while it loads, then it sharpens in. Give
the ![]()
its width/height (or an aspect-ratio) so nothing jumps. */
@keyframes ux-sharpen { from { filter: blur(10px); opacity: .4; } }
img.ux-img { background: var(--ux-skel); }
img.ux-img:not(.is-loaded) { animation: ux-pulse 1.4s ease-in-out infinite; }
img.ux-img.is-loaded { background: none; animation: ux-sharpen .4s var(--ux-ease); }
img.ux-img.is-cached { animation: none; }
/* ---------------- Busy buttons ---------------- */
@keyframes ux-spin { to { transform: rotate(360deg); } }
.ux-busy { cursor: progress !important; position: relative; }
.ux-busy::before {
content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -2px;
border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
animation: ux-spin .7s linear infinite;
}
/* ---------------- Toasts ----------------
Bottom right on wide screens, newest at the bottom. Top centre on phones,
clear of bottom bars and the keyboard, newest at the top. */
.ux-toasts {
position: fixed; z-index: 2147483000; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom));
display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
width: min(380px, calc(100vw - 32px)); pointer-events: none;
font-family: var(--ux-font);
}
.ux-toast {
position: relative; display: flex; align-items: flex-start; gap: 10px; width: 100%;
padding: 10px 8px 10px 14px; border-radius: 18px;
background: var(--ux-toast-bg); color: var(--ux-toast-fg);
box-shadow: 0 10px 30px rgba(0, 0, 0, .22), 0 0 0 1px rgba(255, 255, 255, .06) inset;
font-size: 13px; font-weight: 700; line-height: 1.4;
pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none;
opacity: 0; transform: translateY(10px) scale(.98);
transition: opacity .2s var(--ux-ease), transform .28s var(--ux-spring);
}
.ux-toast.is-on { opacity: 1; transform: none; }
.ux-toast.is-dragging { transition: none; }
.ux-toast__icon { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.ux-toast__icon svg { display: block; width: 18px; height: 18px; }
.ux-toast--success .ux-toast__icon { color: #4ade80; }
.ux-toast--error .ux-toast__icon { color: #ff7369; }
.ux-toast--warning .ux-toast__icon { color: #f5c451; }
.ux-toast--info .ux-toast__icon { color: #7dd3fc; }
.ux-toast--loading .ux-toast__icon svg { animation: ux-spin .8s linear infinite; }
.ux-toast__body { flex: 1; min-width: 0; padding-top: 1px; }
.ux-toast__msg { overflow-wrap: anywhere; }
.ux-toast__detail { margin-top: 3px; font-size: 12.5px; font-weight: 500; color: var(--ux-toast-muted); white-space: pre-line; overflow-wrap: anywhere; }
.ux-toast__action {
flex: none; align-self: center; min-height: 30px; padding: 4px 12px; border: 0; border-radius: 12px;
background: #ffffff; color: #1f1e1d; font: 800 12px/1.2 var(--ux-font); cursor: pointer;
}
.ux-toast__action:hover { background: #ecebe9; }
.ux-toast__close {
flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; margin: -3px 0;
border: 0; border-radius: 50%; background: transparent; color: #a9a6a0; cursor: pointer;
}
.ux-toast__close svg { width: 15px; height: 15px; }
.ux-toast__close:hover { background: rgba(255, 255, 255, .1); color: #ffffff; }
.ux-toast button:focus-visible { outline: 2px solid #ffffff; outline-offset: 1px; }
@media (max-width: 640px) {
.ux-toasts {
top: max(10px, env(safe-area-inset-top)); bottom: auto; left: 0; right: 0; margin: 0 auto;
width: min(440px, calc(100vw - 24px)); flex-direction: column-reverse; align-items: stretch;
}
.ux-toast { transform: translateY(-10px) scale(.98); }
}
/* ---------------- Sheets ----------------
A