/* ========================================================================== @ACP O DESIGN_TOKENS app.css — the entire visual system for the merchant gateway. Owned by plans/02-design-system.md. There is no second stylesheet. RULES, in order of how much damage breaking them does: 1. A component rule may reference a token. It may NOT contain a colour literal, a raw font stack, a pixel radius or a numeric font-weight. 2. If a component class exists, it is the ONLY way to build that thing. The reference app defined .app-card and then hand-rolled 168 cards. 3. Dark mode is three :root blocks in section 3. NOTHING below section 3 mentions dark mode, ever. 4. Every class in this file starts with `app-` (plans/00-conventions.md section 5.7). Pages may use no other class. ========================================================================== */ /* ========================================================================== 1. FONTS Self-hosted from pb_public/fonts/. See plans/02-design-system.md section 1. All three are VARIABLE fonts: one file carries the whole weight range, so every weight token in section 2 is a genuinely different drawing. DO NOT add a webfont CDN link. The Content-Security-Policy blocks it (default-src 'self', with no font-src override) and `wons-engine review` reports SEC-SRI. ========================================================================== */ @font-face { font-family: "Inter"; src: url("/fonts/inter-var.woff2") format("woff2"); /* Verified fvar axis: wght 100 - 900, default 400. */ font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Manrope"; src: url("/fonts/manrope-var.woff2") format("woff2"); /* Verified fvar axis: wght 200 - 800, DEFAULT 200. DO NOT delete this range. Without it every Manrope element falls back to the 200 default instance and renders hairline-thin. */ font-weight: 200 800; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-var.woff2") format("woff2"); /* Verified fvar axis: wght 400 - 800, default 400. */ font-weight: 400 800; font-style: normal; font-display: swap; } /* ========================================================================== 2. TOKENS - light mode is the default declaration. ========================================================================== */ :root { color-scheme: light; /* ---- 2.1 The ONE neutral ramp. There is no second ramp. --------------- CHANGED 2026-08-12: Slate out, a TRUE neutral in. Slate carries a blue cast (#f1f5f9 is measurably blue), and against it the teal accent made every screen read as "a blue app with a green thing on it". The reference the user asked for — the shadcn admin dashboard — is monochrome: the colour in it comes from data, never from chrome. Same eleven steps, same names, so every rule below follows without being touched. */ --app-n-50: #fafafa; --app-n-100: #f5f5f5; --app-n-200: #e5e5e5; --app-n-300: #d4d4d4; --app-n-400: #a3a3a3; --app-n-500: #737373; --app-n-600: #525252; --app-n-700: #404040; --app-n-800: #262626; --app-n-900: #171717; --app-n-950: #0a0a0a; /* ---- 2.2 Raw palette. Pages never name these; section 2.3 maps them. -- */ --app-t-50: #f0fdfa; --app-t-300: #5eead4; --app-t-400: #2dd4bf; --app-t-600: #0d9488; --app-t-700: #0f766e; --app-t-800: #115e59; --app-ok-50: #ecfdf5; --app-ok-300: #6ee7b7; --app-ok-400: #34d399; --app-ok-600: #059669; --app-ok-700: #047857; --app-ok-900: #022c22; --app-warn-50: #fffbeb; --app-warn-300: #fcd34d; --app-warn-400: #fbbf24; --app-warn-600: #d97706; --app-warn-800: #92400e; --app-bad-50: #fef2f2; --app-bad-300: #fca5a5; --app-bad-400: #f87171; --app-bad-600: #dc2626; --app-bad-700: #b91c1c; --app-bad-950: #450a0a; --app-info-50: #f0f9ff; --app-info-300: #7dd3fc; --app-info-400: #38bdf8; --app-info-600: #0284c7; --app-info-700: #0369a1; /* ---- 2.3 Surfaces and ink. Ratios measured against the pairs shipped. - */ /* CHANGED 2026-08-12. The desk was n-100 and cards floated on it in a visibly grey trough. In the reference the page is nearly white, the sidebar is the only tinted plane, and a card is told apart by ONE hairline. Less contrast between surfaces, more between ink and paper. */ --app-bg: var(--app-n-50); /* the desk the app floats on */ --app-surface: #ffffff; /* cards, panels, table rows */ --app-surface-2: var(--app-n-50); /* table head, inset areas */ --app-surface-3: var(--app-n-100); /* hover fill */ /* WHERE YOU ARE, as opposed to what you are pointing at. It has to be a shade stronger than the hover fill or the active row disappears the moment the pointer is over it, and it has to be a token so section 3 can flip it. */ --app-selected: var(--app-n-200); --app-ink: var(--app-n-900); /* 17.85:1 on surface, 16.30 on bg */ --app-ink-muted: var(--app-n-600); /* 7.58:1 on surface, 6.92 on bg */ --app-ink-faint: var(--app-n-500); /* 4.76:1 on surface, 4.55 on s-2 */ --app-ink-invert: #ffffff; /* ONE border colour, like the reference: n-200 everywhere a hairline is drawn. line-strong survives as a name because ~40 rules use it, but it is the same value now — two greys a shade apart read as a mistake. field-line stays DARKER than the rest on purpose: an input boundary is information, not decoration, and n-200 on white measures 1.3:1. */ --app-line: var(--app-n-200); /* decorative hairline only */ --app-line-strong: var(--app-n-200); /* card ring, decorative only */ --app-field-line: var(--app-n-300); /* every input boundary */ /* ---- 2.4 Brand ------------------------------------------------------- */ /* CHANGED 2026-08-12: the brand is INK. The teal ramp (2.2) is still here and is still what a chart series or a chosen state is drawn in, but the chrome — links, avatars, chips, focus — is monochrome now. A product whose every surface is branded has nothing left to emphasise with. */ --app-brand: var(--app-n-900); /* 16.1:1 on surface */ --app-brand-strong: var(--app-n-950); /* hover */ --app-brand-ink: #ffffff; --app-brand-soft: var(--app-n-100); /* The primary ACTION. ADDED 2026-08-09: the public site's call to action is near-black and the signed-in app's was teal, so the same product asked twice in two different voices. Ink is the action colour on both now, and teal stays what it always was — the brand accent on chips, avatars, links and status. Section 3 inverts these two for dark mode; nothing else needs to know. */ --app-action: var(--app-n-900); --app-action-hover: var(--app-n-800); --app-action-ink: #ffffff; --app-brand-soft-ink: var(--app-n-900); /* 15.3:1 on brand-soft */ --app-ring: var(--app-n-900); /* the focus ring is ink too */ /* ---- 2.5 Status. ink / fill / edge for each of five meanings. -------- Consumed by .app-status-* in section 9, which is the ONLY place that maps an invoice status onto one of these five. */ --app-neutral-ink: var(--app-n-600); /* 6.92:1 on neutral-fill */ --app-neutral-fill: var(--app-n-100); --app-neutral-edge: var(--app-n-500); /* 4.76:1 on surface */ --app-info-ink: var(--app-info-700); /* 5.57:1 on info-fill */ --app-info-fill: var(--app-info-50); --app-info-edge: var(--app-info-600); /* 4.10:1 on surface */ --app-warn-ink: var(--app-warn-800); /* 6.84:1 on warn-fill */ --app-warn-fill: var(--app-warn-50); --app-warn-edge: var(--app-warn-600); /* 3.19:1 on surface */ --app-ok-ink: var(--app-ok-700); /* 5.21:1 on ok-fill */ --app-ok-fill: var(--app-ok-50); --app-ok-edge: var(--app-ok-600); /* 3.77:1 on surface */ --app-bad-ink: var(--app-bad-700); /* 5.91:1 on bad-fill */ --app-bad-fill: var(--app-bad-50); --app-bad-edge: var(--app-bad-600); /* 4.83:1 on surface */ /* ---- 2.6 The floating shell ------------------------------------------ */ --app-glass: rgba(255, 255, 255, 0.72); --app-glass-line: rgba(10, 10, 10, 0.08); --app-scrim: rgba(10, 10, 10, 0.45); /* ---- 2.7 Type -------------------------------------------------------- */ --app-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; /* CHANGED 2026-08-12: THE DISPLAY FACE IS THE TEXT FACE. Manrope set the headings and Inter set everything else, and at 14-16px — which is every heading in an admin screen — the difference reads as an accident rather than a decision. The reference uses one family at every size. Manrope is still loaded for the public site, which is where a display face earns its keep. */ --app-font-display: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --app-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --app-fs-2xs: 0.6875rem; --app-fs-xs: 0.75rem; --app-fs-sm: 0.8125rem; --app-fs-base: 0.875rem; --app-fs-md: 1rem; --app-fs-lg: 1.125rem; --app-fs-xl: 1.375rem; --app-fs-2xl: 1.75rem; --app-fs-3xl: 2.25rem; --app-lh-tight: 1.2; --app-lh-snug: 1.35; --app-lh-normal: 1.55; --app-track-eyebrow: 0.08em; --app-track-tight: -0.011em; /* Six weights. Never write a numeric font-weight outside this block. */ --app-w-regular: 400; --app-w-medium: 500; --app-w-semibold: 600; --app-w-bold: 700; /* 700/800 was a poster, not an interface. The reference sets titles at 500 and the page heading at 600, and reserves weight for the one number that matters on the screen. */ --app-w-display: 600; --app-w-display-strong: 600; /* ---- 2.8 Radii ------------------------------------------------------- */ /* Names kept, values matched to the reference (--radius 0.625rem, so a control is 8px and a card is 14px). 16px cards next to 12px buttons was the roundest thing on the screen being the biggest. */ --app-r-8: 8px; --app-r-12: 10px; --app-r-16: 14px; /* the card default */ --app-r-20: 18px; --app-r-pill: 999px; /* ---- 2.9 Shadows. Near-flat: the hairline ring does the work. -------- */ /* Neutral, not slate-tinted, and shallower: a card in the reference has NO drop shadow at all, only a hairline. Depth is kept for what actually floats — menus (2) and modals (3). */ --app-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04); --app-shadow-2: 0 4px 16px -6px rgba(0, 0, 0, 0.14); --app-shadow-3: 0 24px 60px -20px rgba(0, 0, 0, 0.30); --app-focus: 0 0 0 3px color-mix(in srgb, var(--app-ring) 18%, transparent); /* ---- 2.10 Spacing, on a 4px grid ------------------------------------- */ --app-s-1: 0.25rem; --app-s-2: 0.5rem; --app-s-3: 0.75rem; --app-s-4: 1rem; --app-s-5: 1.25rem; --app-s-6: 1.5rem; --app-s-8: 2rem; --app-s-10: 2.5rem; --app-s-12: 3rem; /* ---- 2.11 Layout ----------------------------------------------------- */ --app-inset: 1rem; /* ARCHITECTURE.md section 10: 1rem inset */ --app-gap: 0.5rem; /* CHANGED 2026-08-09: --app-rail-w and --app-nav-w described two permanent bars. There is one navigation now, at two widths. */ --app-side-w: 16rem; --app-side-mini-w: 4.25rem; /* WIDENED 2026-08-12. 76rem centred left ~100px of dead gutter on either side of a 1440 screen while the content inside it was crowded — the worst of both. The reference fills the width it is given and controls density with padding instead. */ --app-content-max: 88rem; --app-blur: 12px; /* ARCHITECTURE.md section 10: blur(12px) */ /* ---- 2.12 Motion ----------------------------------------------------- */ --app-fast: 120ms; --app-slow: 220ms; --app-ease: cubic-bezier(0.2, 0.6, 0.3, 1); /* ---- 2.13 Stacking --------------------------------------------------- */ --app-z-topbar: 20; --app-z-scrim: 30; --app-z-drawer: 40; --app-z-modal: 60; --app-z-flash: 70; /* ---- 2.14 The public site (section 19) -------------------------------- ADDED 2026-08-09 with the public landing page, REWRITTEN 2026-10-04 as the "clear ledger" world (plans/92-public-site.md), replacing the cloth world. Not in plans/02-design-system.md. These are SEPARATE tokens, not aliases of the app's. Section 3 reassigns them for dark mode exactly as it reassigns the --app- ones, and the public site follows the same theme toggle as the application. TWO FAMILIES OF TOKEN, AND THE DIFFERENCE IS THE POINT. bg / bg-alt / surface / ink / ink-soft / mute / quiet / line / field-line accent / accent-soft / accent-ink / bad / shade ROLES. They swap in the dark: ink is the strong colour, bg is the ground. A rule that means "text on the page" uses these. deep / deep-2 / deep-ink / deep-mute / deep-line / deep-accent A SURFACE THAT IS DARK IN BOTH THEMES: the "how it works" field, the closing band and the sign-in panel. They do NOT swap, they are re-tuned (a shade lighter in the dark theme, so a deep field still reads as a field against a near-black page). Reported 2026-10-03: the sign-in panel and the landing's dark bands were built from ink/paper, so in the dark theme they turned pale grey while their text stayed white. A band that is meant to be dark must never be built from a role that flips. ONE ACCENT. Teal means "matched" and "paid" and nothing else: the tick, the Paid pill, a focus ring, the figure that arrives. It is never a decoration. Section 2.9d of the design system forbids a colour literal below section 3, which is why every one lives here rather than next to its rule. ---------------------------------------------------------------------- */ --mk-bg: #ffffff; /* the page */ --mk-bg-alt: #f6f8f8; /* a quiet band; the stage behind the product */ --mk-surface: #ffffff; /* a window or card lying on bg or bg-alt */ --mk-ink: #0f1c1b; /* text, and the dark button */ --mk-ink-soft: #26403d; /* the dark button on hover */ --mk-mute: #465654; /* secondary prose */ --mk-quiet: #5b6c6a; /* tertiary: captions, fine print */ --mk-line: #dfe6e5; /* every hairline */ --mk-line-strong: #c5d0cf; /* an outline you should notice */ --mk-field-line: #82928f; /* an input's boundary, 3:1 against its page */ --mk-shade: #0f1c1b; /* what a shadow is made of */ --mk-accent: #0f766e; /* 5.5:1 on bg */ --mk-on-accent: #ffffff; --mk-accent-soft: #e3f3f0; /* the Paid pill, the tick */ --mk-accent-ink: #0b5c56; /* 6.9:1 on accent-soft */ --mk-bad: #b42318; /* an error, 6.5:1 on bg */ --mk-deep: #06302d; --mk-deep-2: #0c403b; /* a panel lying on the deep field */ --mk-deep-ink: #f1f8f7; /* 13.3:1 on deep */ --mk-deep-mute: #aecbc7; /* 8.3:1 on deep, 6.7:1 on deep-2 */ --mk-deep-line: #1f5a54; --mk-deep-line-strong: #2d6e67; --mk-deep-accent: #5eead4; /* 9.7:1 on deep */ --mk-shadow-sm: 0 1px 2px color-mix(in srgb, var(--mk-shade) 7%, transparent); --mk-shadow-md: 0 1px 2px color-mix(in srgb, var(--mk-shade) 6%, transparent), 0 10px 24px -10px color-mix(in srgb, var(--mk-shade) 18%, transparent); --mk-shadow-lg: 0 2px 4px -1px color-mix(in srgb, var(--mk-shade) 6%, transparent), 0 28px 56px -20px color-mix(in srgb, var(--mk-shade) 26%, transparent); --mk-radius: 0.625rem; --mk-radius-lg: 1rem; --mk-radius-xl: 1.5rem; --mk-wrap: 72rem; --mk-font-head: "Manrope", var(--app-font-sans); } /* ========================================================================== 3. DARK MODE - the whole mechanism, in one place. Nothing below this section mentions dark mode. Not one rule. The reference app wrote `dark:` inline 3,845 times and its dark mode was still inconsistent; here dark mode reassigns the SAME semantic tokens and every component follows for free. Three blocks: A. follow the operating system, unless the user forced light B. the user forced dark C. the user forced light, overriding a dark operating system Block A and block B are IDENTICAL and must stay identical. DO NOT edit one without editing the other. There is a verification command for this in plans/02-design-system.md section 2.9. ========================================================================== */ /* ---- A. operating-system dark ----------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --app-bg: var(--app-n-950); --app-surface: var(--app-n-900); --app-surface-2: var(--app-n-800); --app-surface-3: var(--app-n-800); --app-selected: var(--app-n-700); --app-ink: var(--app-n-200); /* 14.48:1 on surface */ --app-ink-muted: var(--app-n-300); /* 12.02:1 on surface */ --app-ink-faint: var(--app-n-400); /* 6.96:1 on surface */ --app-ink-invert: var(--app-n-950); --app-line: var(--app-n-800); --app-line-strong: var(--app-n-700); --app-field-line: var(--app-n-500); /* 3.75:1 on surface */ /* THE CONTRAST FIX. The reference app used teal-700 here and measured 2.67:1. teal-400 measures 9.59:1 on this surface. */ --app-brand: var(--app-n-200); --app-brand-strong: #ffffff; --app-brand-ink: var(--app-n-950); --app-brand-soft: color-mix(in srgb, var(--app-n-400) 16%, transparent); /* Ink on paper becomes paper on ink. A near-black button on a near-black page would be invisible. */ --app-action: var(--app-n-200); --app-action-hover: #ffffff; --app-action-ink: var(--app-n-950); --app-brand-soft-ink: var(--app-n-200); --app-ring: var(--app-n-300); --app-neutral-ink: var(--app-n-300); /* 8.88:1 on neutral-fill */ --app-neutral-fill: color-mix(in srgb, var(--app-n-400) 18%, transparent); --app-neutral-edge: var(--app-n-400); /* 6.96:1 on surface */ --app-info-ink: var(--app-info-300); /* 7.60:1 on info-fill */ --app-info-fill: color-mix(in srgb, var(--app-info-400) 18%, transparent); --app-info-edge: var(--app-info-400); /* 8.33:1 on surface */ --app-warn-ink: var(--app-warn-300); /* 8.49:1 on warn-fill */ --app-warn-fill: color-mix(in srgb, var(--app-warn-400) 18%, transparent); --app-warn-edge: var(--app-warn-400); /* 10.69:1 on surface */ --app-ok-ink: var(--app-ok-300); /* 8.16:1 on ok-fill */ --app-ok-fill: color-mix(in srgb, var(--app-ok-400) 18%, transparent); --app-ok-edge: var(--app-ok-400); /* 9.29:1 on surface */ --app-bad-ink: var(--app-bad-300); /* 7.28:1 on bad-fill */ --app-bad-fill: color-mix(in srgb, var(--app-bad-400) 18%, transparent); --app-bad-edge: var(--app-bad-400); /* 6.45:1 on surface */ --app-glass: rgba(10, 10, 10, 0.72); --app-glass-line: rgba(229, 229, 229, 0.10); --app-scrim: rgba(0, 0, 0, 0.60); --app-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30); --app-shadow-2: 0 4px 16px -6px rgba(0, 0, 0, 0.55); --app-shadow-3: 0 24px 60px -20px rgba(0, 0, 0, 0.70); /* ---- THE PUBLIC SITE IN THE DARK ----------------------------------- The roles swap (ink becomes near-white, bg becomes night teal-black). The deep fields do not swap: they stay deep teal and get a shade lighter so a field still reads against the page. The accent is brightened for the dark ground. See section 2.14. The checkout (.co, section 12) is deliberately NOT here. It is a page a stranger sees once, on a phone, and it stays light in both themes. */ --mk-bg: #0a1110; --mk-bg-alt: #0f1918; --mk-surface: #121e1d; --mk-ink: #ecf4f3; --mk-ink-soft: #cfe0de; --mk-mute: #a3b8b5; --mk-quiet: #8ea5a2; --mk-line: #1f2e2d; --mk-line-strong: #2f4543; --mk-field-line: #5d7673; --mk-shade: #000000; --mk-accent: #2dd4bf; --mk-on-accent: #04201d; --mk-accent-soft: #0f2f2c; --mk-accent-ink: #7be9da; --mk-bad: #ff8a80; --mk-deep: #0b3733; --mk-deep-2: #114743; --mk-deep-ink: #f1f8f7; --mk-deep-mute: #aecbc7; --mk-deep-line: #1f5a54; --mk-deep-line-strong: #2d6e67; --mk-deep-accent: #5eead4; } } /* ---- B. user forced dark. IDENTICAL to block A. ------------------------ */ :root[data-theme="dark"] { color-scheme: dark; --app-bg: var(--app-n-950); --app-surface: var(--app-n-900); --app-surface-2: var(--app-n-800); --app-surface-3: var(--app-n-800); --app-selected: var(--app-n-700); --app-ink: var(--app-n-200); --app-ink-muted: var(--app-n-300); --app-ink-faint: var(--app-n-400); --app-ink-invert: var(--app-n-950); --app-line: var(--app-n-800); --app-line-strong: var(--app-n-700); --app-field-line: var(--app-n-500); --app-brand: var(--app-n-200); --app-brand-strong: #ffffff; --app-brand-ink: var(--app-n-950); --app-brand-soft: color-mix(in srgb, var(--app-n-400) 16%, transparent); /* FIXED 2026-08-12. These three were in block A and NOT in block B, so the rule at the head of section 3 — "block A and block B are IDENTICAL" — was false, and the consequence was invisible: a user whose OS is dark got a light action button, and a user who pressed the theme TOGGLE got the light mode's near-black button on a near-black page. Every primary button and every active filter chip disappeared, but only on forced dark, which is the path a screenshot of the default never covers. */ --app-action: var(--app-n-200); --app-action-hover: #ffffff; --app-action-ink: var(--app-n-950); --app-brand-soft-ink: var(--app-n-200); --app-ring: var(--app-n-300); --app-neutral-ink: var(--app-n-300); --app-neutral-fill: color-mix(in srgb, var(--app-n-400) 18%, transparent); --app-neutral-edge: var(--app-n-400); --app-info-ink: var(--app-info-300); --app-info-fill: color-mix(in srgb, var(--app-info-400) 18%, transparent); --app-info-edge: var(--app-info-400); --app-warn-ink: var(--app-warn-300); --app-warn-fill: color-mix(in srgb, var(--app-warn-400) 18%, transparent); --app-warn-edge: var(--app-warn-400); --app-ok-ink: var(--app-ok-300); --app-ok-fill: color-mix(in srgb, var(--app-ok-400) 18%, transparent); --app-ok-edge: var(--app-ok-400); --app-bad-ink: var(--app-bad-300); --app-bad-fill: color-mix(in srgb, var(--app-bad-400) 18%, transparent); --app-bad-edge: var(--app-bad-400); --app-glass: rgba(10, 10, 10, 0.72); --app-glass-line: rgba(229, 229, 229, 0.10); --app-scrim: rgba(0, 0, 0, 0.60); --app-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30); --app-shadow-2: 0 4px 16px -6px rgba(0, 0, 0, 0.55); --app-shadow-3: 0 24px 60px -20px rgba(0, 0, 0, 0.70); /* ---- THE PUBLIC SITE IN THE DARK ----------------------------------- The roles swap (ink becomes near-white, bg becomes night teal-black). The deep fields do not swap: they stay deep teal and get a shade lighter so a field still reads against the page. The accent is brightened for the dark ground. See section 2.14. The checkout (.co, section 12) is deliberately NOT here. It is a page a stranger sees once, on a phone, and it stays light in both themes. */ --mk-bg: #0a1110; --mk-bg-alt: #0f1918; --mk-surface: #121e1d; --mk-ink: #ecf4f3; --mk-ink-soft: #cfe0de; --mk-mute: #a3b8b5; --mk-quiet: #8ea5a2; --mk-line: #1f2e2d; --mk-line-strong: #2f4543; --mk-field-line: #5d7673; --mk-shade: #000000; --mk-accent: #2dd4bf; --mk-on-accent: #04201d; --mk-accent-soft: #0f2f2c; --mk-accent-ink: #7be9da; --mk-bad: #ff8a80; --mk-deep: #0b3733; --mk-deep-2: #114743; --mk-deep-ink: #f1f8f7; --mk-deep-mute: #aecbc7; --mk-deep-line: #1f5a54; --mk-deep-line-strong: #2d6e67; --mk-deep-accent: #5eead4; } /* ---- C. user forced light on a dark operating system. Nothing to redeclare: block A already excludes [data-theme="light"], so the :root defaults in section 2 apply unchanged. This rule exists only to set color-scheme so the browser paints its own controls light. ------- */ :root[data-theme="light"] { color-scheme: light; } /* ========================================================================== 4. RESET AND BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; background-color: var(--app-bg); /* A single, very soft brand wash so the desk reads as a surface rather than as empty chrome. ARCHITECTURE.md section 10: the app sits ON something. */ background-image: radial-gradient(60rem 40rem at 12% -10%, color-mix(in srgb, var(--app-brand) 9%, transparent), transparent 60%); background-attachment: fixed; color: var(--app-ink); font-family: var(--app-font-sans); font-size: var(--app-fs-base); font-weight: var(--app-w-regular); line-height: var(--app-lh-normal); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; } ul, ol { margin: 0; padding: 0; } a { color: var(--app-brand); text-decoration: none; } a:hover { color: var(--app-brand-strong); text-decoration: underline; } /* ☠️ AN ANCHOR THAT IS A BUTTON IS NOT A LINK, and the rule above does not know that. Its specificity is (0,1,1) — one element, one pseudo-class — which BEATS a single class like `.mk-btn-dark` at (0,1,0). So every `` took `--app-brand-strong` on hover, and on the light side that token is var(--app-n-950): a near-black word on a near-black button. Reported as "hover on the black button with white text makes the text black and making it invisible", and the underline the same rule adds was the other half of it. The .app-btn family never showed this because every one of its hover rules re-declares `color` and `text-decoration`. This says the same thing once, for both families, so a new button variant cannot forget it. `inherit` is deliberately not used: it would take the colour of whatever the button sits in, and a button's colour is its own. */ a.app-btn:hover, a.mk-btn:hover { text-decoration: none; } img, svg { max-width: 100%; } svg { display: block; } /* One focus treatment for the whole application. */ :focus-visible { outline: 2px solid var(--app-ring); outline-offset: 2px; border-radius: var(--app-r-8); } /* Screen-reader-only, and the skip link that becomes visible on focus. */ .app-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .app-skip { position: absolute; left: var(--app-s-4); top: var(--app-s-4); z-index: var(--app-z-flash); padding: var(--app-s-2) var(--app-s-4); border-radius: var(--app-r-12); background: var(--app-surface); color: var(--app-ink); box-shadow: var(--app-shadow-2); transform: translateY(-6rem); transition: transform var(--app-fast) var(--app-ease); } .app-skip:focus { transform: none; text-decoration: none; } /* HIDDEN MEANS HIDDEN. ------------------------------------------------------------------------- The browser's own [hidden] { display: none } is specificity (0,1,0) and so is .app-btn, and .app-btn sets display: inline-flex LATER in this file — so every button the scripts hide with the `hidden` attribute stayed on screen. That is how "Discard this one" came to be visible on a cart it refuses to discard: the control was showing, the guard behind it was correct, and the click did nothing. Doubled attribute selector, not !important: (0,2,0) beats any single class, and rule 1 of this file has no exception for convenience. ========================================================================= */ [hidden][hidden] { display: none; } /* ========================================================================== 5. THE SHELL — ONE navigation, two widths REWRITTEN 2026-08-09. What was here before: a 3.5rem pill-shaped icon rail AND a 14.5rem labelled nav panel, both permanent, both listing the same six destinations. Overview, Invoices, Counter, Payments, Settlement and Settings each appeared TWICE on screen at once, four rem apart. That is not a rail and a nav; that is one nav rendered twice. Now there is one sidebar with two widths: wide (default) mini (:root[data-nav="mini"]) ├─ logo + platform name ├─ logo ├─ workspace + role ├─ workspace initial ├─ section headings + labels ├─ icons only, with native tooltips └─ user + sign out + collapse └─ the same, iconised Mini is not a different navigation. It is this one with the labels hidden — which is what the rail was imitating. The state lives on the root element so the head script can apply it before first paint, and it survives navigation through localStorage. Below 1024px neither width applies: the sidebar becomes an off-canvas drawer driven by the checkbox at the top of body. No JavaScript is involved there, so it cannot break under a strict CSP and it resets on every navigation. ========================================================================== */ .app-drawer-toggle { position: absolute; opacity: 0; pointer-events: none; } /* The icon component's own class. It lives here rather than in the sidebar rules because the SAME component is used in buttons, empty states and page heads — and an with no intrinsic size falls back to 300x150, so losing this one line does not shrink an icon, it explodes the layout around it. */ .app-nav-icon { width: 1rem; height: 1rem; flex: none; } .app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--app-side-w) minmax(0, 1fr); background: var(--app-bg); } :root[data-nav="mini"] .app-shell { grid-template-columns: var(--app-side-mini-w) minmax(0, 1fr); } /* ---- 5.1 The sidebar ---------------------------------------------------- */ .app-side { position: sticky; top: 0; align-self: start; height: 100vh; display: flex; flex-direction: column; gap: var(--app-s-2); padding: var(--app-s-4) var(--app-s-3); /* CHANGED 2026-08-12: the sidebar is the tinted plane and the page is the white one — the reference's arrangement, and the reason its content area reads as the subject rather than as another panel. */ background: var(--app-bg); border-right: 1px solid var(--app-line); overflow: hidden; } /* ---- 5.2 The brand block ------------------------------------------------ The platform's own identity, from the platform_settings record. The mark is always visible; the words go when the sidebar narrows. */ .app-side-brand { display: flex; align-items: center; gap: var(--app-s-3); padding: var(--app-s-2) var(--app-s-2) var(--app-s-3); min-height: 3rem; } .app-side-logo { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--app-r-12); background: var(--app-ink); color: var(--app-ink-invert); overflow: hidden; text-decoration: none; } /* ☠️ THE TILE IS A FALLBACK, NOT A FRAME. .app-side-logo paints a near-black rounded square so the one-letter mark below has something to sit on. When a real logo is uploaded that square became a black card behind it — reported as "the logo of the platform is in black background. Should be transparent to respect whatever logo color with any background" — and `cover` cropped the logo to a square on top of that. So the tile stands down whenever it is holding an image: no background, no rounding to fight, and `contain` so the whole mark is visible whatever shape the file is. */ /* A MODIFIER THE TEMPLATE SETS, not :has(). layout.html already branches on platformHasLogo, so the fact is known at render time and does not need to be inferred from the DOM — and this works in every browser that reaches this application rather than only the ones with :has(). */ .app-side-logo-img { background: none; border-radius: 0; } .app-side-logo img { width: 100%; height: 100%; object-fit: contain; display: block; } .app-side-mark { font-family: var(--app-font-display); font-weight: var(--app-w-display-strong); font-size: var(--app-fs-md); line-height: 1; } .app-side-brand-text { display: grid; min-width: 0; } .app-side-platform { font-family: var(--app-font-display); font-weight: var(--app-w-bold); font-size: var(--app-fs-base); letter-spacing: var(--app-track-tight); color: var(--app-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-side-platform-sub { font-size: var(--app-fs-2xs); color: var(--app-ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---- 5.3 The workspace chip -------------------------------------------- Which workspace you are in, and the way to leave it. Its own block, because "which company am I looking at" is the question a person with three workspaces asks most often and it deserves better than a line of small text. */ .app-side-tenant { display: flex; align-items: center; gap: var(--app-s-3); padding: var(--app-s-2) var(--app-s-3); border: 1px solid var(--app-line); border-radius: var(--app-r-12); background: var(--app-surface-2); text-decoration: none; color: inherit; transition: border-color var(--app-fast) var(--app-ease), background var(--app-fast) var(--app-ease); } .app-side-tenant:hover { border-color: var(--app-line-strong); background: var(--app-surface-3); } .app-side-tenant-initial { flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--app-r-8); background: var(--app-brand); color: var(--app-brand-ink); font-size: var(--app-fs-xs); font-weight: var(--app-w-bold); } .app-side-tenant-text { display: grid; min-width: 0; flex: 1; } .app-side-tenant-name { font-size: var(--app-fs-sm); font-weight: var(--app-w-semibold); color: var(--app-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-side-tenant-role { font-size: var(--app-fs-xs); color: var(--app-ink-faint); text-transform: capitalize; } .app-side-tenant-switch { flex: none; color: var(--app-ink-faint); display: grid; } .app-side-tenant-switch svg { width: 0.875rem; height: 0.875rem; } /* ---- 5.4 The items ------------------------------------------------------ */ .app-side-nav { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 1px; padding-top: var(--app-s-2); } /* SAY THAT IT SCROLLS. Added 2026-08-22 after watching a first-run merchant. The list is twenty-two destinations and the panel is one screen tall, so on a 1366x768 laptop it is cut somewhere in the middle of "Money" — and it was cut SILENTLY: macOS hides overlay scrollbars until something moves, so the last row you can see sits flush against the Collapse footer and the panel reads as complete. Members, Settings, Registers, Branding, Plan & usage and Shop were all below the fold with nothing on screen saying so. The fix is a real scrollbar instead of an overlay one: declaring a width on ::-webkit-scrollbar takes the panel off macOS's overlay scrollbars, so the track occupies layout and is on screen before anybody touches the trackpad. It is honest by construction — it exists only while the list overflows, so a window tall enough to show all twenty-two rows still shows none of this. No edge fade: a permanent gradient at the top row would claim there is something above the first item when the panel is already at rest there. THE SCROLLBAR IS NOT ENOUGH ON ITS OWN. ::-webkit-scrollbar is styled below and it is worth having, but it cannot be relied on as THE signal: on macOS the platform draws overlay scrollbars that occupy no layout and stay hidden at rest, and measuring it here confirmed the panel's gutter is still zero. (Setting the standard scrollbar-width/scrollbar-color instead makes Chromium drop the ::-webkit rules altogether and changes nothing, so they are deliberately absent.) So the load-bearing signal is the fade on the bottom edge: the last row visible dissolves instead of ending, which is the oldest "there is more below" there is, and it needs no scrollbar, no script and no measurement. Bottom only — a fade at the top would claim there is something above the first item when the panel is at rest there, which is the same kind of lie this is fixing. When the list fits, the bottom of the box is empty padding and the fade falls on nothing, so a tall window shows none of it. */ .app-side-nav { mask-image: linear-gradient(to bottom, #000 calc(100% - 1.5rem), transparent 100%); -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.5rem), transparent 100%); } .app-side-nav::-webkit-scrollbar { width: 6px; } .app-side-nav::-webkit-scrollbar-track { background: transparent; } .app-side-nav::-webkit-scrollbar-thumb { background: var(--app-line-strong); border-radius: 999px; } .app-side-nav::-webkit-scrollbar-thumb:hover { background: var(--app-ink-faint); } /* Sentence case, body size, muted — a group label, not a banner. */ .app-side-section { margin: var(--app-s-4) 0 var(--app-s-1); padding-inline: var(--app-s-3); font-size: var(--app-fs-xs); font-weight: var(--app-w-medium); color: var(--app-ink-faint); } .app-side-nav > .app-side-section:first-child { margin-top: 0; } .app-side-item { display: flex; align-items: center; gap: var(--app-s-3); padding: var(--app-s-2) var(--app-s-3); border-radius: var(--app-r-8); color: var(--app-ink-muted); text-decoration: none; font-size: var(--app-fs-base); font-weight: var(--app-w-medium); white-space: nowrap; border: 0; background: none; width: 100%; text-align: left; font-family: inherit; cursor: pointer; transition: background var(--app-fast) var(--app-ease), color var(--app-fast) var(--app-ease); } /* FIXED 2026-08-13. This said var(--app-n-100) — a RAMP value, which is #f5f5f5 in every theme because the ramp is the raw palette and does not flip. In dark mode it painted a near-white block under near-white text, so hovering anything made it vanish. Rule 1 at the head of this file exists for exactly this: a component rule references a SEMANTIC token, and --app-surface-3 is the one that means "hover fill". */ .app-side-item:hover { background: var(--app-surface-3); color: var(--app-ink); } /* The active item. CHANGED 2026-08-12: it was a near-black filled block, so the heaviest object on every screen was the navigation telling you where you already are. A quiet fill and full-strength ink says the same thing and lets the page win — which is what the reference does. */ .app-side-item[aria-current="page"] { background: var(--app-selected); color: var(--app-ink); font-weight: var(--app-w-medium); } .app-side-item[aria-current="page"]:hover { background: var(--app-selected); } .app-side-icon { flex: none; display: grid; place-items: center; width: 1.125rem; height: 1.125rem; } .app-side-icon svg { width: 1.125rem; height: 1.125rem; } .app-side-label { overflow: hidden; text-overflow: ellipsis; } /* ---- 5.5 The foot ------------------------------------------------------- */ .app-side-foot { border-top: 1px solid var(--app-line); padding-top: var(--app-s-2); display: flex; flex-direction: column; gap: 1px; } .app-side-quiet { color: var(--app-ink-faint); font-weight: var(--app-w-regular); } .app-side-user { align-items: center; } .app-side-avatar { flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--app-r-pill); background: var(--app-surface-3); color: var(--app-ink); font-size: var(--app-fs-xs); font-weight: var(--app-w-bold); } .app-side-user-text { display: grid; min-width: 0; line-height: 1.25; } .app-side-user-email { font-size: var(--app-fs-sm); color: var(--app-ink); overflow: hidden; text-overflow: ellipsis; } .app-side-user-role { font-size: var(--app-fs-xs); color: var(--app-ink-faint); text-transform: capitalize; } .app-side-collapse .app-side-icon { transition: transform var(--app-slow) var(--app-ease); transform: rotate(180deg); /* points left: the direction it is about to go */ } :root[data-nav="mini"] .app-side-collapse .app-side-icon { transform: none; } /* ---- 5.6 MINI — the same navigation, labels off ------------------------- */ :root[data-nav="mini"] .app-side { padding-inline: var(--app-s-2); align-items: stretch; } :root[data-nav="mini"] .app-side-brand { justify-content: center; padding-inline: 0; } :root[data-nav="mini"] .app-side-brand-text, :root[data-nav="mini"] .app-side-tenant-text, :root[data-nav="mini"] .app-side-tenant-switch, :root[data-nav="mini"] .app-side-user-text, :root[data-nav="mini"] .app-side-label { display: none; } :root[data-nav="mini"] .app-side-tenant { justify-content: center; padding-inline: 0; } :root[data-nav="mini"] .app-side-item { justify-content: center; padding-inline: 0; } /* A heading with no words would be a stray gap, so it becomes the rule that separates one group from the next — the grouping survives, the label does not. */ :root[data-nav="mini"] .app-side-section { padding: 0; margin: var(--app-s-3) var(--app-s-2); } :root[data-nav="mini"] .app-side-section span { display: none; } :root[data-nav="mini"] .app-side-section::after { content: ""; display: block; height: 1px; background: var(--app-line); } :root[data-nav="mini"] .app-side-nav > .app-side-section:first-child { display: none; } /* ---- 5.7 The main column ------------------------------------------------ */ .app-main { min-width: 0; display: flex; flex-direction: column; } .app-topbar { position: sticky; top: 0; z-index: var(--app-z-topbar); display: flex; align-items: center; gap: var(--app-s-3); min-height: 3.5rem; padding: 0 var(--app-s-6); /* Solid. The frosted bar over a white page was blur with nothing to blur. */ background: var(--app-surface); border-bottom: 1px solid var(--app-line); } /* The trail, not the title. The page prints its own h1 immediately below. */ .app-crumb { display: flex; align-items: center; gap: var(--app-s-2); font-size: var(--app-fs-sm); min-width: 0; } .app-crumb-section { color: var(--app-ink-faint); white-space: nowrap; } .app-crumb-sep { color: var(--app-line-strong); } .app-crumb-here { color: var(--app-ink); font-weight: var(--app-w-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: var(--app-s-2); } .app-burger { display: none; place-items: center; width: 2.25rem; height: 2.25rem; margin-left: calc(var(--app-s-2) * -1); border-radius: var(--app-r-8); color: var(--app-ink-muted); cursor: pointer; } .app-burger:hover { background: var(--app-surface-3); color: var(--app-ink); } .app-content { flex: 1; width: 100%; max-width: var(--app-content-max); margin-inline: auto; padding: var(--app-s-6) var(--app-s-8) var(--app-s-12); } /* The page plane. The sidebar carries the tint (5.1), so the working area is paper — cards on it are told apart by their hairline, not by a trough. */ .app-main { background: var(--app-surface); } .app-scrim { display: none; } /* ---- 5.8 Below 1024px: one off-canvas drawer ---------------------------- */ @media (max-width: 1024px) { .app-shell, :root[data-nav="mini"] .app-shell { grid-template-columns: minmax(0, 1fr); } .app-side, :root[data-nav="mini"] .app-side { position: fixed; inset: 0 auto 0 0; z-index: var(--app-z-drawer); width: min(var(--app-side-w), 86vw); padding-inline: var(--app-s-3); transform: translateX(-102%); transition: transform var(--app-slow) var(--app-ease); box-shadow: var(--app-shadow-3); } /* On a phone the drawer is always the wide one: it is opened deliberately, it covers the page, and icons with no labels would be a worse answer to "where do I go" than the words. */ :root[data-nav="mini"] .app-side-brand-text, :root[data-nav="mini"] .app-side-tenant-text, :root[data-nav="mini"] .app-side-tenant-switch, :root[data-nav="mini"] .app-side-user-text, :root[data-nav="mini"] .app-side-label { display: block; } :root[data-nav="mini"] .app-side-item, :root[data-nav="mini"] .app-side-tenant, :root[data-nav="mini"] .app-side-brand { justify-content: flex-start; padding-inline: var(--app-s-3); } :root[data-nav="mini"] .app-side-section { padding-inline: var(--app-s-3); margin: var(--app-s-4) 0 var(--app-s-1); } :root[data-nav="mini"] .app-side-section span { display: inline; } :root[data-nav="mini"] .app-side-section::after { display: none; } :root[data-nav="mini"] .app-side-nav > .app-side-section:first-child { display: block; } .app-drawer-toggle:checked ~ .app-shell .app-side { transform: none; } .app-scrim { display: block; position: fixed; inset: 0; z-index: var(--app-z-scrim); background: color-mix(in srgb, var(--app-n-950) 45%, transparent); opacity: 0; pointer-events: none; transition: opacity var(--app-slow) var(--app-ease); } .app-drawer-toggle:checked ~ .app-shell .app-scrim { opacity: 1; pointer-events: auto; } .app-burger { display: grid; } .app-side-collapse { display: none; } .app-content { padding: var(--app-s-6) var(--app-s-4) var(--app-s-10); } .app-topbar { padding-inline: var(--app-s-4); } } /* ========================================================================== 6. PAGE HEADER - eyebrow + title ARCHITECTURE.md section 10, item 2: a muted uppercase tracking-widest section label above a bold page title, actions right-aligned in the same row. Used 228 times in the reference app because it orients you instantly without a heavy toolbar. ========================================================================== */ /* MEASURED 2026-08-12: the gap between this block and whatever followed it was ZERO — the actions row and the first card touched, which is most of what "cramped" was. The reference leaves 24px between every top-level block. */ .app-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--app-s-4); margin-bottom: var(--app-s-6); } .app-eyebrow { font-family: var(--app-font-display); font-size: var(--app-fs-2xs); font-weight: var(--app-w-medium); letter-spacing: 0.04em; text-transform: uppercase; color: var(--app-ink-muted); line-height: var(--app-lh-tight); } .app-title { margin-top: var(--app-s-1); font-family: var(--app-font-display); font-size: var(--app-fs-xl); font-weight: var(--app-w-semibold); letter-spacing: var(--app-track-tight); line-height: var(--app-lh-tight); color: var(--app-ink); } .app-subtitle { margin-top: var(--app-s-2); max-width: 46rem; font-size: var(--app-fs-base); color: var(--app-ink-muted); } .app-page-actions { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--app-s-2); } /* On a phone the actions drop under the subtitle. Right-aligned they read as stray text ("Back to items" alone at the far edge); left-aligned they read as the page's controls. */ @media (max-width: 40rem) { .app-page-head > .app-page-actions, .app-page-head > .app-btn { margin-left: 0; } } /* ========================================================================== 7. BUTTONS .app-btn on its own is the SECONDARY button and is complete and valid - plans/00-conventions.md section 3.2 uses it bare. Add .app-btn-primary when the action is the page's primary action. ========================================================================== */ .app-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--app-s-2); /* 2.5rem = 40px, and 44px under a coarse pointer (below). It was 2.25rem, which is 36px: under the 44px target every touch guideline asks for, on a product whose busiest screen is a till operated with a finger. */ min-height: 2.25rem; padding: 0 var(--app-s-3); border: 1px solid var(--app-line); border-radius: var(--app-r-8); background: var(--app-surface); color: var(--app-ink); font-family: var(--app-font-sans); font-size: var(--app-fs-base); font-weight: var(--app-w-medium); line-height: 1; text-decoration: none; cursor: pointer; transition: background var(--app-fast) var(--app-ease), border-color var(--app-fast) var(--app-ease), color var(--app-fast) var(--app-ease); } .app-btn:hover { background: var(--app-surface-3); color: var(--app-ink); text-decoration: none; } .app-btn:focus-visible { outline: none; box-shadow: var(--app-focus); } .app-btn:disabled, .app-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* A button the one-submit guard in layout.html has just taken. It reads as WORKING rather than as broken: the same dimming a disabled button gets says "you may not", and what this one means is "already going". The cursor is the only difference that matters — nothing here moves, because a payment button that starts animating at the moment of payment is a payment button somebody presses again. */ .app-btn[aria-busy="true"] { opacity: 0.65; cursor: progress; } .app-btn-primary { border-color: var(--app-action); background: var(--app-action); color: var(--app-action-ink); } .app-btn-primary:hover { border-color: var(--app-action-hover); background: var(--app-action-hover); color: var(--app-action-ink); } .app-btn-danger { border-color: var(--app-bad-edge); background: var(--app-bad-edge); color: var(--app-ink-invert); } .app-btn-danger:hover { border-color: var(--app-bad-ink); background: var(--app-bad-ink); color: var(--app-ink-invert); } .app-btn-ghost { border-color: transparent; background: transparent; color: var(--app-ink-muted); } .app-btn-ghost:hover { border-color: transparent; background: var(--app-surface-3); color: var(--app-ink); } /* The small variant. The reference app had none and overrode button sizing with !important everywhere instead. There is no !important in this file. */ .app-btn-sm { min-height: 1.75rem; padding: 0 var(--app-s-3); border-radius: var(--app-r-8); font-size: var(--app-fs-xs); } /* Square icon-only button. Always needs an aria-label. */ .app-btn-icon { width: 2.25rem; min-height: 2.25rem; padding: 0; } .app-btn-icon.app-btn-sm { width: 1.75rem; min-height: 1.75rem; } .app-btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--app-s-2); } /* ========================================================================== 8. FORMS ========================================================================== */ .app-form { display: flex; flex-direction: column; gap: var(--app-s-5); } .app-field { display: flex; flex-direction: column; gap: var(--app-s-2); } .app-field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--app-s-5); } /* A button that belongs on the same row as the fields it submits (a filter bar): it sits on the fields' baseline instead of floating at the top of its cell. */ .app-field-row > .app-btn-row { align-self: end; } .app-label { font-size: var(--app-fs-base); font-weight: var(--app-w-medium); color: var(--app-ink); } .app-required { color: var(--app-bad-ink); font-weight: var(--app-w-regular); } .app-optional { color: var(--app-ink-faint); font-weight: var(--app-w-regular); } .app-input, .app-select, .app-textarea { width: 100%; min-height: 2.25rem; padding: var(--app-s-2) var(--app-s-3); border: 1px solid var(--app-field-line); border-radius: var(--app-r-8); background: var(--app-surface); color: var(--app-ink); font-family: var(--app-font-sans); font-size: var(--app-fs-base); line-height: var(--app-lh-snug); transition: border-color var(--app-fast) var(--app-ease), box-shadow var(--app-fast) var(--app-ease); } .app-input::placeholder, .app-textarea::placeholder { color: var(--app-ink-faint); } .app-input:focus, .app-select:focus, .app-textarea:focus { outline: none; border-color: var(--app-ring); box-shadow: var(--app-focus); } .app-input:disabled, .app-select:disabled, .app-textarea:disabled { background: var(--app-surface-2); color: var(--app-ink-faint); cursor: not-allowed; } .app-textarea { min-height: 6rem; resize: vertical; } .app-select { /* The chevron is a data: URI, which the CSP permits (img-src 'self' data:). It is monochrome and inherits nothing, so it is drawn in the neutral ramp's mid grey, which reads correctly on both surfaces. */ appearance: none; padding-right: var(--app-s-8); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2364748b' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--app-s-3) center; background-size: 1rem 1rem; } /* The invalid state. Set it from the server: add app-input-invalid whenever the field has an error, and point aria-describedby at the error element. */ .app-input-invalid, .app-input-invalid:focus { border-color: var(--app-bad-edge); box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-bad-edge) 26%, transparent); } .app-error { display: flex; align-items: center; gap: var(--app-s-1); font-size: var(--app-fs-xs); font-weight: var(--app-w-medium); color: var(--app-bad-ink); } .app-hint { font-size: var(--app-fs-xs); color: var(--app-ink-muted); } /* Prefix add-on, for a currency code sitting inside a money input. */ /* A file chooser in the app's own button, not the browser's grey one. */ input[type="file"]::file-selector-button { margin-right: var(--app-s-3); padding: var(--app-s-1) var(--app-s-3); border: 1px solid var(--app-line); border-radius: var(--app-r-8); background: var(--app-surface); color: var(--app-ink); font: inherit; font-weight: var(--app-w-medium); cursor: pointer; } input[type="file"]::file-selector-button:hover { background: var(--app-surface-3); } .app-input-group { display: flex; align-items: stretch; } .app-input-group .app-input { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: none; } .app-input-prefix { display: inline-flex; align-items: center; padding: 0 var(--app-s-3); border: 1px solid var(--app-field-line); border-radius: var(--app-r-12) 0 0 var(--app-r-12); background: var(--app-surface-2); color: var(--app-ink-muted); font-size: var(--app-fs-sm); font-weight: var(--app-w-medium); white-space: nowrap; } /* Checkbox and radio. The native control is kept and only recoloured, so keyboard behaviour and screen-reader semantics are untouched. */ .app-check { display: flex; align-items: flex-start; gap: var(--app-s-3); padding: var(--app-s-2) 0; cursor: pointer; } .app-check input[type="checkbox"], .app-check input[type="radio"] { flex: none; width: 1.125rem; height: 1.125rem; margin: 0.125rem 0 0; accent-color: var(--app-brand); cursor: pointer; } .app-check-body { display: flex; flex-direction: column; gap: var(--app-s-1); } .app-check-label { font-size: var(--app-fs-base); font-weight: var(--app-w-medium); color: var(--app-ink); } .app-check-hint { font-size: var(--app-fs-xs); color: var(--app-ink-muted); } /* ========================================================================== 9. CARDS, STATS ARCHITECTURE.md section 10: near-flat. A hairline ring does the work, not a drop shadow. 16px is the card radius. ========================================================================== */ /* CHANGED 2026-08-12. An inset ring PLUS a drop shadow is two devices doing one job, and the ring drawn inside the radius left a visible seam where the card met a table. One real border, no shadow — the reference's card is a white plane with a hairline and nothing else. */ .app-card { border-radius: var(--app-r-16); background: var(--app-surface); border: 1px solid var(--app-line); margin-block: var(--app-s-4); } /* 24px, not 16/20. Measured against the reference: its card is py-6 px-6 and ours was py-4 px-5, which is why the same content read as crowded inside the same width. */ .app-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--app-s-4); padding: var(--app-s-5) var(--app-s-6); border-bottom: 1px solid var(--app-line); } .app-card-title { font-family: var(--app-font-display); font-size: var(--app-fs-md); font-weight: var(--app-w-semibold); color: var(--app-ink); line-height: var(--app-lh-tight); } .app-card-meta { margin-top: var(--app-s-1); font-size: var(--app-fs-sm); color: var(--app-ink-muted); } /* flex-wrap, like .app-page-actions above. Without it a card head with two buttons overflowed its own card on a narrow screen instead of wrapping — which is most of what "the buttons appear out of place" was. */ .app-card-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--app-s-2); } .app-card-body { padding: var(--app-s-6); } .app-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--app-s-3); padding: var(--app-s-5) var(--app-s-6); border-top: 1px solid var(--app-line); background: var(--app-surface-2); border-radius: 0 0 var(--app-r-16) var(--app-r-16); } /* margin-block, like .app-card and .app-stats above. Without it a grid of cards sat flush against whatever paragraph introduced it — measured on /shop, where "Issuing invoices is never metered" touched the top of the first product card and read as that card's own subtitle rather than as the page's line. */ .app-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--app-s-5); margin-block: var(--app-s-4); } /* TWO PANELS SIDE BY SIDE, one narrower screen and they stack. Used by /settings/branding (the form, and what it changes) and /admin/platform, both of which asked for it in markup before any rule existed — so both rendered as one full-width column and the second panel read as a separate page section. auto-fit rather than a hard `1fr 1fr` so the break happens on content width and needs no media query. */ .app-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--app-s-5); align-items: start; margin-block: var(--app-s-4); } /* The gap owns the spacing between the panels, so the cards inside stop adding their own — the same correction .app-card-grid makes below. */ .app-grid-2 > .app-card { margin-block: 0; } /* ---- stat cards ------------------------------------------------------- */ .app-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--app-s-4); margin-block: var(--app-s-4); } .app-stat { display: flex; flex-direction: column; gap: var(--app-s-2); padding: var(--app-s-6); border-radius: var(--app-r-16); background: var(--app-surface); border: 1px solid var(--app-line); } /* CHANGED 2026-08-12: no longer 11px UPPERCASE LETTERSPACED. Four of those across the top of a dashboard is four labels shouting over the four numbers they describe. The reference prints "Total Revenue" in the same face and size as body text, muted, and lets the figure below it be the loud one. */ .app-stat-label { font-family: var(--app-font-sans); font-size: var(--app-fs-base); font-weight: var(--app-w-medium); color: var(--app-ink-muted); } /* The value is SANS, not display, and always tabular. Numbers are the one place a display face must not be trusted; see section 5 of the plan. */ .app-stat-value { font-family: var(--app-font-sans); font-size: var(--app-fs-2xl); font-weight: var(--app-w-semibold); font-variant-numeric: tabular-nums; letter-spacing: var(--app-track-tight); line-height: var(--app-lh-tight); color: var(--app-ink); } .app-stat-meta { font-size: var(--app-fs-sm); color: var(--app-ink-muted); } /* ========================================================================== 10. DATA TABLE + STATUS AS STRUCTURE ARCHITECTURE.md section 10, item 3: a 4px status-coloured left border on the row plus a matching soft-tinted pill, so a list is scannable without being read. The mapping from an invoice status onto a colour happens EXACTLY ONCE, in the .app-status-* rules below. Each one sets three private properties that the row border and the pill both consume. plans/00-conventions.md section 3.2 puts the same `app-status-` class on the
and on the pill, and that is the intended usage. ========================================================================== */ .app-table-wrap { border-radius: var(--app-r-16); background: var(--app-surface); border: 1px solid var(--app-line); overflow-x: auto; margin-block: var(--app-s-4); } .app-table { width: 100%; min-width: 40rem; border-collapse: collapse; /* Body size, not small print. A table IS the page on most screens here, and the reference sets its cells at the same 14px as everything else. */ font-size: var(--app-fs-base); } /* CHANGED 2026-08-12: the header row was 11px uppercase letterspaced on a grey band — a second, louder heading directly under the card's own. It is now the same size as the data, medium weight, muted, on the same white. */ .app-table-head th { padding: var(--app-s-4); border-bottom: 1px solid var(--app-line); background: var(--app-surface); text-align: left; font-family: var(--app-font-sans); font-size: var(--app-fs-base); font-weight: var(--app-w-medium); color: var(--app-ink-muted); white-space: nowrap; } .app-table-head th:first-child { border-top-left-radius: var(--app-r-16); } .app-table-head th:last-child { border-top-right-radius: var(--app-r-16); } .app-table tbody tr { border-bottom: 1px solid var(--app-line); /* The 4px status border. --app-st-edge is set by an .app-status-* class; when no status class is present it falls back to transparent, so a plain table looks right without one. */ /* NARROWED 2026-08-12 from 4px. ARCHITECTURE.md section 10 item 3 keeps the status border — it is what makes a list scannable without reading — but 4px of saturated colour per row fought the pill next to it. */ border-left: 3px solid var(--app-st-edge, transparent); transition: background var(--app-fast) var(--app-ease); } .app-table tbody tr:last-child { border-bottom: none; } /* A draft and a cancelled invoice get NO stripe. The stripe exists to make a state findable without reading, and "nothing has happened yet" is not a state worth finding — a dark bar down the left of every draft was the loudest thing in the list and it meant the least. The pill still says it. */ .app-table tbody tr.app-status-draft, .app-table tbody tr.app-status-cancelled, .app-table tbody tr.app-status-paid { border-left-color: transparent; } .app-table tbody tr:hover { background: var(--app-surface-2); } .app-table td { padding: var(--app-s-3) var(--app-s-4); /* The reference's rows are 63px because its cells carry two lines; ours carry one, so 52px is the same rhythm without the padding being dead space. 48px was a spreadsheet. */ height: 3.25rem; vertical-align: middle; color: var(--app-ink); } .app-table td a { font-weight: var(--app-w-medium); } /* A table inside a card has no box of its own: the card is the box. Without this the wrap drew a second bordered, rounded rectangle inset inside the first. The wrap keeps its overflow-x, so a wide table still scrolls, and its bottom corners are clipped to the card's radius. */ .app-card > .app-table-wrap, .app-card-body > .app-table-wrap:only-child { margin: 0; border: 0; border-radius: 0; background: transparent; } .app-card > .app-table-wrap:last-child { border-radius: 0 0 var(--app-r-16) var(--app-r-16); } /* A body follows the table in the same card: a hairline says where the table ends, since its last row carries no border of its own. (A footer brings its own top border.) */ .app-card > .app-table-wrap:has(+ .app-card-body) { border-bottom: 1px solid var(--app-line); } .app-card-body:has(> .app-table-wrap:only-child) { padding: 0; } .app-card > .app-card-body:last-child > .app-table-wrap:only-child { border-radius: 0 0 var(--app-r-16) var(--app-r-16); } .app-card > .app-table-wrap .app-table-head th:first-child, .app-card-body > .app-table-wrap .app-table-head th:first-child { border-top-left-radius: 0; } .app-card > .app-table-wrap .app-table-head th:last-child, .app-card-body > .app-table-wrap .app-table-head th:last-child { border-top-right-radius: 0; } /* A table INSIDE a card lines its first column up with the card's own title rather than starting 8px to the left of it. Two vertical rules that nearly agree are worse than either — measured 313px for the title, 307px for the first header cell. */ .app-card .app-table th:first-child, .app-card .app-table td:first-child { padding-left: var(--app-s-6); } .app-card .app-table th:last-child, .app-card .app-table td:last-child { padding-right: var(--app-s-6); } /* Right-align a column of numbers. Pair it with .app-num on the cell. */ .app-table .app-num, .app-table th.app-num { text-align: right; } /* A table of a few short columns (three figures a row) that must stay on a phone rather than scroll its numbers out of sight. */ .app-table-fit { min-width: 0; } @media (max-width: 40rem) { .app-card .app-table.app-table-fit th, .app-card .app-table.app-table-fit td { padding-inline: var(--app-s-2); font-size: var(--app-fs-sm); } } .app-nowrap { white-space: nowrap; } /* A list a merchant reads on a phone (plans/87 ruling 3). The table keeps its markup; below 40rem each row becomes a block of label / value pairs, so Total and Status are on the screen instead of a swipe away. The header row stays for screen readers. */ @media (max-width: 40rem) { .app-table.app-table-stack { min-width: 0; display: block; } .app-table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .app-table-stack tbody { display: block; } .app-table-stack tbody tr { display: block; padding: var(--app-s-4); } .app-table.app-table-stack td, .app-card .app-table.app-table-stack td:first-child, .app-card .app-table.app-table-stack td:last-child { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 var(--app-s-4); height: auto; padding: var(--app-s-1) 0; text-align: right; } /* The small line under a value (a reference, an email) goes on its own line, under it. */ .app-table-stack td > .app-table-meta { flex: 1 1 100%; } /* A cell with nothing in it (no town on file) is not a label with a blank beside it. */ .app-table-stack td:empty { display: none; } .app-table-stack td[data-label]::before { content: attr(data-label); flex: none; text-align: left; font-size: var(--app-fs-sm); color: var(--app-ink-muted); } .app-table.app-table-stack td.app-cell-title, .app-card .app-table.app-table-stack td.app-cell-title:first-child { display: block; padding-bottom: var(--app-s-2); font-size: var(--app-fs-md); font-weight: var(--app-w-semibold); text-align: left; } .app-table.app-table-stack td.app-cell-action, .app-card .app-table.app-table-stack td.app-cell-action:last-child { justify-content: flex-start; flex-wrap: wrap; padding-top: var(--app-s-3); } .app-table-stack td.app-col-secondary { display: none; } } .app-table-meta { display: block; font-size: var(--app-fs-sm); color: var(--app-ink-muted); } /* ---- the five status colour sets -------------------------------------- */ .app-status-draft, .app-status-cancelled { --app-st-ink: var(--app-neutral-ink); --app-st-fill: var(--app-neutral-fill); --app-st-edge: var(--app-neutral-edge); } .app-status-issued { --app-st-ink: var(--app-info-ink); --app-st-fill: var(--app-info-fill); --app-st-edge: var(--app-info-edge); } .app-status-part_paid { --app-st-ink: var(--app-warn-ink); --app-st-fill: var(--app-warn-fill); --app-st-edge: var(--app-warn-edge); } .app-status-paid { --app-st-ink: var(--app-ok-ink); --app-st-fill: var(--app-ok-fill); --app-st-edge: var(--app-ok-edge); } .app-status-overdue { --app-st-ink: var(--app-bad-ink); --app-st-fill: var(--app-bad-fill); --app-st-edge: var(--app-bad-edge); } /* ---- the pill --------------------------------------------------------- */ .app-pill { display: inline-flex; align-items: center; gap: var(--app-s-1); padding: 0.125rem var(--app-s-2); border-radius: var(--app-r-pill); background: var(--app-st-fill, var(--app-neutral-fill)); color: var(--app-st-ink, var(--app-neutral-ink)); font-size: var(--app-fs-xs); font-weight: var(--app-w-medium); line-height: 1.4; white-space: nowrap; } /* A GENERIC GOOD/BAD PILL, added 2026-09-02 for the webhook delivery log. The .app-status-* pills below all name an INVOICE state, and a delivery is not an invoice — borrowing `app-status-paid` to mean "accepted" would be the kind of reuse that reads fine today and lies the moment either meaning moves. These set the same two custom properties .app-pill already reads, so they inherit its shape and only choose its colour. */ .app-pill-ok { --app-st-fill: var(--app-ok-fill); --app-st-ink: var(--app-ok-ink); } .app-pill-bad { --app-st-fill: var(--app-bad-fill); --app-st-ink: var(--app-bad-ink); } /* A cancelled invoice is inert, not merely neutral. Same neutral ink, but an outline instead of a fill, so it is distinguishable from `draft` at a glance without adding a second grey to the ramp. */ .app-pill.app-status-cancelled { background: transparent; box-shadow: inset 0 0 0 1px var(--app-neutral-edge); } /* ========================================================================== 11. FILTER CHIPS ========================================================================== */ .app-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--app-s-2); } .app-chip { display: inline-flex; align-items: center; gap: var(--app-s-2); min-height: 1.875rem; padding: 0 var(--app-s-3); border: 1px solid var(--app-field-line); border-radius: var(--app-r-pill); background: var(--app-surface); color: var(--app-ink-muted); font-size: var(--app-fs-xs); font-weight: var(--app-w-medium); text-decoration: none; cursor: pointer; transition: background var(--app-fast) var(--app-ease), color var(--app-fast) var(--app-ease), border-color var(--app-fast) var(--app-ease); } .app-chip:hover { background: var(--app-surface-3); color: var(--app-ink); text-decoration: none; } .app-chip:focus-visible { outline: none; box-shadow: var(--app-focus); } .app-chip[aria-pressed="true"], .app-chip-active { border-color: var(--app-action); background: var(--app-action); color: var(--app-action-ink); font-weight: var(--app-w-semibold); } .app-chip-count { font-variant-numeric: tabular-nums; color: var(--app-ink-faint); } .app-chip[aria-pressed="true"] .app-chip-count, .app-chip-active .app-chip-count { color: inherit; } /* WHICH PILE AM I IN. Added 2026-08-23 with the invoice list's source split. Deliberately NOT another row of chips: chips here are a filter WITHIN a set, and this chooses the set. Two rows of identical pills would read as one seven-way choice where it is really a three-way choice and then a seven-way one, which is the ambiguity the underline removes. */ .app-tabs { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--app-s-4); border-bottom: 1px solid var(--app-line); margin-bottom: var(--app-s-3); } .app-tab { display: inline-flex; align-items: center; gap: var(--app-s-2); padding: var(--app-s-2) 0 calc(var(--app-s-2) + 1px); margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--app-ink-muted); font-size: var(--app-fs-sm); font-weight: var(--app-w-medium); text-decoration: none; white-space: nowrap; } .app-tab:hover { color: var(--app-ink); text-decoration: none; } .app-tab:focus-visible { outline: none; box-shadow: var(--app-focus); } .app-tab-on { color: var(--app-ink); border-bottom-color: var(--app-action); font-weight: var(--app-w-semibold); } .app-tab-count { font-variant-numeric: tabular-nums; font-size: var(--app-fs-xs); color: var(--app-ink-faint); } .app-tab-on .app-tab-count { color: var(--app-ink-muted); } /* FIND ONE. The search sits between the tabs and the status chips because that is the order the narrowing happens in. */ .app-findbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--app-s-2); margin: var(--app-s-3) 0; } .app-findbar-input { flex: 1 1 22rem; min-width: 0; } /* A form that is still there but is no longer the headline. Added 2026-08-23 with the customer account panel. Native
, so it works with no JavaScript and the browser keeps the keyboard behaviour. */ .app-details { border: 1px solid var(--app-line); border-radius: var(--app-r-16); background: var(--app-surface); margin-top: var(--app-s-5); } .app-details-summary { padding: var(--app-s-3) var(--app-s-4); cursor: pointer; font-size: var(--app-fs-sm); font-weight: var(--app-w-semibold); color: var(--app-ink); list-style-position: inside; } .app-details-summary:focus-visible { outline: none; box-shadow: var(--app-focus); border-radius: var(--app-r-16); } .app-details[open] .app-details-summary { border-bottom: 1px solid var(--app-line); } .app-details > .app-form { padding: var(--app-s-4); } /* A long URL and the button that copies it, on one line that wraps sanely on a phone. Added 2026-08-23 with the pay-link share. */ .app-copyrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--app-s-2); } .app-copyrow-link { overflow-wrap: anywhere; min-width: 0; } /* A hint that ends a block rather than labelling the next field. Without it the WhatsApp note butted straight against the "Email it to" label and read as part of it. */ .app-hint-block { margin-bottom: var(--app-s-5); } /* A counter charge nobody finished. Added 2026-08-26 with the till's recovery panel: the amount and the way out on one line, wrapping on a small till. */ .app-pending-charge { display: flex; flex-wrap: wrap; gap: var(--app-s-3); align-items: center; justify-content: space-between; padding: var(--app-s-3) 0; border-bottom: 1px solid var(--app-line); } .app-pending-charge:last-child { border-bottom: 0; padding-bottom: 0; } /* THE CART'S OWN FIELDS. Added 2026-08-26: quantity and price are typed at a till, not only stepped. Narrow, right-aligned and tabular, because they sit in a column of figures a cashier reads down. */ .app-pos-qty { width: 4rem; text-align: center; padding: .25rem .35rem; margin: 0 .35rem; font-variant-numeric: tabular-nums; display: inline-block; } .app-pos-price { width: 7rem; text-align: right; padding: .25rem .5rem; font-variant-numeric: tabular-nums; } /* A price that is not the shelf price says so without a second line of text — the cashier who typed it knows, and the one who takes over the till does not. */ .app-pos-price-changed { border-color: var(--app-warn-edge); font-weight: var(--app-w-semibold); } /* The two bases of a tax return, side by side on a desk and stacked on a phone. Added 2026-08-26 with /tax-report. */ .app-taxpair { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--app-s-4); margin-bottom: var(--app-s-3); } /* A short label-and-figure summary. Deliberately not a table: .app-table sets min-width:40rem for horizontal scrolling, which is right for a wide document list and wrong inside a narrow grid column. */ .app-taxlines { margin: 0; } .app-taxlines > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--app-s-4); padding: var(--app-s-2) 0; border-bottom: 1px solid var(--app-line); } .app-taxlines > div:last-child { border-bottom: 0; padding-bottom: 0; } .app-taxlines dt { color: var(--app-ink-muted); margin: 0; } .app-taxlines dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; } .app-taxlines-strong dt, .app-taxlines-strong dd { color: var(--app-ink); font-weight: var(--app-w-semibold); } /* A QR a customer is about to scan. Bordered and on white whatever the theme, because a scanner reads contrast, and dark mode inverting a QR is how a code stops working at a counter. */ .app-qr { display: block; width: 13.75rem; height: 13.75rem; padding: var(--app-s-3); border: 1px solid var(--app-line); border-radius: var(--app-r-12); background: #ffffff; } /* The logo a merchant has uploaded, shown at the size it will print at so the preview is the answer to "will this look right", not a thumbnail. */ .app-logo-preview { max-height: 3.5rem; max-width: 12.5rem; display: block; padding: var(--app-s-2); border: 1px solid var(--app-line); border-radius: var(--app-r-8); background: var(--app-surface); } /* ========================================================================== 12. EMPTY STATE DESIGN.md 1 and 3: an empty state carries the outcome CTA and, where there is one, the value the user already has. Never a bare "No records found". ========================================================================== */ .app-empty { display: flex; flex-direction: column; align-items: center; gap: var(--app-s-3); padding: var(--app-s-12) var(--app-s-6); text-align: center; } .app-empty-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--app-r-pill); background: var(--app-brand-soft); color: var(--app-brand-soft-ink); } .app-empty-title { font-family: var(--app-font-display); font-size: var(--app-fs-md); font-weight: var(--app-w-display); color: var(--app-ink); } .app-empty-body { max-width: 32rem; font-size: var(--app-fs-base); color: var(--app-ink-muted); } .app-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--app-s-2); margin-top: var(--app-s-2); } /* ========================================================================== 13. MODAL Built on the native element, so Escape, focus trapping and the top layer are the browser's job rather than ours. Opened by a form POST that re-renders the page with the dialog `open`, or by a nonce'd script. ========================================================================== */ .app-modal { width: min(34rem, calc(100vw - var(--app-s-8))); padding: 0; border: none; border-radius: var(--app-r-16); background: var(--app-surface); color: var(--app-ink); box-shadow: var(--app-shadow-3), inset 0 0 0 1px var(--app-line-strong); } .app-modal::backdrop { background: var(--app-scrim); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .app-modal-head { display: flex; align-items: flex-start; gap: var(--app-s-3); padding: var(--app-s-5) var(--app-s-5) var(--app-s-3); } .app-modal-title { font-family: var(--app-font-display); font-size: var(--app-fs-lg); font-weight: var(--app-w-display-strong); letter-spacing: var(--app-track-tight); line-height: var(--app-lh-tight); color: var(--app-ink); } .app-modal-body { padding: 0 var(--app-s-5) var(--app-s-5); font-size: var(--app-fs-base); color: var(--app-ink-muted); display: flex; flex-direction: column; gap: var(--app-s-4); } .app-modal-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--app-s-2); padding: var(--app-s-5) var(--app-s-6); border-top: 1px solid var(--app-line); background: var(--app-surface-2); border-radius: 0 0 var(--app-r-16) var(--app-r-16); } /* ========================================================================== 14. FLASH MESSAGES Rendered by layout.html from the engine's $flash list. $flash is TEMPLATE-ONLY - write with flash("...") in a server block, read only in the template (SKILL.md section 6). ========================================================================== */ .app-flashes { position: fixed; right: var(--app-inset); bottom: var(--app-inset); z-index: var(--app-z-flash); display: flex; flex-direction: column; gap: var(--app-s-2); width: min(24rem, calc(100vw - var(--app-inset) * 2)); } .app-flash { display: flex; align-items: flex-start; gap: var(--app-s-3); padding: var(--app-s-3) var(--app-s-4); border-radius: var(--app-r-12); background: var(--app-surface); color: var(--app-ink); font-size: var(--app-fs-base); box-shadow: var(--app-shadow-2), inset 0 0 0 1px var(--app-line-strong); } /* The tone is a dot, not a coloured slab down one side (plans/87 ruling 4). */ .app-flash:not(.co-testbanner)::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; margin-top: 0.5rem; border-radius: 50%; background: var(--app-st-edge, var(--app-ok-edge)); } .app-flash-ok { --app-st-edge: var(--app-ok-edge); } .app-flash-bad { --app-st-edge: var(--app-bad-edge); } .app-flash-info { --app-st-edge: var(--app-info-edge); } /* ========================================================================== 15. PAGINATION ========================================================================== */ .app-pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--app-s-2); } .app-pager-info { margin-right: auto; font-size: var(--app-fs-xs); font-variant-numeric: tabular-nums; color: var(--app-ink-muted); } .app-pager-link { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; min-height: 2rem; padding: 0 var(--app-s-2); border: 1px solid var(--app-field-line); border-radius: var(--app-r-8); background: var(--app-surface); color: var(--app-ink); font-size: var(--app-fs-xs); font-weight: var(--app-w-medium); font-variant-numeric: tabular-nums; text-decoration: none; } .app-pager-link:hover { background: var(--app-surface-3); color: var(--app-ink); text-decoration: none; } .app-pager-link[aria-current="page"] { border-color: var(--app-brand); background: var(--app-brand); color: var(--app-brand-ink); font-weight: var(--app-w-semibold); } .app-pager-link[aria-disabled="true"] { opacity: 0.45; pointer-events: none; } /* ========================================================================== 16. MONEY AND NUMBERS plans/02-design-system.md section 5 is the rule. This is the rendering. Every number in this application is tabular. No exceptions. ========================================================================== */ .app-num { font-family: var(--app-font-sans); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; white-space: nowrap; } .app-money { font-family: var(--app-font-sans); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; font-weight: var(--app-w-semibold); white-space: nowrap; color: var(--app-ink); } /* The currency code / symbol, always lighter than the figure it qualifies. */ .app-money-cur { margin-right: 0.35em; font-weight: var(--app-w-medium); color: var(--app-ink-muted); } /* A debit, a fee, a reversal. Never used for "less than expected". */ .app-money-neg { color: var(--app-bad-ink); } .app-money-pos { color: var(--app-ok-ink); } /* The one big number on an invoice or a statement. */ .app-amount { font-family: var(--app-font-sans); font-size: var(--app-fs-3xl); font-weight: var(--app-w-bold); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: var(--app-track-tight); line-height: var(--app-lh-tight); color: var(--app-ink); } .app-amount .app-money-cur { font-size: var(--app-fs-lg); } /* An identifier a human will read aloud or type: invoice number, payment reference, ledger entry id. Mono, so 0/O and 1/l cannot be confused. */ .app-ref { font-family: var(--app-font-mono); font-size: 0.9375em; font-weight: var(--app-w-medium); letter-spacing: 0.01em; color: var(--app-ink); /* A REFERENCE IS READ ALOUD DOWN A PHONE, so it does not wrap. Added 2026-08-23: once the invoice list defaulted to the documents, the customer column filled with real names, the number column narrowed to suit, and DH-00011 broke across two lines as "DH-" and "00011". A merchant reading that to a customer reads two things. */ white-space: nowrap; } /* ========================================================================== 17. SMALL SHARED PIECES ========================================================================== */ .app-meta { font-size: var(--app-fs-xs); color: var(--app-ink-muted); } .app-divider { height: 1px; border: none; margin: 0; background: var(--app-line); } .app-stack { display: flex; flex-direction: column; gap: var(--app-s-4); } /* A divider separates two things. A stack that ends on one — the shape a `{{ for }}` loop produces when it writes a rule after every item — is a line ruled under nothing, hard against the card's bottom padding. */ .app-stack > .app-divider:last-child { display: none; } /* The gap above owns the spacing inside a stack, so the blocks that carry their own margin-block stop adding it on top — 16px of gap plus 16px of margin is 32px, and only one of the two was asked for. */ .app-stack > .app-card, .app-stack > .app-card-grid, .app-stack > .app-grid-2, .app-stack > .app-stats, .app-stack > .app-table-wrap { margin-block: 0; } /* A BULLETED LIST THAT IS PROSE, not navigation. The reset in section 4 zeroes `ul` padding for the nav lists, which left the one list in the application that is actually body copy — /settings/branding, "where it shows up" — with its markers under the card's own padding and its lines run together. The indent and the leading are put back here, once. NOT display:flex. A flex item is not a list item, and the markers vanish. */ .app-list { margin: 0; padding-left: var(--app-s-5); font-size: var(--app-fs-base); line-height: var(--app-lh-normal); color: var(--app-ink-muted); } .app-list > li + li { margin-top: var(--app-s-2); } .app-list > li::marker { color: var(--app-ink-faint); } .app-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--app-s-3); } /* A definition list used for read-only detail panels. */ .app-dl { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: var(--app-s-3) var(--app-s-5); font-size: var(--app-fs-base); } .app-dl dt { color: var(--app-ink-muted); } .app-dl dd { margin: 0; color: var(--app-ink); } /* A list of steps or facts that wants a rule between its rows. */ .app-dl-rows { row-gap: 0; } .app-dl-rows dt, .app-dl-rows dd { display: flex; align-items: center; gap: var(--app-s-3); padding: var(--app-s-3) 0; border-top: 1px solid var(--app-line); } .app-dl-rows dt:first-of-type, .app-dl-rows dd:first-of-type { border-top: 0; } /* Goal Gradient (DESIGN.md 2). Never rendered at 0 - the server must count what the user already did. See plans/02-design-system.md section 7. */ .app-progress { display: flex; flex-direction: column; gap: var(--app-s-2); } .app-progress-track { height: 0.5rem; border-radius: var(--app-r-pill); background: var(--app-surface-3); overflow: hidden; } .app-progress-fill { height: 100%; border-radius: var(--app-r-pill); background: var(--app-brand); } .app-progress-label { display: flex; gap: var(--app-s-3); font-size: var(--app-fs-xs); font-variant-numeric: tabular-nums; color: var(--app-ink-muted); } .app-progress-remaining { margin-left: auto; } /* ========================================================================== 18. MOTION AND PRINT ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* The only !important declarations in this file are the two above, which is what the reduced-motion query requires, and the print overrides below. DO NOT add another one. */ @media print { .app-side, .app-topbar, .app-scrim, .app-flashes, .app-skip { display: none !important; } body { background: #ffffff; } .app-main { padding: 0 !important; } .app-card, .app-table-wrap { box-shadow: none; border: 1px solid var(--app-line-strong); } .mk-nav-wrap, .mk-footer, .mk-skip { display: none !important; } } /* ========================================================================== 19. THE PUBLIC SITE: A CLEAR LEDGER Everything a signed-out visitor sees: the landing page, sign in, sign up, forgot, reset and confirm. Not in plans/02-design-system.md, which describes the signed-in application only; the rulings live in plans/92-public-site.md. REWRITTEN 2026-10-04, replacing the 2026-10-03 "cloth" world wholesale ("I feel like it went more uglier. I am looking for a trustworthy look that provides premium trust and ease of using feeling."). Cream paper, an indigo weave and a striped selvedge are gone. The standing bar is PRODUCT.md's: Stripe-grade finish, Wise's plain money language, Mercury's banker-calm. THE WORLD. A statement, read in daylight: a white page ruled with hairlines, one ink, one teal that means "this is matched, this is paid", and a single deep-teal field that appears where the page makes its two promises (how the money moves, and the call to act). Figures are tabular. Depth is a hairline and a soft two-layer shadow, never a glow, a texture or a stripe. FOUR RULES HOLD THIS SECTION TOGETHER. 1. Every colour is a var() from section 2.14. Section 2.9d forbids a colour literal below section 3, and a new shade means a new token up there. 2. Nothing in here reads an --app- token, and NO RULE IN THIS SECTION MENTIONS DARK MODE. Section 3 reassigns the --mk- tokens, so every rule below follows the theme without being touched. 3. A DEEP FIELD IS BUILT FROM --mk-deep*, NEVER FROM --mk-ink / --mk-bg. Ink and bg swap in the dark theme; deep does not. The 2026-10-03 version built its dark bands and the sign-in panel from ink with a hardcoded white label, so in the dark theme they turned pale grey with white text on them (lint L33 is the guard). If a surface must stay dark, it takes a deep token. 4. NO HEX, NO rgba(). A tint is color-mix() over a token. ========================================================================== */ .mk-page { background: var(--mk-bg); color: var(--mk-ink); font-family: var(--app-font-sans); -webkit-font-smoothing: antialiased; accent-color: var(--mk-accent); caret-color: var(--mk-accent); } /* The parts the page did not draw. The scrollbar belongs to the root, so the rule reaches it through :has(); the selection is the teal tint. */ :root:has(.mk-page) { scrollbar-color: var(--mk-line-strong) var(--mk-bg); } .mk-page ::selection { background: var(--mk-accent-soft); color: var(--mk-ink); } .mk-page a { text-underline-offset: 0.2em; } .mk-skip { position: absolute; left: -9999px; } .mk-skip:focus { left: 1rem; top: 1rem; z-index: var(--app-z-flash); background: var(--mk-ink); color: var(--mk-bg); padding: 0.6rem 1rem; border-radius: var(--mk-radius); } .mk-wrap { max-width: var(--mk-wrap); margin-inline: auto; padding-inline: 1.5rem; } /* Screen-reader-only text. The pricing ticks say "included" in a shape and a colour; this says it in words. */ .mk-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* The glyphs from the icon component carry app-nav-icon's size; on this site they are sized by whoever places them. */ .mk-page svg.app-nav-icon { width: 1em; height: 1em; flex: none; } /* ---- 19.1 The navigation -------------------------------------------------- */ .mk-nav-wrap { position: sticky; top: 0; z-index: var(--app-z-topbar); background: var(--mk-bg); border-bottom: 1px solid var(--mk-line); } .mk-nav { max-width: var(--mk-wrap); margin-inline: auto; display: flex; align-items: center; gap: 1rem; height: 4rem; padding-inline: 1.5rem; } .mk-brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--mk-ink); } .mk-mark { display: block; flex: none; color: var(--mk-ink); } /* ☠️ AN UPLOADED LOGO IS WHATEVER SIZE ITS FILE IS. The reset's `img { max-width: 100% }` bounds it to the container's width and nothing bounds its HEIGHT, so a 1024px upload once made the header 1024px tall. Bounded on BOTH axes, and `contain` rather than `cover`: a logo is a drawing with edges that mean something, and cropping a wordmark cuts the word in half. The aspect ratio is the file's own. */ .mk-mark-img { display: block; flex: none; width: auto; height: 30px; max-width: 9rem; object-fit: contain; } .mk-brand-word { font-family: var(--mk-font-head); font-weight: 700; font-size: 1rem; letter-spacing: -0.015em; } .mk-nav-links { display: flex; gap: 0.25rem; margin-inline: auto; } .mk-nav-links a { color: var(--mk-mute); text-decoration: none; font-size: 0.925rem; font-weight: 500; padding: 0.45rem 0.8rem; border-radius: var(--mk-radius); transition: background var(--app-fast) var(--app-ease), color var(--app-fast) var(--app-ease); } .mk-nav-links a:hover { color: var(--mk-ink); background: var(--mk-bg-alt); } .mk-nav-actions { display: flex; align-items: center; gap: 0.5rem; } .mk-link-quiet { color: var(--mk-ink); text-decoration: none; font-size: 0.925rem; font-weight: 500; padding: 0.45rem 0.8rem; border-radius: var(--mk-radius); } .mk-link-quiet:hover { background: var(--mk-bg-alt); } /* The theme toggle in the public navbar. A