/* css/tokens.css */ /* Nexus design tokens (ADR-011/013). Themes override these custom properties in @layer theme; components only ever read tokens. */ @layer reset, tokens, core, components, app, theme, overrides; @font-face { font-family: "Inter"; src: url("/vendor/inter-5.3.0.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } /* The themes' fonts (ADR-074), vendored: each downloads only on a page whose look uses it. */ @font-face { font-family: "Instrument Serif"; src: url("/vendor/instrument-serif-5.3.0.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Space Grotesk"; src: url("/vendor/space-grotesk-5.3.0.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("/vendor/jetbrains-mono-5.3.0.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; } @layer tokens { :root { color-scheme: light dark; /* Typography */ --nx-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --nx-font-serif: ui-serif, Georgia, "Times New Roman", serif; --nx-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --nx-font-heading: var(--nx-font-sans); --nx-text-xs: .75rem; --nx-text-sm: .875rem; --nx-text-md: 1rem; --nx-text-lg: 1.125rem; --nx-text-xl: 1.375rem; --nx-text-2xl: 1.75rem; --nx-text-3xl: clamp(2rem, 1.5rem + 2vw, 2.75rem); --nx-leading: 1.55; --nx-leading-tight: 1.2; --nx-weight-regular: 400; --nx-weight-medium: 500; --nx-weight-bold: 650; --nx-tracking-caps: .06em; /* Headings' weight and tracking: a theme's type scale sets them with the heading steps (ADR-074). */ --nx-heading-weight: var(--nx-weight-bold); --nx-heading-tracking: normal; /* Small headings (h3, h4, card titles): the heading font unless a type scale says otherwise (editorial: the body font, bold). */ --nx-font-subheading: var(--nx-font-heading); --nx-subheading-weight: var(--nx-heading-weight); /* Type roles: what a piece of text is, not its size. A field's name, the help under it, a section's heading. */ --nx-type-label-size: var(--nx-text-sm); --nx-type-label-weight: var(--nx-weight-medium); --nx-type-help-size: var(--nx-text-xs); --nx-type-help-weight: var(--nx-weight-regular); --nx-type-section-size: var(--nx-text-xs); --nx-type-section-weight: var(--nx-weight-medium); --nx-type-section-tracking: var(--nx-tracking-caps); /* Space (4px grid) */ --nx-space-1: .25rem; --nx-space-2: .5rem; --nx-space-3: .75rem; --nx-space-4: 1rem; --nx-space-5: 1.25rem; --nx-space-6: 1.5rem; --nx-space-8: 2rem; --nx-space-10: 2.5rem; --nx-space-12: 3rem; --nx-space-16: 4rem; /* Shape and depth */ --nx-radius-sm: 6px; --nx-radius: 10px; --nx-radius-lg: 16px; --nx-radius-pill: 999px; --nx-border-width: 1px; --nx-shadow-sm: 0 1px 2px rgb(0 0 0 / .06); --nx-shadow: 0 2px 8px rgb(0 0 0 / .08), 0 1px 2px rgb(0 0 0 / .06); --nx-shadow-lg: 0 16px 48px rgb(0 0 0 / .18); /* A control's own shadow: none, but a hard-edged theme gives buttons one (ADR-074). */ --nx-shadow-control: none; /* A status badge's outline: none, but an outlined theme draws one in the status colour, so meaning isn't carried by a tint alone. */ --nx-status-outline: transparent; /* A theme's texture under the page (ADR-074): gradients only. */ --nx-texture: none; /* The focus ring (a theme may thicken it, ADR-074). */ --nx-focus-width: 3px; --nx-focus-offset: 2px; /* Motion (DS12, ADR-068). Durations are scaled by the person's speed (and zero with motion off); curves follow the animation principles. Stylesheets use these, never their own times or curves. */ --nx-motion-scale: 1; /* A theme's personality (ADR-074): tempo and travel only ever reduce (0 to 1); the person's speed and level still apply on top. */ --nx-motion-tempo: 1; --nx-motion-travel: 1; --nx-duration-instant: calc(60ms * var(--nx-motion-scale) * var(--nx-motion-tempo)); --nx-duration-fast: calc(120ms * var(--nx-motion-scale) * var(--nx-motion-tempo)); --nx-duration: calc(200ms * var(--nx-motion-scale) * var(--nx-motion-tempo)); --nx-duration-slow: calc(320ms * var(--nx-motion-scale) * var(--nx-motion-tempo)); --nx-duration-slower: calc(480ms * var(--nx-motion-scale) * var(--nx-motion-tempo)); --nx-duration-linger: calc(1600ms * var(--nx-motion-scale) * var(--nx-motion-tempo)); /* a live change's wash */ /* Arrives fast and settles (the default). */ --nx-ease: cubic-bezier(.2, .7, .2, 1); --nx-ease-enter: cubic-bezier(.16, 1, .3, 1); /* Leaves: gathers speed as it goes. */ --nx-ease-exit: cubic-bezier(.7, 0, .84, 0); /* Place to place: slow in, fast middle, slow out. */ --nx-ease-in-out: cubic-bezier(.65, 0, .35, 1); /* Anticipation: draws back a little before it goes. */ --nx-ease-anticipate: cubic-bezier(.36, 0, .66, -.56); /* Follow-through: carries a little past, then settles. */ --nx-ease-follow: cubic-bezier(.34, 1.56, .64, 1); /* How far things travel, and how small they start. */ --nx-motion-shift: calc(12px * var(--nx-motion-travel)); --nx-motion-grow: calc(1 - .04 * var(--nx-motion-travel)); /* Layout */ --nx-content-width: 72rem; --nx-sidebar-width: 15rem; --nx-header-height: 3.5rem; --nx-tap-target: 44px; /* One height for every control (text, number, money, date, select, link picker, read-only value), so fields in a row line up (07 A1). Compact density shrinks it with the tap target. */ --nx-control-h: var(--nx-tap-target); --nx-z-sticky: 10; --nx-z-overlay: 50; --nx-z-toast: 60; /* Colour (light) — all text pairs meet WCAG 2.2 AA (4.5:1). */ --nx-color-bg: #f7f7f5; --nx-color-surface: #ffffff; --nx-color-surface-2: #f0f0ed; /* Surface roles: inputs sit in the page, menus above it, dialogs over it. Derived from the surface, so a theme's surface carries through. */ --nx-color-surface-sunken: var(--nx-color-surface); --nx-color-surface-raised: var(--nx-color-surface); --nx-color-surface-overlay: var(--nx-color-surface); --nx-color-text: #1b1b19; --nx-color-text-muted: #55554f; --nx-color-border: #dcdcd6; --nx-color-border-strong: #8a8a82; --nx-color-accent: #2d4bb8; --nx-color-accent-hover: #233c96; --nx-color-accent-contrast: #ffffff; --nx-color-accent-soft: #e6ebfa; --nx-color-focus: #2d4bb8; --nx-color-danger: #a4221f; --nx-color-danger-contrast: #ffffff; --nx-color-danger-soft: #fbe9e8; --nx-color-success: #1d6b37; --nx-color-success-soft: #e5f4ea; --nx-color-warning: #8a5300; --nx-color-warning-soft: #fdf1dc; --nx-color-info: #1f5a94; --nx-color-info-soft: #e5eff9; /* An agent's work (07 §5.5): violet, beside people's accent blue. */ --nx-color-agent: #6b3fc4; --nx-color-agent-soft: #efe8fb; --nx-color-agent-contrast: #ffffff; --nx-color-sold: #a4221f; --nx-color-overlay: rgb(20 20 18 / .45); /* Placeholders: a step from the second surface toward the text, so a theme's surfaces carry through (ADR-074). */ --nx-color-skeleton: color-mix(in srgb, var(--nx-color-text) 9%, var(--nx-color-surface-2)); } /* Dark palette: automatic, or forced with data-theme="dark". */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --nx-color-bg: #121211; --nx-color-surface: #1b1b19; --nx-color-surface-2: #242421; --nx-color-surface-sunken: color-mix(in srgb, var(--nx-color-surface) 50%, var(--nx-color-bg)); --nx-color-surface-raised: var(--nx-color-surface-2); --nx-color-surface-overlay: color-mix(in srgb, var(--nx-color-surface-2) 94%, #ffffff); --nx-color-text: #f2f2ee; --nx-color-text-muted: #b3b3aa; --nx-color-border: #34342f; --nx-color-border-strong: #727269; --nx-color-accent: #8ea6ff; --nx-color-accent-hover: #adc0ff; --nx-color-accent-contrast: #0e1433; --nx-color-accent-soft: #1f2748; --nx-color-focus: #8ea6ff; --nx-color-danger: #ff8f88; --nx-color-danger-contrast: #2b0a08; --nx-color-danger-soft: #3a1a18; --nx-color-success: #7fd49a; --nx-color-success-soft: #16301f; --nx-color-warning: #f0bd6a; --nx-color-warning-soft: #33250f; --nx-color-info: #8cc0f5; --nx-color-info-soft: #152a40; --nx-color-agent: #c3a6ff; --nx-color-agent-soft: #2a2044; --nx-color-agent-contrast: #1d1235; --nx-color-sold: #ff8f88; --nx-color-overlay: rgb(0 0 0 / .6); --nx-color-skeleton: color-mix(in srgb, var(--nx-color-text) 12%, var(--nx-color-surface-2)); --nx-shadow: 0 2px 8px rgb(0 0 0 / .4); --nx-shadow-lg: 0 16px 48px rgb(0 0 0 / .55); } } :root[data-theme="dark"] { color-scheme: dark; --nx-color-bg: #121211; --nx-color-surface: #1b1b19; --nx-color-surface-2: #242421; --nx-color-surface-sunken: color-mix(in srgb, var(--nx-color-surface) 50%, var(--nx-color-bg)); --nx-color-surface-raised: var(--nx-color-surface-2); --nx-color-surface-overlay: color-mix(in srgb, var(--nx-color-surface-2) 94%, #ffffff); --nx-color-text: #f2f2ee; --nx-color-text-muted: #b3b3aa; --nx-color-border: #34342f; --nx-color-border-strong: #727269; --nx-color-accent: #8ea6ff; --nx-color-accent-hover: #adc0ff; --nx-color-accent-contrast: #0e1433; --nx-color-accent-soft: #1f2748; --nx-color-focus: #8ea6ff; --nx-color-danger: #ff8f88; --nx-color-danger-contrast: #2b0a08; --nx-color-danger-soft: #3a1a18; --nx-color-success: #7fd49a; --nx-color-success-soft: #16301f; --nx-color-warning: #f0bd6a; --nx-color-warning-soft: #33250f; --nx-color-info: #8cc0f5; --nx-color-info-soft: #152a40; --nx-color-agent: #c3a6ff; --nx-color-agent-soft: #2a2044; --nx-color-agent-contrast: #1d1235; --nx-color-sold: #ff8f88; --nx-color-overlay: rgb(0 0 0 / .6); --nx-color-skeleton: color-mix(in srgb, var(--nx-color-text) 12%, var(--nx-color-surface-2)); } :root[data-theme="light"] { color-scheme: light; } } /* Motion settings (DS12, ADR-068), written on : the speed scales every duration; Gentle keeps fades and drops movement; None (and the device's Reduce motion, in base.css) changes at once. */ @layer tokens { :root[data-nx-speed="relaxed"] { --nx-motion-scale: 1.4; } :root[data-nx-speed="brisk"] { --nx-motion-scale: .65; } :root[data-nx-motion="gentle"] { --nx-motion-shift: 0px; --nx-motion-grow: 1; --nx-ease-follow: var(--nx-ease); --nx-ease-anticipate: var(--nx-ease-exit); } :root[data-nx-motion="off"] { --nx-motion-scale: 0; --nx-motion-shift: 0px; --nx-motion-grow: 1; } @media (prefers-reduced-motion: reduce) { :root, :root[data-nx-speed], :root[data-nx-motion] { --nx-motion-scale: 0; --nx-motion-shift: 0px; --nx-motion-grow: 1; } } } /* css/base.css */ @layer reset { *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } img, picture, svg, video { max-width: 100%; display: block; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } :where([hidden]) { display: none !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } /* motion-lint: keep */ } /* Motion set to None (DS12) is the same as the device's Reduce motion. */ :root[data-nx-motion="off"] *, :root[data-nx-motion="off"] *::before, :root[data-nx-motion="off"] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } /* motion-lint: keep */ } @layer core { /* No rubber-band bounce, pull-to-refresh or swipe-back from the page itself (08 §4); strips that scroll sideways contain their own. */ html { scroll-padding-top: calc(var(--nx-header-height) + var(--nx-space-4)); overscroll-behavior: none; } body { overflow-x: clip; } body { min-height: 100dvh; font-family: var(--nx-font-sans); font-size: var(--nx-text-md); line-height: var(--nx-leading); background: var(--nx-texture), var(--nx-color-bg); color: var(--nx-color-text); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--nx-font-heading); line-height: var(--nx-leading-tight); font-weight: var(--nx-heading-weight); letter-spacing: var(--nx-heading-tracking); text-wrap: balance; } h1 { font-size: var(--nx-text-2xl); } h2 { font-size: var(--nx-text-xl); } h3 { font-size: var(--nx-text-lg); } h3, h4 { font-family: var(--nx-font-subheading); font-weight: var(--nx-subheading-weight); letter-spacing: normal; } /* Controls a browser draws (sliders, checkboxes) in the theme's accent. */ :root { accent-color: var(--nx-color-accent); } p { text-wrap: pretty; } a { color: var(--nx-color-accent); text-underline-offset: .18em; text-decoration-thickness: 1px; } a:hover { color: var(--nx-color-accent-hover); } code, kbd, pre { font-family: var(--nx-font-mono); font-size: .92em; } pre { overflow: auto; padding: var(--nx-space-3); background: var(--nx-color-surface-2); border-radius: var(--nx-radius-sm); } kbd { padding: 0 .35em; border: 1px solid var(--nx-color-border-strong); border-bottom-width: 2px; border-radius: 4px; font-size: .8em; } hr { border: 0; border-top: 1px solid var(--nx-color-border); margin: var(--nx-space-6) 0; } :focus-visible { outline: var(--nx-focus-width) solid var(--nx-color-focus); outline-offset: var(--nx-focus-offset); border-radius: 2px; } ::selection { background: var(--nx-color-accent-soft); } .nx-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .nx-skip-link { position: absolute; left: var(--nx-space-2); top: -4rem; z-index: 100; padding: var(--nx-space-2) var(--nx-space-4); background: var(--nx-color-surface); border-radius: var(--nx-radius-sm); box-shadow: var(--nx-shadow); } .nx-skip-link:focus { top: var(--nx-space-2); } .nx-muted { color: var(--nx-color-text-muted); } .nx-stack > * + * { margin-top: var(--nx-space-4); } .nx-stack-sm > * + * { margin-top: var(--nx-space-2); } .nx-stack-lg > * + * { margin-top: var(--nx-space-8); } .nx-row { display: flex; flex-wrap: wrap; gap: var(--nx-space-3); align-items: center; } .nx-row-between { display: flex; flex-wrap: wrap; gap: var(--nx-space-3); align-items: center; justify-content: space-between; } .nx-grid { display: grid; gap: var(--nx-space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); } .nx-container { width: min(100% - 2 * var(--nx-space-4), var(--nx-content-width)); margin-inline: auto; } .nx-num { font-variant-numeric: tabular-nums; } .nx-ok { color: var(--nx-color-success); } .nx-bad { color: var(--nx-color-danger); } .nx-status { display: grid; grid-template-columns: max-content 1fr; gap: var(--nx-space-2) var(--nx-space-4); } .nx-status dt { color: var(--nx-color-text-muted); } } /* css/components.css */ @layer components { /* Button ---------------------------------------------------------- */ .nx-btn { --_bg: var(--nx-color-surface); --_fg: var(--nx-color-text); --_bd: var(--nx-color-border-strong); display: inline-flex; align-items: center; justify-content: center; gap: var(--nx-space-2); min-height: var(--nx-tap-target); padding: 0 var(--nx-space-4); border: var(--nx-border-width) solid var(--_bd); border-radius: var(--nx-radius-sm); background: var(--_bg); color: var(--_fg); font-weight: var(--nx-weight-medium); font-size: var(--nx-text-sm); text-decoration: none; white-space: nowrap; line-height: 1; transition: background var(--nx-duration-fast) var(--nx-ease), border-color var(--nx-duration-fast) var(--nx-ease), transform var(--nx-duration-fast) var(--nx-ease); box-shadow: var(--nx-shadow-control); /* a theme's hard edge (ADR-074) */ } .nx-btn:hover { background: var(--nx-color-surface-2); color: var(--_fg); } .nx-btn:active { transform: translateY(1px); } .nx-btn[disabled], .nx-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; } .nx-btn--primary { --_bg: var(--nx-color-accent); --_fg: var(--nx-color-accent-contrast); --_bd: var(--nx-color-accent); } .nx-btn--primary:hover { background: var(--nx-color-accent-hover); border-color: var(--nx-color-accent-hover); } .nx-btn--danger { --_bg: var(--nx-color-danger); --_fg: var(--nx-color-danger-contrast); --_bd: var(--nx-color-danger); } .nx-btn--danger:hover { background: var(--nx-color-danger); filter: brightness(.92); } .nx-btn--ghost { --_bg: transparent; --_bd: transparent; box-shadow: none; } .nx-btn--sm { min-height: 2rem; padding: 0 var(--nx-space-3); } .nx-btn--lg { min-height: 3.25rem; padding: 0 var(--nx-space-6); font-size: var(--nx-text-md); } .nx-btn--block { width: 100%; } .nx-btn--icon { padding: 0; width: var(--nx-tap-target); } .nx-btn .htmx-indicator { display: none; } .htmx-request .nx-btn .htmx-indicator, .nx-btn.htmx-request .htmx-indicator, form.htmx-request .nx-btn[type=submit] .htmx-indicator { display: inline-block; } .nx-btn .htmx-indicator { width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: nx-spin .7s linear infinite; } /* motion-lint: keep: a spinner turns at its own speed */ @keyframes nx-spin { to { transform: rotate(360deg); } } /* Fields (07 D8, A1) ------------------------------------------------ One structure for every field (components.FieldFrame): a label row, a control row and a help row. Every control is --nx-control-h tall. In a grid of fields (.nx-form-grid, a record section) each field shares the grid's three rows (subgrid), so controls in a row line up however long their labels or help are. */ .nx-field { position: relative; display: grid; grid-template-rows: auto auto auto; align-content: start; min-width: 0; } .nx-field + .nx-field { margin-top: var(--nx-space-4); } .nx-field > .nx-f__label { grid-row: 1; align-self: end; padding-bottom: var(--nx-space-1); } .nx-field > .nx-f__label:empty { padding: 0; } .nx-field > .nx-f__control { grid-row: 2; position: relative; display: grid; min-width: 0; } .nx-field > .nx-f__help { grid-row: 3; min-width: 0; padding-top: var(--nx-space-1); } .nx-label, .nx-f__label { font-size: var(--nx-type-label-size); font-weight: var(--nx-type-label-weight); } .nx-label .nx-req, .nx-check .nx-req { color: var(--nx-color-danger); margin-left: .15em; } .nx-help, .nx-f__help { font-size: var(--nx-type-help-size); font-weight: var(--nx-type-help-weight); color: var(--nx-color-text-muted); } .nx-f__help > p { margin: 0; overflow-wrap: anywhere; } .nx-error { font-size: var(--nx-type-label-size); color: var(--nx-color-danger); font-weight: var(--nx-weight-medium); } .nx-need { display: inline-block; width: .45rem; height: .45rem; margin-left: .35em; border-radius: 50%; background: var(--nx-color-warning); vertical-align: middle; } .nx-f__needed { color: var(--nx-color-warning); } .nx-section-title { font-size: var(--nx-type-section-size); font-weight: var(--nx-type-section-weight); letter-spacing: var(--nx-type-section-tracking); text-transform: uppercase; color: var(--nx-color-text-muted); } /* Controls: one height for text, number, date, select, affixed and read-only values (selects drawn without the platform's own box, which sizes itself). */ .nx-input, .nx-select, .nx-textarea { width: 100%; min-width: 0; padding: var(--nx-space-2) var(--nx-space-3); border: var(--nx-border-width) solid var(--nx-color-border-strong); border-radius: var(--nx-radius-sm); background-color: var(--nx-color-surface-sunken); color: var(--nx-color-text); } .nx-input:not(textarea), .nx-select:not([multiple], [size]) { height: var(--nx-control-h); padding-block: 0; } .nx-input[type="file"] { height: auto; min-height: var(--nx-control-h); padding-block: calc((var(--nx-control-h) - 2px - 1.75rem) / 2); } .nx-input[type="file"]::file-selector-button { height: 1.75rem; margin-right: var(--nx-space-3); padding: 0 var(--nx-space-3); border: var(--nx-border-width) solid var(--nx-color-border-strong); border-radius: var(--nx-radius-sm); background: var(--nx-color-surface-2); color: var(--nx-color-text); font: inherit; font-size: var(--nx-text-sm); } .nx-select:not([multiple], [size]) { appearance: none; padding-right: 2rem; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 1rem) 52%, calc(100% - .7rem) 52%; background-size: .3rem .3rem; background-repeat: no-repeat; } .nx-textarea, textarea.nx-input { min-height: 6rem; resize: vertical; } .nx-field .nx-textarea { min-height: 5.5rem; } .nx-input:focus-visible, .nx-select:focus-visible, .nx-textarea:focus-visible { outline: 3px solid var(--nx-color-focus); outline-offset: 0; border-color: var(--nx-color-focus); } .nx-input[aria-invalid="true"], .nx-select[aria-invalid="true"], .nx-textarea[aria-invalid="true"] { border-color: var(--nx-color-danger); } .nx-check { display: flex; align-items: center; gap: var(--nx-space-2); min-height: var(--nx-control-h); } .nx-check input { width: 1.2rem; height: 1.2rem; accent-color: var(--nx-color-accent); } .nx-toggle { display: flex; align-items: center; gap: var(--nx-space-2); height: var(--nx-control-h); } .nx-toggle input { width: 1.2rem; height: 1.2rem; accent-color: var(--nx-color-accent); } .nx-affix { display: flex; align-items: center; height: var(--nx-control-h); min-width: 0; border: var(--nx-border-width) solid var(--nx-color-border-strong); border-radius: var(--nx-radius-sm); background: var(--nx-color-surface-sunken); } .nx-affix:focus-within { outline: 3px solid var(--nx-color-focus); border-color: var(--nx-color-focus); } .nx-affix .nx-input { flex: 1; height: 100%; border: 0; background: transparent; outline: none; } .nx-affix__p { padding-left: var(--nx-space-3); color: var(--nx-color-text-muted); } .nx-affix__s { padding-right: var(--nx-space-3); color: var(--nx-color-text-muted); font-size: var(--nx-text-sm); } /* A value that can't be changed here: the control's size, a dashed edge, and long values (emails, addresses, ids) wrap inside it. */ .nx-f__ro { display: flex; align-items: center; gap: var(--nx-space-2); min-width: 0; min-height: var(--nx-control-h); margin: 0; padding: var(--nx-space-1) var(--nx-space-3); border: 1px dashed var(--nx-color-border); border-radius: var(--nx-radius-sm); color: var(--nx-color-text-muted); overflow-wrap: anywhere; } /* On a form a read-only value keeps the control's height: one line, cut short with an ellipsis. */ .nx-f__ro { white-space: nowrap; overflow: hidden; } output.nx-f__ro { display: block; line-height: calc(var(--nx-control-h) - 2px - 2 * var(--nx-space-1)); text-overflow: ellipsis; } output.nx-f__ro > * { line-height: var(--nx-leading); vertical-align: middle; } .nx-f__ro > span:not(.nx-link-btn) { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .nx-f__ro .nx-link-btn { flex: none; margin-left: auto; overflow-wrap: normal; } /* A panel's fact (Value): the whole value, wrapped inside its box. */ .nx-f--value .nx-f__ro { display: block; padding-block: calc((var(--nx-control-h) - 2px - 1lh) / 2); color: var(--nx-color-text); white-space: normal; overflow: visible; } .nx-f--value .nx-f__ro > * { white-space: normal; } .nx-f--value address { font-style: normal; } .nx-f--total .nx-f__ro { font-weight: var(--nx-weight-bold); } .nx-values { margin: 0; } /* A link to another record (a record's link field): the linked record as a chip, and a search to change it. The control's height too. */ .nx-link { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-1); min-height: var(--nx-control-h); padding: var(--nx-space-1); border: var(--nx-border-width) solid var(--nx-color-border-strong); border-radius: var(--nx-radius-sm); background: var(--nx-color-surface-sunken); } .nx-link:focus-within { outline: 3px solid var(--nx-color-focus); border-color: var(--nx-color-focus); } .nx-link__chip { display: inline-flex; align-items: center; gap: var(--nx-space-1); max-width: 100%; min-width: 0; padding: 0 var(--nx-space-1) 0 var(--nx-space-2); min-height: calc(var(--nx-control-h) - .6rem); border-radius: var(--nx-radius-sm); background: var(--nx-color-surface-2); } .nx-link__chip .nx-thumb { width: 1.6rem; height: 2rem; } .nx-link__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; } .nx-icon-btn { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 0; border-radius: var(--nx-radius-sm); background: none; color: var(--nx-color-text-muted); cursor: pointer; } .nx-icon-btn:hover { background: var(--nx-color-border); color: var(--nx-color-text); } .nx-link__q { flex: 1; min-width: 7rem; height: calc(var(--nx-control-h) - .6rem); padding: 0 var(--nx-space-2); border: 0; background: transparent; outline: none; color: inherit; } .nx-link__chip ~ .nx-link__q:not(:focus)::placeholder { color: transparent; } .nx-f.is-missing :is(.nx-input, .nx-select, .nx-textarea, .nx-affix, .nx-link__q) { border-color: var(--nx-color-warning); background-color: color-mix(in srgb, var(--nx-color-warning-soft) 65%, var(--nx-color-surface)); } /* Autosave's status sits at the end of the label row (live.js). */ .nx-f > .nx-save { grid-row: 1; grid-column: 1 / -1; justify-self: end; align-self: end; margin: 0; padding-bottom: var(--nx-space-1); } .nx-f > .nx-conflict { grid-column: 1 / -1; } /* A grid of fields: they share its rows, so controls line up. */ .nx-form-grid { display: grid; column-gap: var(--nx-space-4); row-gap: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); } .nx-form-grid--measure { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); } .nx-form-grid > .nx-field { grid-row: span 3; grid-template-rows: subgrid; margin-top: 0; padding-bottom: var(--nx-space-3); } .nx-form-grid > :not(.nx-field) { align-self: start; } .nx-span-all { grid-column: 1 / -1; } /* Field styles, per person (07 D8): the container says which. Inline: the field's name inside the box, at the end. */ .nx-fields--inline .nx-f--boxed { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "c l" "h h"; grid-template-rows: auto auto; } .nx-fields--inline .nx-f--boxed::before { content: ""; grid-row: 1; grid-column: 1 / -1; border: var(--nx-border-width) solid var(--nx-color-border-strong); border-radius: var(--nx-radius-sm); background: var(--nx-color-surface-sunken); } .nx-fields--inline .nx-f--boxed > .nx-f__control { grid-area: c; z-index: 1; min-width: 0; } .nx-fields--inline .nx-f--boxed > .nx-f__label { grid-area: l; z-index: 1; align-self: center; padding: 0 var(--nx-space-3) 0 var(--nx-space-1); font-size: var(--nx-type-help-size); font-weight: var(--nx-weight-regular); color: var(--nx-color-text-muted); white-space: nowrap; } .nx-fields--inline .nx-f--boxed > .nx-f__help { grid-area: h; } .nx-fields--inline .nx-f--boxed > .nx-save { grid-area: h; justify-self: end; align-self: start; padding: var(--nx-space-1) 0 0; } .nx-fields--inline .nx-f--boxed > .nx-f__control :is(.nx-input, .nx-select, .nx-affix, .nx-link, .nx-f__ro) { border-color: transparent; background-color: transparent; outline: none; } .nx-fields--inline .nx-f--boxed:focus-within::before { border-color: var(--nx-color-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nx-color-focus) 30%, transparent); } .nx-fields--inline .nx-f--boxed:focus-within > .nx-f__label { color: var(--nx-color-accent); } .nx-fields--inline .nx-f--boxed.is-missing::before { border-color: var(--nx-color-warning); background: color-mix(in srgb, var(--nx-color-warning-soft) 65%, var(--nx-color-surface)); } .nx-fields--inline .nx-f--boxed.is-ro::before { border-style: dashed; border-color: var(--nx-color-border); background: transparent; } /* Stacked: the name above; name, control and help rows are shared. */ .nx-fields--stacked .nx-f > .nx-f__help { min-height: 1.25rem; } /* Sheet: name left, value right, borders only when touched. */ .nx-fields--sheet .nx-f { grid-column: 1 / -1; grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr); grid-template-rows: auto auto; align-items: start; padding: var(--nx-space-1) 0; border-bottom: 1px solid var(--nx-color-border); } .nx-fields--sheet .nx-f > .nx-f__label { grid-row: 1; grid-column: 1; align-self: start; padding: calc((var(--nx-control-h) - 1.4em) / 2) 0 0; font-weight: var(--nx-weight-regular); color: var(--nx-color-text-muted); } .nx-fields--sheet .nx-f > .nx-f__control { grid-row: 1; grid-column: 2; } .nx-fields--sheet .nx-f > .nx-f__help { grid-row: 2; grid-column: 2; min-height: 0; padding-left: var(--nx-space-3); } .nx-fields--sheet .nx-f > .nx-f__help:empty, .nx-fields--sheet .nx-f > .nx-f__help:not(:has(:not(:empty))) { display: none; } .nx-fields--sheet .nx-f :is(.nx-input, .nx-select, .nx-textarea, .nx-affix, .nx-link, .nx-f__ro) { border-color: transparent; background-color: transparent; } .nx-fields--sheet .nx-f:hover :is(.nx-input, .nx-select, .nx-textarea, .nx-affix, .nx-link) { background-color: var(--nx-color-surface-2); } .nx-fields--sheet .nx-f :is(.nx-input, .nx-select, .nx-textarea):focus, .nx-fields--sheet .nx-f :is(.nx-affix, .nx-link):focus-within { border-color: var(--nx-color-focus); background-color: var(--nx-color-surface); } .nx-fields--sheet .nx-f:not(:hover) .nx-select:not(:focus) { background-image: none; } .nx-form-actions { display: flex; flex-wrap: wrap; gap: var(--nx-space-3); margin-top: var(--nx-space-6); } fieldset.nx-fieldset { border: var(--nx-border-width) solid var(--nx-color-border); border-radius: var(--nx-radius); padding: var(--nx-space-4); } fieldset.nx-fieldset legend { padding: 0 var(--nx-space-2); font-weight: var(--nx-weight-bold); } /* Card ------------------------------------------------------------ */ .nx-card { background: var(--nx-color-surface); border: var(--nx-border-width) solid var(--nx-color-border); border-radius: var(--nx-radius); padding: var(--nx-space-5); box-shadow: var(--nx-shadow-sm); } .nx-card__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--nx-space-3); margin-bottom: var(--nx-space-4); } .nx-card__title { font-size: var(--nx-text-lg); } /* Badge ----------------------------------------------------------- */ .nx-badge { display: inline-flex; align-items: center; gap: .3em; padding: .15em .6em; border-radius: var(--nx-radius-pill); font-size: var(--nx-text-xs); font-weight: var(--nx-weight-medium); background: var(--nx-color-surface-2); color: var(--nx-color-text); border: var(--nx-border-width) solid var(--nx-color-border); white-space: nowrap; } .nx-badge--success { background: var(--nx-color-success-soft); color: var(--nx-color-success); border-color: var(--nx-status-outline); } .nx-badge--warning { background: var(--nx-color-warning-soft); color: var(--nx-color-warning); border-color: var(--nx-status-outline); } .nx-badge--danger { background: var(--nx-color-danger-soft); color: var(--nx-color-danger); border-color: var(--nx-status-outline); } .nx-badge--info { background: var(--nx-color-info-soft); color: var(--nx-color-info); border-color: var(--nx-status-outline); } .nx-badge--accent { background: var(--nx-color-accent-soft); color: var(--nx-color-accent); border-color: var(--nx-status-outline); } /* Table ----------------------------------------------------------- */ .nx-table-wrap { overflow-x: auto; border: var(--nx-border-width) solid var(--nx-color-border); border-radius: var(--nx-radius); background: var(--nx-color-surface); } .nx-table { width: 100%; border-collapse: collapse; font-size: var(--nx-text-sm); } .nx-table caption { text-align: left; padding: var(--nx-space-3) var(--nx-space-4); font-weight: var(--nx-weight-bold); } .nx-table th, .nx-table td { padding: var(--nx-space-3) var(--nx-space-4); text-align: left; border-bottom: 1px solid var(--nx-color-border); vertical-align: middle; } .nx-table th { font-weight: var(--nx-weight-medium); color: var(--nx-color-text-muted); background: var(--nx-color-surface-2); position: sticky; top: 0; } .nx-table tbody tr:last-child td { border-bottom: 0; } .nx-table tbody tr:hover { background: color-mix(in srgb, var(--nx-color-surface-2) 60%, transparent); } .nx-table td.nx-num, .nx-table th.nx-num { text-align: right; } /* Tabs ------------------------------------------------------------ */ .nx-tabs [role="tablist"] { display: flex; gap: var(--nx-space-1); border-bottom: 1px solid var(--nx-color-border); overflow-x: auto; } .nx-tabs [role="tab"] { min-height: var(--nx-tap-target); padding: 0 var(--nx-space-4); border: 0; border-bottom: 2px solid transparent; background: none; color: var(--nx-color-text-muted); font-weight: var(--nx-weight-medium); white-space: nowrap; } .nx-tabs [role="tab"][aria-selected="true"] { color: var(--nx-color-text); border-bottom-color: var(--nx-color-accent); } .nx-tabs [role="tabpanel"] { padding-top: var(--nx-space-4); } /* Empty state ----------------------------------------------------- */ .nx-empty { display: grid; justify-items: center; gap: var(--nx-space-3); padding: var(--nx-space-12) var(--nx-space-4); text-align: center; border: 1px dashed var(--nx-color-border-strong); border-radius: var(--nx-radius); color: var(--nx-color-text-muted); } .nx-empty__title { color: var(--nx-color-text); font-size: var(--nx-text-lg); font-weight: var(--nx-weight-bold); } /* Skeleton -------------------------------------------------------- */ .nx-skeleton { display: block; border-radius: var(--nx-radius-sm); background: var(--nx-color-skeleton); min-height: 1em; animation: nx-pulse calc(var(--nx-duration-linger) * .875) var(--nx-ease-in-out) infinite; } .nx-skeleton--text { height: 1em; margin: .35em 0; } .nx-skeleton--block { height: 8rem; } .nx-w0 { width: 100%; } .nx-w1 { width: 92%; } .nx-w2 { width: 78%; } .nx-w3 { width: 85%; } .nx-w4 { width: 60%; } @keyframes nx-pulse { 50% { opacity: .5; } } /* Alerts ---------------------------------------------------------- */ .nx-alert { padding: var(--nx-space-3) var(--nx-space-4); border-radius: var(--nx-radius-sm); border-left: 4px solid var(--nx-color-info); background: var(--nx-color-info-soft); } .nx-alert--danger { border-color: var(--nx-color-danger); background: var(--nx-color-danger-soft); } .nx-alert--warning { border-color: var(--nx-color-warning); background: var(--nx-color-warning-soft); } /* Dialog & sheet (native ) -------------------------------- */ .nx-dialog { width: min(100% - 2 * var(--nx-space-4), 32rem); max-height: calc(100dvh - 2 * var(--nx-space-8)); padding: 0; border: 0; border-radius: var(--nx-radius-lg); background: var(--nx-color-surface); color: var(--nx-color-text); box-shadow: var(--nx-shadow-lg); } .nx-dialog::backdrop { background: var(--nx-color-overlay); } .nx-dialog[open] { animation: nx-pop var(--nx-duration) var(--nx-ease-follow); } .nx-dialog__header { display: flex; align-items: center; justify-content: space-between; gap: var(--nx-space-3); padding: var(--nx-space-4) var(--nx-space-5); border-bottom: 1px solid var(--nx-color-border); } .nx-dialog__title { font-size: var(--nx-text-lg); } .nx-dialog__body { padding: var(--nx-space-5); overflow: auto; } .nx-dialog__footer { display: flex; justify-content: flex-end; gap: var(--nx-space-3); padding: var(--nx-space-4) var(--nx-space-5); border-top: 1px solid var(--nx-color-border); } @keyframes nx-pop { from { opacity: 0; transform: translateY(calc(var(--nx-motion-shift) * .66)) scale(calc(1 - (1 - var(--nx-motion-grow)) / 2)); } } .nx-sheet { margin: 0; width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; inset: auto 0 0 0; border-radius: var(--nx-radius-lg) var(--nx-radius-lg) 0 0; padding: 0; border: 0; background: var(--nx-color-surface); color: var(--nx-color-text); box-shadow: var(--nx-shadow-lg); } .nx-sheet[open] { display: flex; flex-direction: column; animation: nx-slide-up var(--nx-duration-slow) var(--nx-ease-enter); } .nx-sheet::backdrop { background: var(--nx-color-overlay); } .nx-sheet__bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--nx-space-2); padding: var(--nx-space-2) var(--nx-space-3); background: var(--nx-color-surface); border-bottom: 1px solid var(--nx-color-border); } .nx-sheet__body { flex: 1; overflow: auto; overscroll-behavior: contain; } @keyframes nx-slide-up { from { transform: translateY(calc(var(--nx-motion-shift) * 2)); opacity: .6; } } @media (min-width: 48rem) { .nx-sheet { inset: 0 0 0 auto; width: min(64rem, 92vw); height: 100dvh; border-radius: 0; } @keyframes nx-slide-up { from { transform: translateX(calc(var(--nx-motion-shift) * 2.66)); opacity: .6; } } } /* Toast ----------------------------------------------------------- */ .nx-toasts { position: fixed; z-index: var(--nx-z-toast); inset: auto var(--nx-space-4) var(--nx-space-4) auto; display: grid; gap: var(--nx-space-2); max-width: min(24rem, calc(100vw - 2 * var(--nx-space-4))); } .nx-toast { display: flex; gap: var(--nx-space-3); align-items: start; padding: var(--nx-space-3) var(--nx-space-4); border-radius: var(--nx-radius); background: var(--nx-color-text); color: var(--nx-color-bg); box-shadow: var(--nx-shadow-lg); animation: nx-pop var(--nx-duration) var(--nx-ease-follow); } .nx-toast__close { margin-left: auto; background: none; border: 0; color: inherit; min-width: 2rem; min-height: 2rem; } .nx-toast--danger { background: var(--nx-color-danger); color: var(--nx-color-danger-contrast); } /* Command palette ------------------------------------------------- */ .nx-palette { width: min(100% - 2 * var(--nx-space-4), 40rem); margin-top: 12vh; padding: 0; border: 0; border-radius: var(--nx-radius-lg); background: var(--nx-color-surface); color: var(--nx-color-text); box-shadow: var(--nx-shadow-lg); } .nx-palette::backdrop { background: var(--nx-color-overlay); } .nx-palette__input { width: 100%; border: 0; border-bottom: 1px solid var(--nx-color-border); padding: var(--nx-space-4) var(--nx-space-5); font-size: var(--nx-text-lg); background: transparent; } .nx-palette__input:focus-visible { outline: none; } .nx-palette__list { list-style: none; margin: 0; padding: var(--nx-space-2); max-height: 50vh; overflow: auto; } .nx-palette__item { display: flex; align-items: center; justify-content: space-between; gap: var(--nx-space-3); padding: var(--nx-space-2) var(--nx-space-3); border-radius: var(--nx-radius-sm); cursor: pointer; min-height: var(--nx-tap-target); } .nx-palette__item[aria-selected="true"] { background: var(--nx-color-accent-soft); } a.nx-palette__item { color: inherit; text-decoration: none; } .nx-palette__meta { font-size: var(--nx-text-xs); color: var(--nx-color-text-muted); font-family: var(--nx-font-mono); } .nx-palette__hint { padding: var(--nx-space-2) var(--nx-space-5); border-top: 1px solid var(--nx-color-border); font-size: var(--nx-text-xs); color: var(--nx-color-text-muted); } .nx-slash-menu { position: absolute; z-index: var(--nx-z-overlay); min-width: 16rem; max-width: 24rem; margin: var(--nx-space-1) 0 0; padding: var(--nx-space-1); list-style: none; background: var(--nx-color-surface); border: var(--nx-border-width) solid var(--nx-color-border); border-radius: var(--nx-radius); box-shadow: var(--nx-shadow); } /* Description list ------------------------------------------------ */ .nx-dl { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: var(--nx-space-2) var(--nx-space-4); } .nx-dl dt { color: var(--nx-color-text-muted); } /* Timeline (history inspector) ------------------------------------ */ .nx-timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--nx-color-border); } .nx-timeline li { position: relative; padding: 0 0 var(--nx-space-4) var(--nx-space-4); } .nx-timeline li::before { content: ""; position: absolute; left: -7px; top: .45em; width: 12px; height: 12px; border-radius: 50%; background: var(--nx-color-surface); border: 2px solid var(--nx-color-accent); } } @layer components { /* Pattern library helpers */ .nx-swatches { display: grid; gap: var(--nx-space-3); grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); } .nx-swatch { display: flex; align-items: center; gap: var(--nx-space-2); font-size: var(--nx-text-sm); } .nx-swatch__chip { width: 2rem; height: 2rem; border-radius: var(--nx-radius-sm); border: var(--nx-border-width) solid var(--nx-color-border-strong); } .nx-swatch--bg { background: var(--nx-color-bg); } .nx-swatch--surface { background: var(--nx-color-surface); } .nx-swatch--surface-2 { background: var(--nx-color-surface-2); } .nx-swatch--text { background: var(--nx-color-text); } .nx-swatch--text-muted { background: var(--nx-color-text-muted); } .nx-swatch--border { background: var(--nx-color-border); } .nx-swatch--accent { background: var(--nx-color-accent); } .nx-swatch--danger { background: var(--nx-color-danger); } .nx-swatch--success { background: var(--nx-color-success); } .nx-swatch--warning { background: var(--nx-color-warning); } .nx-swatch--info { background: var(--nx-color-info); } .nx-swatch--agent { background: var(--nx-color-agent); } .nx-demo-toasts { display: grid; gap: var(--nx-space-2); max-width: 24rem; } } /* Chips: filter links and saved views. */ @layer components { .nx-chips { display: flex; flex-wrap: wrap; gap: var(--nx-space-2); list-style: none; margin: 0; padding: 0; } .nx-chip { display: inline-flex; align-items: center; min-height: var(--nx-tap-target); padding: 0 var(--nx-space-4); border: var(--nx-border-width) solid var(--nx-color-border-strong); border-radius: var(--nx-radius-pill); color: var(--nx-color-text); background: var(--nx-color-surface); text-decoration: none; font-size: var(--nx-text-sm); white-space: nowrap; } .nx-chip:hover { border-color: var(--nx-color-text); color: var(--nx-color-text); } .nx-chip[aria-current="true"], .nx-chip[aria-current="page"] { background: var(--nx-color-text); border-color: var(--nx-color-text); color: var(--nx-color-bg); } .nx-details > summary { cursor: pointer; min-height: var(--nx-tap-target); display: flex; align-items: center; color: var(--nx-color-accent); } .nx-details[open] > summary { margin-bottom: var(--nx-space-3); } .nx-narrow { max-width: 36rem; } .nx-code { font-family: var(--nx-font-mono); font-size: var(--nx-text-xs); letter-spacing: .02em; } } /* Conversations: message bubbles (staff thread and the shopper's chat). Theirs on the left, ours on the right. */ @layer components { .nx-messages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--nx-space-4); } .nx-msg { display: flex; flex-direction: column; gap: var(--nx-space-1); max-width: min(36rem, 88%); } .nx-msg--in { align-self: flex-start; } .nx-msg--out { align-self: flex-end; align-items: flex-end; } .nx-msg__bubble { padding: var(--nx-space-3) var(--nx-space-4); border-radius: var(--nx-radius-lg); background: var(--nx-color-surface-2); overflow-wrap: anywhere; } .nx-msg__bubble p { margin: 0; } .nx-msg__bubble p + p { margin-top: var(--nx-space-2); } .nx-msg--in .nx-msg__bubble { border-bottom-left-radius: var(--nx-radius-sm); } .nx-msg--out .nx-msg__bubble { background: var(--nx-color-accent-soft); border-bottom-right-radius: var(--nx-radius-sm); } .nx-msg__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-2); font-size: var(--nx-text-xs); color: var(--nx-color-text-muted); } } /* Breadcrumbs: a wrapping trail, separators drawn by CSS (not read out). */ @layer components { .nx-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-1) var(--nx-space-2); list-style: none; margin: 0; padding: 0; font-size: var(--nx-text-sm); color: var(--nx-color-text-muted); } .nx-crumbs li { display: inline-flex; align-items: center; gap: var(--nx-space-2); min-width: 0; } .nx-crumbs li + li::before { content: "/"; color: var(--nx-color-border-strong); } .nx-crumbs a { display: inline-flex; align-items: center; min-height: var(--nx-tap-target); color: inherit; text-underline-offset: .2em; } .nx-crumbs a:hover { color: var(--nx-color-text); } .nx-crumbs [aria-current="page"] { color: var(--nx-color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; } } /* Sign-in pages (AuthShell): a top bar like the shop's header (the brand centred, a plain "← Back" in the top-left corner) over one centred card, in every portal, so these live here rather than in a portal's stylesheet. */ @layer components { .nx-auth { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; } .nx-auth__top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--nx-space-3); min-height: var(--nx-header-height); padding: var(--nx-space-2) var(--nx-space-4); } .nx-auth__nav { grid-column: 1; grid-row: 1; justify-self: start; min-width: 0; } .nx-auth__main { display: grid; place-items: center; padding: var(--nx-space-6) var(--nx-space-4) var(--nx-space-12); } .nx-auth__card { width: min(100%, 26rem); } .nx-auth__or { display: flex; align-items: center; gap: var(--nx-space-3); color: var(--nx-color-text-muted); font-size: var(--nx-text-sm); } .nx-auth__or::before, .nx-auth__or::after { content: ""; flex: 1; border-top: 1px solid var(--nx-color-border); } /* The way back: an arrow and plain text (no box, no underline), a full tap target (WCAG 2.5.8); the global :focus-visible ring shows focus. */ .nx-auth__back { display: inline-flex; align-items: center; gap: .35em; min-height: var(--nx-tap-target); min-width: var(--nx-tap-target); padding: 0; border: 0; background: none; color: var(--nx-color-text-muted); font-size: var(--nx-text-sm); text-decoration: none; } .nx-auth__back:hover { color: var(--nx-color-text); } .nx-auth__brand { grid-column: 2; grid-row: 1; justify-self: center; margin: 0; text-align: center; font-family: var(--nx-font-heading); font-size: var(--nx-text-xl); letter-spacing: .02em; } .nx-auth__brand a { color: var(--nx-color-text); text-decoration: none; } .nx-auth__brand a:hover { text-decoration: underline; text-underline-offset: .25em; } /* A phone: the way back keeps the corner, the brand centres under it. */ @media (max-width: 30rem) { .nx-auth__top { grid-template-columns: minmax(0, 1fr); gap: 0; } .nx-auth__brand { grid-column: 1; grid-row: 2; } } } /* A count beside a navigation link (bag, inbox, to pack). */ @layer components { .nx-nav-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; height: 1.4rem; margin-left: var(--nx-space-1); padding: 0 .35rem; border-radius: var(--nx-radius-pill); background: var(--nx-color-text); color: var(--nx-color-bg); font-size: var(--nx-text-xs); font-weight: var(--nx-weight-bold); font-variant-numeric: tabular-nums; } .nx-nav .nx-nav-count { margin-left: auto; } } /* The row or piece you came back to (workspace.js, 08 §5.1). */ @layer components { .nx-returned { outline: 2px solid var(--nx-color-accent); outline-offset: 4px; border-radius: var(--nx-radius-sm); transition: outline-color calc(var(--nx-duration-linger) * .625) var(--nx-ease) calc(var(--nx-duration-linger) * .9375); } } /* Live views and autosave (live.js; ADR-028, ADR-032). */ @layer components { /* A value someone else just changed: a brief wash of the accent. */ .nx-live-changed { animation: nx-live-wash var(--nx-duration-linger) var(--nx-ease); } @keyframes nx-live-wash { from { background-color: var(--nx-color-accent-soft); } to { background-color: transparent; } } tr.nx-live-new > td, .nx-live-new { animation: nx-live-wash calc(var(--nx-duration-linger) * 1.5) var(--nx-ease); } @media (prefers-reduced-motion: reduce) { .nx-live-changed, tr.nx-live-new > td, .nx-live-new { animation: none; outline: 2px solid var(--nx-color-accent); outline-offset: 2px; } } /* "Changed by Sam: … Keep yours / Use theirs" under a field. */ .nx-conflict { margin-top: var(--nx-space-2); padding: var(--nx-space-2) var(--nx-space-3); border: 1px solid var(--nx-color-warning); border-radius: var(--nx-radius-sm); background: var(--nx-color-warning-soft); color: var(--nx-color-text); font-size: var(--nx-text-sm); display: grid; gap: var(--nx-space-2); } .nx-conflict p { margin: 0; overflow-wrap: anywhere; } /* A field's save state: saving, saved (with Undo), couldn't save (with Retry). */ .nx-save { margin: var(--nx-space-1) 0 0; min-height: 1.25em; font-size: var(--nx-text-xs); color: var(--nx-color-text-muted); } .nx-save[data-state="error"] { color: var(--nx-color-danger); } .nx-link-btn { appearance: none; border: 0; padding: 0; background: none; color: var(--nx-color-accent); font: inherit; text-decoration: underline; cursor: pointer; min-height: 24px; } .nx-link-btn:focus-visible { outline: 2px solid var(--nx-color-focus); outline-offset: 2px; } .nx-autosave-note { margin: 0; font-size: var(--nx-text-sm); } /* Rows added above what you're reading. */ .nx-new-above { position: sticky; top: var(--nx-space-2); z-index: var(--nx-z-sticky); display: flex; justify-content: center; height: 0; overflow: visible; } .nx-new-above > .nx-btn { box-shadow: var(--nx-shadow); border-radius: var(--nx-radius-pill); } } /* ========================================================================== DS1 feedback (components/feedback.templ): toasts with Undo, and the confirmation dialog for irreversible Actions. Kept together at the end. ========================================================================== */ @layer components { .nx-toast { align-items: center; } .nx-toast[hidden] { display: none; } .nx-toast__msg { flex: 1; min-width: 0; overflow-wrap: anywhere; } .nx-notice-nojs { margin: 0; padding: var(--nx-space-3) var(--nx-space-4); border-radius: var(--nx-radius); border: 1px solid var(--nx-color-border); background: var(--nx-color-surface); } .nx-toast__action { appearance: none; flex: none; min-height: 2rem; padding: 0 var(--nx-space-2); border: 0; border-radius: var(--nx-radius-sm); background: none; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .nx-toast__action:hover { text-decoration-thickness: 2px; } .nx-toast__close { flex: none; margin-left: 0; border-radius: var(--nx-radius-sm); cursor: pointer; } .nx-toast__action:focus-visible, .nx-toast__close:focus-visible { outline: 3px solid currentColor; outline-offset: 1px; } .nx-confirm .nx-dialog__body > * + * { margin-top: var(--nx-space-3); } .nx-confirm__final { font-weight: 600; } .nx-confirm .nx-dialog__footer { flex-wrap: wrap; } } /* css/motion.css */ /* Motion between states (DS12, ADR-068). motion.js names the record's box (nx-rec) and its title (nx-rec-title) in the state it leaves and the one it arrives at, and says on what the change is (data-nx-vt: open | step) and which way it went (data-nx-vt-dir: forward | back). How it moves follows data-nx-transition and data-nx-motion; durations and curves are tokens, so the speed and None apply here too. */ @layer components { /* A look changing in place (the light/dark switch without View Transitions, trying a theme): a quick cross-fade. */ html.nx-theme-fade, html.nx-theme-fade * { transition: background-color var(--nx-duration) var(--nx-ease), color var(--nx-duration) var(--nx-ease), border-color var(--nx-duration) var(--nx-ease), fill var(--nx-duration) var(--nx-ease), stroke var(--nx-duration) var(--nx-ease) !important; } ::view-transition-group(*) { animation-duration: var(--nx-duration-slow); animation-timing-function: var(--nx-ease-in-out); } /* Around the record, the page changes at once. */ :root[data-nx-vt]::view-transition-old(root) { animation: none; opacity: 0; } :root[data-nx-vt]::view-transition-new(root) { animation: none; } ::view-transition-old(nx-rec), ::view-transition-new(nx-rec) { height: 100%; overflow: clip; object-fit: none; object-position: top left; } /* Morph: the row's box grows into the record's (the group's own move, slow in, fast middle, slow out), the row fading as the record shows; the title flies from its cell to the heading. */ :root[data-nx-transition="morph"]::view-transition-old(nx-rec) { animation: nx-vt-fade-out var(--nx-duration-fast) var(--nx-ease-exit) both; } :root[data-nx-transition="morph"]::view-transition-new(nx-rec) { animation: nx-vt-fade-in var(--nx-duration-slow) var(--nx-ease-enter) both; } ::view-transition-group(nx-rec-title) { animation-duration: var(--nx-duration-slow); animation-timing-function: var(--nx-ease-in-out); } /* Slide: the record comes in from the side it's going to (next from the right, previous from the left), drawing back a touch first (anticipation) and settling past its place (follow-through). */ :root[data-nx-transition="slide"][data-nx-vt="open"]::view-transition-group(nx-rec), :root[data-nx-vt="step"]:not([data-nx-transition="fade"])::view-transition-group(nx-rec) { animation: none; } :root[data-nx-vt="step"]:not([data-nx-transition="fade"])::view-transition-old(nx-rec) { animation: nx-vt-slide-out var(--nx-duration) var(--nx-ease-anticipate) both; } /* Opening, the row's image (not the record's) is what leaves: it fades. */ :root[data-nx-transition="slide"][data-nx-vt="open"]::view-transition-old(nx-rec) { animation: nx-vt-fade-out var(--nx-duration-fast) var(--nx-ease-exit) both; } :root[data-nx-transition="slide"][data-nx-vt="open"]::view-transition-new(nx-rec), :root[data-nx-vt="step"]:not([data-nx-transition="fade"])::view-transition-new(nx-rec) { animation: nx-vt-slide-in var(--nx-duration-slow) var(--nx-ease-follow) both; } :root[data-nx-transition="slide"][data-nx-vt="open"]::view-transition-group(nx-rec-title), :root[data-nx-vt="step"]::view-transition-group(nx-rec-title) { animation: none; } :root[data-nx-transition="slide"][data-nx-vt="open"]::view-transition-old(nx-rec-title), :root[data-nx-vt="step"]::view-transition-old(nx-rec-title) { animation: none; opacity: 0; } /* Fade: the record cross-fades in place. */ :root[data-nx-transition="fade"]::view-transition-group(nx-rec), :root[data-nx-transition="fade"]::view-transition-group(nx-rec-title) { animation: none; } :root[data-nx-transition="fade"]::view-transition-old(nx-rec) { animation: nx-vt-fade-out var(--nx-duration-fast) var(--nx-ease-exit) both; } :root[data-nx-transition="fade"]::view-transition-new(nx-rec) { animation: nx-vt-fade-in var(--nx-duration) var(--nx-ease-enter) both; } @keyframes nx-vt-fade-out { to { opacity: 0; } } @keyframes nx-vt-fade-in { from { opacity: 0; } } /* Which way: forward goes left (the next comes from the right). */ :root { --nx-vt-way: 1; } :root[data-nx-vt-dir="back"] { --nx-vt-way: -1; } @keyframes nx-vt-slide-out { to { opacity: 0; transform: translateX(calc(var(--nx-motion-shift) * -4 * var(--nx-vt-way))); } } @keyframes nx-vt-slide-in { from { opacity: 0; transform: translateX(calc(var(--nx-motion-shift) * 4 * var(--nx-vt-way))); } } /* Content put in place without a View Transition (a record loaded beside its list as you skim with j/k): a quick fade, and a small rise with Full. */ .nx-enter { animation: nx-enter var(--nx-duration) var(--nx-ease-enter) both; } @keyframes nx-enter { from { opacity: 0; transform: translateY(calc(var(--nx-motion-shift) * .5)); } } } /* The Behaviour page's motion preview (DS12). */ @layer app { .nx-motion-demo { display: grid; gap: var(--nx-space-3); } .nx-motion-demo__bar { flex-wrap: wrap; gap: var(--nx-space-2); align-items: center; } .nx-motion-demo__said { flex: 1 1 16rem; margin: 0; } .nx-motion-demo__stage { min-block-size: 9.5rem; padding: var(--nx-space-3); border: var(--nx-border-width) solid var(--nx-color-border); border-radius: var(--nx-radius); background: var(--nx-color-surface-sunken); overflow: hidden; } .nx-motion-demo__list { display: grid; gap: var(--nx-space-1); margin: 0; } .nx-motion-demo__row { display: flex; gap: var(--nx-space-3); padding: var(--nx-space-2) var(--nx-space-3); border-radius: var(--nx-radius-sm); background: var(--nx-color-surface); } .nx-motion-demo__row[aria-current="true"] { box-shadow: inset 3px 0 0 var(--nx-color-accent); } .nx-motion-demo__code { font-variant-numeric: tabular-nums; color: var(--nx-color-text-muted); } .nx-motion-demo__record { display: grid; gap: var(--nx-space-1); padding: var(--nx-space-4); border-radius: var(--nx-radius); background: var(--nx-color-surface); box-shadow: var(--nx-shadow-sm); } .nx-motion-demo__title { margin: 0; font-size: var(--nx-text-xl, 1.25rem); } } /* Gentle and None win over any transition's own rules. */ @layer overrides { /* Gentle: fades only; nothing travels or grows. */ :root[data-nx-motion="gentle"]::view-transition-group(*) { animation: none; } :root[data-nx-motion="gentle"]::view-transition-old(*) { animation: nx-vt-fade-out var(--nx-duration-fast) var(--nx-ease-exit) both; } :root[data-nx-motion="gentle"]::view-transition-new(*) { animation: nx-vt-fade-in var(--nx-duration) var(--nx-ease-enter) both; } /* None, or the device's Reduce motion: changes at once. */ :root[data-nx-motion="off"]::view-transition-group(*), :root[data-nx-motion="off"]::view-transition-old(*), :root[data-nx-motion="off"]::view-transition-new(*) { animation: none !important; } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } } /* css/ui.css */ /* Page components (web/components/ui.templ; 09 §19.1, ADR-041). Tokens only. Props render as classes: layout primitives carry .nx-ui-l, and nx-u-- / nx-u--- set --nx-u-[-bp], which resolve into --_ for the current width (md 768px, lg 1440px). The generated block at the end comes from utilityCSS() in web/components/ui.go (TestUICSSGenerated). */ @layer components { .nx-ui-slot { display: contents; } .nx-ui-l { min-inline-size: 0; } .nx-ui-l > * { min-inline-size: 0; } /* A long unbroken word (a URL, a pasted code) wraps instead of pushing the page sideways at 320px: every component's text inherits it. */ :where(.nx-ui-l, .nx-ui-wrap, .nx-ui-heading, .nx-ui-text, .nx-ui-link, .nx-ui-price, .nx-ui-product-card, .nx-ui-product-grid, .nx-ui-hero, .nx-ui-overlay, .nx-ui-footer, [data-nx-css]) { overflow-wrap: anywhere; } :where(.nx-ui-hero, .nx-ui-overlay, .nx-ui-footer) > * { min-inline-size: 0; } /* Section ---------------------------------------------------------- */ .nx-ui-section { padding-block: var(--_pad, var(--nx-space-8)); } .nx-ui-section__inner { box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nx-space-8); max-inline-size: var(--nx-content-width); margin-inline: auto; padding-inline: var(--nx-space-4); } .nx-ui-section--narrow > .nx-ui-section__inner { max-inline-size: calc(var(--nx-content-width) * .6); } .nx-ui-section--wide > .nx-ui-section__inner { max-inline-size: calc(var(--nx-content-width) * 1.25); } .nx-ui-section--full > .nx-ui-section__inner { max-inline-size: none; padding-inline: 0; } /* Tones ------------------------------------------------------------ */ .nx-ui-tone--muted { background: var(--nx-color-surface-2); } .nx-ui-tone--accent { background: var(--nx-color-accent); color: var(--nx-color-accent-contrast); } .nx-ui-tone--inverse { background: var(--nx-color-text); color: var(--nx-color-bg); } :where(.nx-ui-tone--accent, .nx-ui-tone--inverse) :where(a:not(.nx-btn), .nx-muted, .nx-ui-text--muted) { color: inherit; } /* Stack, grid, columns --------------------------------------------- */ .nx-ui-stack { display: flex; flex-direction: column; gap: var(--_gap, var(--nx-space-4)); align-items: var(--_align, stretch); } .nx-ui-grid { display: grid; grid-template-columns: repeat(var(--_cols, 2), minmax(0, 1fr)); gap: var(--_gap, var(--nx-space-4)); } .nx-ui-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--_gap, var(--nx-space-6)); align-items: var(--_align, stretch); } @media (min-width: 768px) { .nx-ui-columns { grid-template-columns: var(--_ratio, minmax(0, 1fr) minmax(0, 1fr)); } } /* Box, cluster ----------------------------------------------------- */ .nx-ui-box { padding: var(--_pad, var(--nx-space-4)); border-radius: var(--nx-radius); } .nx-ui-box--border { border: var(--nx-border-width) solid var(--nx-color-border); } .nx-ui-cluster { display: flex; flex-wrap: wrap; gap: var(--_gap, var(--nx-space-2)); justify-content: var(--_justify, flex-start); align-items: var(--_align, center); } /* Switcher: side by side above the threshold, all stacked below ---- */ .nx-ui-switcher { --_threshold: calc(var(--nx-content-width) * .42); display: flex; flex-wrap: wrap; gap: var(--_gap, var(--nx-space-4)); } .nx-ui-switcher--narrow { --_threshold: calc(var(--nx-content-width) * .28); } .nx-ui-switcher--wide { --_threshold: calc(var(--nx-content-width) * .56); } .nx-ui-switcher > * { flex-grow: 1; flex-basis: calc((var(--_threshold) - 100%) * 999); } /* Sidebar: stacks when the main column would drop under half -------- */ .nx-ui-sidebar { --_side: calc(var(--nx-space-16) * 4); display: flex; flex-wrap: wrap; gap: var(--_gap, var(--nx-space-6)); } .nx-ui-sidebar--narrow { --_side: calc(var(--nx-space-16) * 3); } .nx-ui-sidebar--wide { --_side: calc(var(--nx-space-16) * 5); } .nx-ui-sidebar__side { flex-basis: var(--_side); flex-grow: 1; min-inline-size: 0; } .nx-ui-sidebar__main { flex-basis: 0; flex-grow: 999; min-inline-size: 50%; } .nx-ui-sidebar--end > .nx-ui-sidebar__side { order: 1; } /* Heading, text, link ---------------------------------------------- */ .nx-ui-heading { margin: 0; overflow-wrap: anywhere; } .nx-ui-heading--s { font-size: var(--nx-text-lg); } .nx-ui-heading--m { font-size: var(--nx-text-xl); } .nx-ui-heading--l { font-size: var(--nx-text-2xl); } .nx-ui-heading--xl { font-size: var(--nx-text-3xl); } .nx-ui-heading--2xl { font-size: calc(var(--nx-text-3xl) * 1.3); } .nx-ui-heading--3xl { font-size: calc(var(--nx-text-3xl) * 1.7); } .nx-ui-text { margin: 0; max-inline-size: 70ch; white-space: pre-line; overflow-wrap: anywhere; } .nx-ui-text--s { font-size: var(--nx-text-sm); } .nx-ui-text--l { font-size: var(--nx-text-lg); } .nx-ui-text--muted { color: var(--nx-color-text-muted); } .nx-ui-align--center { text-align: center; margin-inline: auto; } .nx-ui-align--end { text-align: end; margin-inline-start: auto; } .nx-ui-link { color: var(--nx-color-accent); text-decoration: underline; text-underline-offset: .2em; } .nx-ui-link--muted { color: var(--nx-color-text-muted); } .nx-ui-link--default { color: inherit; } /* Image ------------------------------------------------------------ */ .nx-ui-image { display: block; inline-size: 100%; max-inline-size: 100%; block-size: auto; object-fit: cover; } .nx-ui-image--contain { object-fit: contain; } .nx-ui-ratio--1-1 { aspect-ratio: 1; } .nx-ui-ratio--4-5 { aspect-ratio: 4 / 5; } .nx-ui-ratio--3-4 { aspect-ratio: 3 / 4; } .nx-ui-ratio--4-3 { aspect-ratio: 4 / 3; } .nx-ui-ratio--16-9 { aspect-ratio: 16 / 9; } .nx-ui-ratio--3-2 { aspect-ratio: 3 / 2; } .nx-ui-image--dim { opacity: .6; } /* Icon ------------------------------------------------------------- */ .nx-ui-icon { display: inline-block; flex: none; inline-size: 1.25rem; block-size: 1.25rem; vertical-align: middle; } .nx-ui-icon--s { inline-size: 1rem; block-size: 1rem; } .nx-ui-icon--l { inline-size: 1.75rem; block-size: 1.75rem; } /* Builder components (internal/pages compdoc): a wrapper that carries the contract's role, behaviour, variant and state. */ .nx-comp { min-inline-size: 0; } /* Price ------------------------------------------------------------ */ .nx-ui-price { margin: 0; font-weight: var(--nx-weight-bold); font-variant-numeric: tabular-nums; } .nx-ui-price--s { font-size: var(--nx-text-sm); } .nx-ui-price--l { font-size: var(--nx-text-xl); } .nx-ui-price__was { margin-inline-start: var(--nx-space-2); color: var(--nx-color-text-muted); font-weight: var(--nx-weight-regular); } /* Product card and grid -------------------------------------------- */ .nx-ui-product-card { position: relative; display: flex; flex-direction: column; gap: var(--nx-space-2); min-inline-size: 0; } .nx-ui-product-card__photo { border-radius: var(--nx-radius); background: var(--nx-color-surface-2); } .nx-ui-product-card__title { margin: 0; font-size: var(--nx-text-md); font-weight: var(--nx-weight-medium); overflow-wrap: anywhere; } .nx-ui-product-card__title a { color: inherit; text-decoration: none; } .nx-ui-product-card__title a::after { content: ""; position: absolute; inset: 0; } .nx-ui-product-card__title a:focus-visible { outline: none; } .nx-ui-product-card:has(a:focus-visible) { outline: 2px solid var(--nx-color-focus); outline-offset: var(--nx-space-1); border-radius: var(--nx-radius-sm); } .nx-ui-product-card__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--nx-space-2); margin: 0; font-variant-numeric: tabular-nums; } .nx-ui-product-card__status { color: var(--nx-color-sold); font-size: var(--nx-text-xs); font-weight: var(--nx-weight-bold); letter-spacing: var(--nx-tracking-caps); text-transform: uppercase; } .nx-ui-product-card__actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--nx-space-2); } .nx-ui-product-card--sold .nx-ui-product-card__photo { opacity: .72; } .nx-ui-product-card--sold .nx-ui-product-card__price { color: var(--nx-color-text-muted); text-decoration: line-through; } .nx-ui-product-grid { gap: var(--_gap, var(--nx-space-6)); } .nx-ui-product-grid__empty { margin: 0; padding-block: var(--nx-space-8); text-align: center; } /* Hero ------------------------------------------------------------- */ .nx-ui-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nx-space-6); align-items: center; padding-block: var(--nx-space-12); } .nx-ui-hero:is(.nx-ui-tone--muted, .nx-ui-tone--accent, .nx-ui-tone--inverse) { padding-inline: var(--nx-space-6); border-radius: var(--nx-radius-lg); } .nx-ui-hero__text { display: flex; flex-direction: column; gap: var(--nx-space-4); min-inline-size: 0; } .nx-ui-hero__eyebrow { margin: 0; font-size: var(--nx-text-sm); font-weight: var(--nx-weight-bold); letter-spacing: var(--nx-tracking-caps); text-transform: uppercase; } .nx-ui-hero__title { margin: 0; font-size: var(--nx-text-3xl); overflow-wrap: anywhere; } .nx-ui-hero__lede { margin: 0; max-inline-size: 60ch; font-size: var(--nx-text-lg); white-space: pre-line; } .nx-ui-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-3); } .nx-ui-hero__photo { border-radius: var(--nx-radius-lg); aspect-ratio: 4 / 5; } .nx-ui-hero--center { justify-items: center; text-align: center; } .nx-ui-hero--center .nx-ui-hero__text { align-items: center; } .nx-ui-hero--center .nx-ui-hero__actions { justify-content: center; } @media (min-width: 768px) { .nx-ui-hero--photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .nx-ui-hero__photo { aspect-ratio: 4 / 3; } } /* Overlay: text on a photo over a backing that keeps it readable ---- */ .nx-ui-overlay { position: relative; display: grid; align-content: end; min-block-size: calc(var(--nx-space-16) * 6); overflow: hidden; border-radius: var(--nx-radius-lg); } .nx-ui-overlay-h--s { min-block-size: calc(var(--nx-space-16) * 4); } .nx-ui-overlay-h--l { min-block-size: calc(var(--nx-space-16) * 9); } .nx-ui-overlay--start { align-content: start; } .nx-ui-overlay--center { align-content: center; } .nx-ui-overlay__photo { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; } .nx-ui-overlay__body { position: relative; display: flex; flex-direction: column; gap: var(--nx-space-3); padding: var(--nx-space-6); color: var(--nx-color-bg); } .nx-ui-overlay--shade .nx-ui-overlay__body { background: color-mix(in srgb, var(--nx-color-text) 82%, transparent); } .nx-ui-overlay--panel .nx-ui-overlay__body { margin: var(--nx-space-4); border-radius: var(--nx-radius); background: color-mix(in srgb, var(--nx-color-text) 90%, transparent); } .nx-ui-overlay__body :where(a:not(.nx-btn), .nx-muted, .nx-ui-text--muted) { color: inherit; } /* Footer ----------------------------------------------------------- */ .nx-ui-footer { display: flex; flex-direction: column; gap: var(--nx-space-4); padding-block: var(--nx-space-8); border-top: var(--nx-border-width) solid var(--nx-color-border); } .nx-ui-footer__note { margin: 0; color: var(--nx-color-text-muted); font-size: var(--nx-text-sm); white-space: pre-line; } /* BEGIN generated utilities */ .nx-ui-l { --nx-u-gap: initial; --nx-u-gap-md: initial; --nx-u-gap-lg: initial; --_gap: var(--nx-u-gap); --nx-u-pad: initial; --nx-u-pad-md: initial; --nx-u-pad-lg: initial; --_pad: var(--nx-u-pad); --nx-u-cols: initial; --nx-u-cols-md: initial; --nx-u-cols-lg: initial; --_cols: var(--nx-u-cols); --nx-u-ratio: initial; --nx-u-ratio-md: initial; --nx-u-ratio-lg: initial; --_ratio: var(--nx-u-ratio); --nx-u-align: initial; --nx-u-align-md: initial; --nx-u-align-lg: initial; --_align: var(--nx-u-align); --nx-u-justify: initial; --nx-u-justify-md: initial; --nx-u-justify-lg: initial; --_justify: var(--nx-u-justify); } @media (min-width: 768px) { .nx-ui-l { --_gap: var(--nx-u-gap-md, var(--nx-u-gap)); --_pad: var(--nx-u-pad-md, var(--nx-u-pad)); --_cols: var(--nx-u-cols-md, var(--nx-u-cols)); --_ratio: var(--nx-u-ratio-md, var(--nx-u-ratio)); --_align: var(--nx-u-align-md, var(--nx-u-align)); --_justify: var(--nx-u-justify-md, var(--nx-u-justify)); } } @media (min-width: 1440px) { .nx-ui-l { --_gap: var(--nx-u-gap-lg, var(--nx-u-gap-md, var(--nx-u-gap))); --_pad: var(--nx-u-pad-lg, var(--nx-u-pad-md, var(--nx-u-pad))); --_cols: var(--nx-u-cols-lg, var(--nx-u-cols-md, var(--nx-u-cols))); --_ratio: var(--nx-u-ratio-lg, var(--nx-u-ratio-md, var(--nx-u-ratio))); --_align: var(--nx-u-align-lg, var(--nx-u-align-md, var(--nx-u-align))); --_justify: var(--nx-u-justify-lg, var(--nx-u-justify-md, var(--nx-u-justify))); } } .nx-u-gap-none { --nx-u-gap: 0; } .nx-u-md-gap-none { --nx-u-gap-md: 0; } .nx-u-lg-gap-none { --nx-u-gap-lg: 0; } .nx-u-gap-xs { --nx-u-gap: var(--nx-space-1); } .nx-u-md-gap-xs { --nx-u-gap-md: var(--nx-space-1); } .nx-u-lg-gap-xs { --nx-u-gap-lg: var(--nx-space-1); } .nx-u-gap-s { --nx-u-gap: var(--nx-space-2); } .nx-u-md-gap-s { --nx-u-gap-md: var(--nx-space-2); } .nx-u-lg-gap-s { --nx-u-gap-lg: var(--nx-space-2); } .nx-u-gap-m { --nx-u-gap: var(--nx-space-4); } .nx-u-md-gap-m { --nx-u-gap-md: var(--nx-space-4); } .nx-u-lg-gap-m { --nx-u-gap-lg: var(--nx-space-4); } .nx-u-gap-l { --nx-u-gap: var(--nx-space-6); } .nx-u-md-gap-l { --nx-u-gap-md: var(--nx-space-6); } .nx-u-lg-gap-l { --nx-u-gap-lg: var(--nx-space-6); } .nx-u-gap-xl { --nx-u-gap: var(--nx-space-8); } .nx-u-md-gap-xl { --nx-u-gap-md: var(--nx-space-8); } .nx-u-lg-gap-xl { --nx-u-gap-lg: var(--nx-space-8); } .nx-u-gap-2xl { --nx-u-gap: var(--nx-space-12); } .nx-u-md-gap-2xl { --nx-u-gap-md: var(--nx-space-12); } .nx-u-lg-gap-2xl { --nx-u-gap-lg: var(--nx-space-12); } .nx-u-gap-3xl { --nx-u-gap: var(--nx-space-16); } .nx-u-md-gap-3xl { --nx-u-gap-md: var(--nx-space-16); } .nx-u-lg-gap-3xl { --nx-u-gap-lg: var(--nx-space-16); } .nx-u-pad-none { --nx-u-pad: 0; } .nx-u-md-pad-none { --nx-u-pad-md: 0; } .nx-u-lg-pad-none { --nx-u-pad-lg: 0; } .nx-u-pad-xs { --nx-u-pad: var(--nx-space-1); } .nx-u-md-pad-xs { --nx-u-pad-md: var(--nx-space-1); } .nx-u-lg-pad-xs { --nx-u-pad-lg: var(--nx-space-1); } .nx-u-pad-s { --nx-u-pad: var(--nx-space-2); } .nx-u-md-pad-s { --nx-u-pad-md: var(--nx-space-2); } .nx-u-lg-pad-s { --nx-u-pad-lg: var(--nx-space-2); } .nx-u-pad-m { --nx-u-pad: var(--nx-space-4); } .nx-u-md-pad-m { --nx-u-pad-md: var(--nx-space-4); } .nx-u-lg-pad-m { --nx-u-pad-lg: var(--nx-space-4); } .nx-u-pad-l { --nx-u-pad: var(--nx-space-6); } .nx-u-md-pad-l { --nx-u-pad-md: var(--nx-space-6); } .nx-u-lg-pad-l { --nx-u-pad-lg: var(--nx-space-6); } .nx-u-pad-xl { --nx-u-pad: var(--nx-space-8); } .nx-u-md-pad-xl { --nx-u-pad-md: var(--nx-space-8); } .nx-u-lg-pad-xl { --nx-u-pad-lg: var(--nx-space-8); } .nx-u-pad-2xl { --nx-u-pad: var(--nx-space-12); } .nx-u-md-pad-2xl { --nx-u-pad-md: var(--nx-space-12); } .nx-u-lg-pad-2xl { --nx-u-pad-lg: var(--nx-space-12); } .nx-u-pad-3xl { --nx-u-pad: var(--nx-space-16); } .nx-u-md-pad-3xl { --nx-u-pad-md: var(--nx-space-16); } .nx-u-lg-pad-3xl { --nx-u-pad-lg: var(--nx-space-16); } .nx-u-cols-1 { --nx-u-cols: 1; } .nx-u-md-cols-1 { --nx-u-cols-md: 1; } .nx-u-lg-cols-1 { --nx-u-cols-lg: 1; } .nx-u-cols-2 { --nx-u-cols: 2; } .nx-u-md-cols-2 { --nx-u-cols-md: 2; } .nx-u-lg-cols-2 { --nx-u-cols-lg: 2; } .nx-u-cols-3 { --nx-u-cols: 3; } .nx-u-md-cols-3 { --nx-u-cols-md: 3; } .nx-u-lg-cols-3 { --nx-u-cols-lg: 3; } .nx-u-cols-4 { --nx-u-cols: 4; } .nx-u-md-cols-4 { --nx-u-cols-md: 4; } .nx-u-lg-cols-4 { --nx-u-cols-lg: 4; } .nx-u-cols-5 { --nx-u-cols: 5; } .nx-u-md-cols-5 { --nx-u-cols-md: 5; } .nx-u-lg-cols-5 { --nx-u-cols-lg: 5; } .nx-u-cols-6 { --nx-u-cols: 6; } .nx-u-md-cols-6 { --nx-u-cols-md: 6; } .nx-u-lg-cols-6 { --nx-u-cols-lg: 6; } .nx-u-cols-7 { --nx-u-cols: 7; } .nx-u-md-cols-7 { --nx-u-cols-md: 7; } .nx-u-lg-cols-7 { --nx-u-cols-lg: 7; } .nx-u-cols-8 { --nx-u-cols: 8; } .nx-u-md-cols-8 { --nx-u-cols-md: 8; } .nx-u-lg-cols-8 { --nx-u-cols-lg: 8; } .nx-u-cols-9 { --nx-u-cols: 9; } .nx-u-md-cols-9 { --nx-u-cols-md: 9; } .nx-u-lg-cols-9 { --nx-u-cols-lg: 9; } .nx-u-cols-10 { --nx-u-cols: 10; } .nx-u-md-cols-10 { --nx-u-cols-md: 10; } .nx-u-lg-cols-10 { --nx-u-cols-lg: 10; } .nx-u-cols-11 { --nx-u-cols: 11; } .nx-u-md-cols-11 { --nx-u-cols-md: 11; } .nx-u-lg-cols-11 { --nx-u-cols-lg: 11; } .nx-u-cols-12 { --nx-u-cols: 12; } .nx-u-md-cols-12 { --nx-u-cols-md: 12; } .nx-u-lg-cols-12 { --nx-u-cols-lg: 12; } .nx-u-ratio-1-1 { --nx-u-ratio: minmax(0, 1fr) minmax(0, 1fr); } .nx-u-md-ratio-1-1 { --nx-u-ratio-md: minmax(0, 1fr) minmax(0, 1fr); } .nx-u-lg-ratio-1-1 { --nx-u-ratio-lg: minmax(0, 1fr) minmax(0, 1fr); } .nx-u-ratio-1-2 { --nx-u-ratio: minmax(0, 1fr) minmax(0, 2fr); } .nx-u-md-ratio-1-2 { --nx-u-ratio-md: minmax(0, 1fr) minmax(0, 2fr); } .nx-u-lg-ratio-1-2 { --nx-u-ratio-lg: minmax(0, 1fr) minmax(0, 2fr); } .nx-u-ratio-2-1 { --nx-u-ratio: minmax(0, 2fr) minmax(0, 1fr); } .nx-u-md-ratio-2-1 { --nx-u-ratio-md: minmax(0, 2fr) minmax(0, 1fr); } .nx-u-lg-ratio-2-1 { --nx-u-ratio-lg: minmax(0, 2fr) minmax(0, 1fr); } .nx-u-ratio-1-3 { --nx-u-ratio: minmax(0, 1fr) minmax(0, 3fr); } .nx-u-md-ratio-1-3 { --nx-u-ratio-md: minmax(0, 1fr) minmax(0, 3fr); } .nx-u-lg-ratio-1-3 { --nx-u-ratio-lg: minmax(0, 1fr) minmax(0, 3fr); } .nx-u-ratio-3-1 { --nx-u-ratio: minmax(0, 3fr) minmax(0, 1fr); } .nx-u-md-ratio-3-1 { --nx-u-ratio-md: minmax(0, 3fr) minmax(0, 1fr); } .nx-u-lg-ratio-3-1 { --nx-u-ratio-lg: minmax(0, 3fr) minmax(0, 1fr); } .nx-u-ratio-2-3 { --nx-u-ratio: minmax(0, 2fr) minmax(0, 3fr); } .nx-u-md-ratio-2-3 { --nx-u-ratio-md: minmax(0, 2fr) minmax(0, 3fr); } .nx-u-lg-ratio-2-3 { --nx-u-ratio-lg: minmax(0, 2fr) minmax(0, 3fr); } .nx-u-ratio-3-2 { --nx-u-ratio: minmax(0, 3fr) minmax(0, 2fr); } .nx-u-md-ratio-3-2 { --nx-u-ratio-md: minmax(0, 3fr) minmax(0, 2fr); } .nx-u-lg-ratio-3-2 { --nx-u-ratio-lg: minmax(0, 3fr) minmax(0, 2fr); } .nx-u-ratio-1-1-1 { --nx-u-ratio: repeat(3, minmax(0, 1fr)); } .nx-u-md-ratio-1-1-1 { --nx-u-ratio-md: repeat(3, minmax(0, 1fr)); } .nx-u-lg-ratio-1-1-1 { --nx-u-ratio-lg: repeat(3, minmax(0, 1fr)); } .nx-u-align-start { --nx-u-align: flex-start; } .nx-u-md-align-start { --nx-u-align-md: flex-start; } .nx-u-lg-align-start { --nx-u-align-lg: flex-start; } .nx-u-align-center { --nx-u-align: center; } .nx-u-md-align-center { --nx-u-align-md: center; } .nx-u-lg-align-center { --nx-u-align-lg: center; } .nx-u-align-end { --nx-u-align: flex-end; } .nx-u-md-align-end { --nx-u-align-md: flex-end; } .nx-u-lg-align-end { --nx-u-align-lg: flex-end; } .nx-u-align-stretch { --nx-u-align: stretch; } .nx-u-md-align-stretch { --nx-u-align-md: stretch; } .nx-u-lg-align-stretch { --nx-u-align-lg: stretch; } .nx-u-justify-start { --nx-u-justify: flex-start; } .nx-u-md-justify-start { --nx-u-justify-md: flex-start; } .nx-u-lg-justify-start { --nx-u-justify-lg: flex-start; } .nx-u-justify-center { --nx-u-justify: center; } .nx-u-md-justify-center { --nx-u-justify-md: center; } .nx-u-lg-justify-center { --nx-u-justify-lg: center; } .nx-u-justify-end { --nx-u-justify: flex-end; } .nx-u-md-justify-end { --nx-u-justify-md: flex-end; } .nx-u-lg-justify-end { --nx-u-justify-lg: flex-end; } .nx-u-justify-between { --nx-u-justify: space-between; } .nx-u-md-justify-between { --nx-u-justify-md: space-between; } .nx-u-lg-justify-between { --nx-u-justify-lg: space-between; } .nx-u-radius-none { border-radius: 0; } .nx-u-radius-s { border-radius: var(--nx-radius-sm); } .nx-u-radius-m { border-radius: var(--nx-radius); } .nx-u-radius-l { border-radius: var(--nx-radius-lg); } .nx-u-radius-pill { border-radius: var(--nx-radius-pill); } /* END generated utilities */ } /* css/admin.css */ /* Admin portal shell: sidebar navigation + content. Mobile: top bar with a menu button that opens the sidebar as a sheet. The shell is fixed to the window and the document never scrolls (08 §4: nothing for Safari to bounce or pull to refresh); the content and each pane scroll on their own. */ @layer components { html:has(body > [data-nx-admin]), body:has(> [data-nx-admin]) { height: 100dvh; overflow: hidden; overscroll-behavior: none; } .nx-admin { display: grid; height: 100dvh; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); } .nx-admin__top { position: relative; z-index: var(--nx-z-sticky); display: flex; min-width: 0; overflow: hidden; align-items: center; gap: var(--nx-space-3); height: var(--nx-header-height); padding: 0 var(--nx-space-4); background: var(--nx-color-surface); border-bottom: 1px solid var(--nx-color-border); } .nx-admin__brand { font-weight: var(--nx-weight-bold); text-decoration: none; color: var(--nx-color-text); white-space: nowrap; } .nx-admin__tools { display: flex; align-items: center; gap: var(--nx-space-1); margin-left: auto; } /* Phones (< 48rem, 16 §10.3): the tools fold into one ⋯ menu, a native popover; from 48rem they sit in the bar and the popover is undone. */ .nx-admin__more { flex: none; margin-left: auto; } @media (max-width: 47.99rem) { .nx-palette-trigger > span { display: none; } .nx-palette-trigger { display: inline-grid; place-items: center; min-width: 2.75rem; min-height: 2.25rem; } .nx-admin__brand { flex: 0 10 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .nx-admin__trail { flex: 1 1 4rem; overflow: hidden; } /* "‹ back" keeps room and never spills over the buttons */ .nx-admin__trail .nx-trail, .nx-admin__trail .nx-trail ol, .nx-trail li.nx-trail__back { min-width: 0; max-width: 100%; overflow: hidden; } .nx-trail li.nx-trail__back a { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; line-height: 2.25rem; } .nx-admin__tools:not(:popover-open) { display: none; } .nx-admin__tools:popover-open { position: fixed; inset: calc(var(--nx-header-height) + var(--nx-space-1)) var(--nx-space-2) auto auto; margin: 0; flex-direction: column; align-items: stretch; min-width: 13rem; padding: var(--nx-space-1); border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius); background: var(--nx-color-surface-raised); color: var(--nx-color-text); box-shadow: var(--nx-shadow-lg); } .nx-admin__tools:popover-open > *, .nx-admin__tools:popover-open .nx-admin__site > *, .nx-admin__tools:popover-open .nx-btn { justify-content: flex-start; width: 100%; min-height: 2.5rem; } } @media (min-width: 48rem) { .nx-admin__more { display: none; } .nx-admin__tools[popover] { position: static; inset: auto; width: auto; height: auto; margin: 0 0 0 auto; padding: 0; border: 0; overflow: visible; background: none; color: inherit; } } /* The shop's page for what's on screen (same tab). */ .nx-admin__site { display: contents; } .nx-admin__view-site { display: inline-flex; align-items: center; min-height: 2rem; padding: 0 var(--nx-space-3); color: var(--nx-color-text-muted); font-size: var(--nx-text-sm); text-decoration: none; white-space: nowrap; } .nx-admin__view-site:hover { color: var(--nx-color-text); text-decoration: underline; text-underline-offset: .25em; } .nx-admin__rail-toggle, .nx-admin__density { display: none; } .nx-admin__nav { display: none; } /* position: anything absolutely placed inside (visually hidden labels) stays inside the scrolling content instead of stretching the locked document. */ .nx-admin__main { position: relative; padding: var(--nx-space-6) var(--nx-space-4) var(--nx-space-16); min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; } .nx-admin__trail { flex: 1; min-width: 0; display: flex; } .nx-admin__main > .nx-page { max-width: var(--nx-content-width); margin: 0 auto; } .nx-icon { flex: none; width: 1.25rem; height: 1.25rem; } .nx-icon--letter { display: inline-grid; place-items: center; border-radius: var(--nx-radius-sm); background: var(--nx-color-surface-2); font-size: var(--nx-text-xs); font-weight: var(--nx-weight-bold); } .nx-nav { list-style: none; margin: 0; padding: var(--nx-space-3); display: grid; gap: 2px; } .nx-nav a { position: relative; display: flex; align-items: center; gap: var(--nx-space-3); min-height: 2.5rem; padding: 0 var(--nx-space-3); border-radius: var(--nx-radius-sm); color: var(--nx-color-text); text-decoration: none; font-weight: var(--nx-weight-medium); font-size: var(--nx-text-sm); } .nx-nav a .nx-icon { color: var(--nx-color-text-muted); } .nx-nav a:hover { background: var(--nx-color-surface-2); } .nx-nav a[aria-current="page"] { background: var(--nx-color-accent-soft); color: var(--nx-color-accent); } .nx-nav a[aria-current="page"] .nx-icon { color: currentColor; } .nx-nav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nx-nav__section { margin-top: var(--nx-space-4); padding: 0 var(--nx-space-3); font-size: var(--nx-text-xs); text-transform: uppercase; letter-spacing: var(--nx-tracking-caps); color: var(--nx-color-text-muted); } /* A section whose one item has its name (Today, Settings): the item says it; the menu only leaves a gap (a rule in the folded rail). */ .nx-nav__section--same { height: 0; overflow: hidden; color: transparent; } .nx-nav__section--same:first-child { display: none; } /* A page's tabs (16 §3.5): its sub-pages, links with the current one marked; the row scrolls on its own on a phone. */ .nx-pagetabs { margin: calc(-1 * var(--nx-space-2)) 0 var(--nx-space-4); border-bottom: 1px solid var(--nx-color-border); } .nx-pagetabs ul { display: flex; gap: var(--nx-space-1); margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; } .nx-pagetabs a { display: inline-flex; align-items: center; min-height: var(--nx-tap-target); padding: 0 var(--nx-space-3); border-bottom: 2px solid transparent; color: var(--nx-color-text-muted); font-size: var(--nx-text-sm); font-weight: var(--nx-weight-medium); text-decoration: none; white-space: nowrap; } .nx-pagetabs a:hover { color: var(--nx-color-text); } .nx-pagetabs .nx-nav-count { margin-left: var(--nx-space-2); } .nx-pagetabs a[aria-current="page"] { color: var(--nx-color-text); border-bottom-color: var(--nx-color-accent); } /* The account menu (16 §3.2): the avatar opens a native popover. */ .nx-admin__account { flex: none; } .nx-account:popover-open { position: fixed; inset: calc(var(--nx-header-height) + var(--nx-space-1)) var(--nx-space-2) auto auto; margin: 0; min-width: 15rem; max-height: calc(100dvh - var(--nx-header-height) - var(--nx-space-4)); overflow: auto; padding: var(--nx-space-2); border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius); background: var(--nx-color-surface-raised); color: var(--nx-color-text); box-shadow: var(--nx-shadow-lg); } .nx-account .nx-nav { padding: 0; } .nx-account form { margin-top: var(--nx-space-1); padding-top: var(--nx-space-1); border-top: 1px solid var(--nx-color-border); } .nx-account form .nx-btn { width: 100%; justify-content: flex-start; } /* Trail: the whole trail on wide screens; on a phone just "‹ back". */ .nx-trail { flex: 1; min-width: 0; font-size: var(--nx-text-sm); } .nx-trail ol { display: flex; align-items: center; gap: var(--nx-space-2); list-style: none; margin: 0; padding: 0; min-width: 0; } .nx-trail li { display: none; min-width: 0; white-space: nowrap; } .nx-trail li.nx-trail__back { display: block; } .nx-trail li.nx-trail__back a::before { content: "‹ "; } .nx-trail li.nx-trail__back a { display: inline-flex; align-items: center; min-height: 1.5rem; } .nx-trail a { color: var(--nx-color-text-muted); text-decoration: none; } .nx-trail a:hover { color: var(--nx-color-text); text-decoration: underline; } .nx-trail__here span { font-weight: var(--nx-weight-medium); overflow: hidden; text-overflow: ellipsis; } @media (min-width: 60rem) { .nx-trail li, .nx-trail li.nx-trail__back { display: flex; align-items: center; gap: var(--nx-space-2); overflow: hidden; } .nx-trail li + li::before { content: "›"; color: var(--nx-color-text-muted); } .nx-trail li.nx-trail__back a::before { content: none; } .nx-trail li a, .nx-trail li span { overflow: hidden; text-overflow: ellipsis; } } .nx-palette-trigger { flex: none; } @media (min-width: 60rem) { .nx-admin { grid-template-columns: var(--nx-sidebar-width) minmax(0, 1fr); } .nx-admin__top { grid-column: 1 / -1; } .nx-admin__nav { display: block; min-height: 0; overflow: auto; overscroll-behavior: contain; border-right: 1px solid var(--nx-color-border); background: var(--nx-color-surface); } .nx-admin__menu { display: none; } .nx-admin__rail-toggle { display: inline-flex; } .nx-admin__main { padding: var(--nx-space-8); } /* Icon rail: icons with the name as a tooltip; counts become a dot. */ .nx-admin--rail { grid-template-columns: 3.75rem minmax(0, 1fr); } .nx-admin--rail .nx-nav { padding: var(--nx-space-2); } .nx-admin--rail .nx-nav a { justify-content: center; padding: 0; } .nx-admin--rail .nx-nav__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .nx-admin--rail .nx-nav__section { height: 1px; margin: var(--nx-space-2) var(--nx-space-2); padding: 0; overflow: hidden; color: transparent; background: var(--nx-color-border); } .nx-admin--rail .nx-nav-count { position: absolute; top: .35rem; right: .45rem; width: .5rem; height: .5rem; min-width: 0; padding: 0; overflow: hidden; color: transparent; } .nx-admin--rail .nx-admin__rail-toggle { color: var(--nx-color-accent); } /* Focus: a thin strip on top, no side menu. */ .nx-admin--focus { --nx-header-height: 2.5rem; grid-template-columns: minmax(0, 1fr); } .nx-admin--focus .nx-admin__nav, .nx-admin--focus .nx-admin__rail-toggle, .nx-admin--focus .nx-admin__brand, .nx-admin--focus .nx-admin__density, .nx-admin--focus .nx-admin__account { display: none; } .nx-admin--focus .nx-admin__main { padding: var(--nx-space-4) var(--nx-space-6); } .nx-admin--focus .nx-admin__main > .nx-page { max-width: none; } .nx-admin--focus .nx-admin__focus { color: var(--nx-color-accent); } } /* Panes: pages side by side (or one above the other), each scrolling on its own; two with a resize handle, three from 1,600 px and four on ultrawide screens (ADR-027). On a phone they stack. */ .nx-split { display: grid; gap: var(--nx-space-4); } .nx-pane { position: relative; min-width: 0; } .nx-pane .nx-page { max-width: none; } .nx-pane .nx-table-wrap { max-width: 120rem; } .nx-pane--beside { border-top: 1px solid var(--nx-color-border); padding-top: var(--nx-space-4); } .nx-pane__bar { position: sticky; top: 0; z-index: 1; display: flex; justify-content: flex-end; align-items: center; gap: var(--nx-space-1); padding: var(--nx-space-1) 0; background: var(--nx-color-bg); } .nx-pane__link { min-height: 2rem; margin-right: auto; border-color: var(--nx-color-accent); color: var(--nx-color-accent); } .nx-pane__link[aria-pressed="false"] { border-color: var(--nx-color-border-strong); color: var(--nx-color-text-muted); } .nx-split__handle, .nx-pane__popout, .nx-pane__more { display: none; } @media (min-width: 60rem) { .nx-admin__main:has(> .nx-split) { padding: 0; overflow: hidden; } .nx-split { --nx-split: 50%; gap: 0; height: 100%; grid-template-columns: minmax(0, var(--nx-split)) auto minmax(0, 1fr); } .nx-split--3 { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); } .nx-split--4 { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); } .nx-pane { overflow: auto; overscroll-behavior: contain; padding: var(--nx-space-6); } .nx-pane--beside { border-top: 0; padding-top: 0; } .nx-pane__popout:not([hidden]), .nx-pane__more:not([hidden]) { display: inline-flex; } .nx-split__handle { display: block; width: 7px; cursor: col-resize; background: var(--nx-color-border); background-clip: content-box; padding: 0 3px; touch-action: none; } .nx-split__handle--fixed { cursor: default; } .nx-split__handle:not(.nx-split__handle--fixed):hover, .nx-split__handle:focus-visible { background-color: var(--nx-color-accent); padding: 0 2px; } /* Linked: the list's pane drives the record's (ADR-034); the join is drawn in the accent colour. */ .nx-split--linked .nx-pane--list + .nx-split__handle, .nx-split--linked .nx-split__handle:has(+ .nx-pane--list) { background-color: var(--nx-color-accent); } .nx-admin--splith .nx-split { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, var(--nx-split)) auto minmax(0, 1fr); } .nx-admin--splith .nx-split--3 { grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); } .nx-admin--splith .nx-split--4 { grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); } .nx-admin--splith .nx-split__handle { width: auto; height: 7px; cursor: row-resize; padding: 3px 0; } .nx-admin--splith .nx-split__handle--fixed { cursor: default; } .nx-admin--splith .nx-split__handle:not(.nx-split__handle--fixed):hover, .nx-admin--splith .nx-split__handle:focus-visible { padding: 2px 0; } .nx-admin--splith [data-nx-ui="splith"] { color: var(--nx-color-accent); } } /* A pane popped out into its own window: just the page. */ .nx-popout .nx-admin { grid-template-columns: minmax(0, 1fr); } .nx-popout .nx-admin__nav, .nx-popout .nx-admin__rail-toggle { display: none; } .nx-admin--still .nx-admin__still { color: var(--nx-color-accent); } /* Lists (ADR-033, ADR-034): one tab stop; the selected row is marked with the accent; rows far off screen skip rendering. */ .nx-list:focus { outline: none; } .nx-list:focus-visible { outline: var(--nx-focus-width) solid var(--nx-color-focus); outline-offset: calc(-1 * var(--nx-focus-width)); } [data-nx-row] { cursor: pointer; content-visibility: auto; contain-intrinsic-size: auto 3.5rem; } tr[data-nx-row] { content-visibility: visible; } [data-nx-row]:hover { background: var(--nx-color-surface-2); } [data-nx-row][aria-selected="true"] { background: var(--nx-color-accent-soft); box-shadow: inset 3px 0 0 var(--nx-color-accent); } .nx-list:focus-visible [data-nx-row][aria-selected="true"] { box-shadow: inset 3px 0 0 var(--nx-color-accent), inset 0 0 0 1px var(--nx-color-accent); } .nx-list-foot { display: flex; justify-content: center; margin: var(--nx-space-4) 0 0; font-size: var(--nx-text-sm); } .nx-list-foot a { color: var(--nx-color-text-muted); text-decoration: none; } .nx-list-count { font-variant-numeric: tabular-nums; } .nx-page__intro { max-width: 65ch; margin: calc(-1 * var(--nx-space-4)) 0 var(--nx-space-6); } [aria-busy="true"] > .nx-list-wrap, [aria-busy="true"] [data-nx-region] { opacity: .7; transition: opacity var(--nx-duration) var(--nx-ease) var(--nx-duration-fast); } /* Picking pieces (the drop's Pieces panel): ticked rows with a photo. */ .nx-pick { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .nx-pick__row { display: grid; grid-template-columns: auto 48px 1fr; gap: var(--nx-space-3); align-items: center; min-height: var(--nx-tap-target); padding: var(--nx-space-2) var(--nx-space-3); border-radius: var(--nx-radius-sm); cursor: pointer; } .nx-pick__row:hover { background: var(--nx-color-surface-2); } .nx-pick__row input { width: 1.25rem; height: 1.25rem; } .nx-pick__row--off { cursor: default; color: var(--nx-color-text-muted); } .nx-pick__row--off .nx-thumb { opacity: .55; } .nx-pick__text { display: grid; gap: 2px; min-width: 0; } /* Compact: only with a mouse or trackpad; targets stay ≥ 24px (WCAG 2.2). */ @media (pointer: fine) { .nx-admin__density { display: inline-flex; } .nx-admin--compact { --nx-space-3: .5rem; --nx-space-4: .75rem; --nx-space-5: 1rem; --nx-space-6: 1.125rem; --nx-space-8: 1.5rem; --nx-text-md: .9375rem; --nx-text-2xl: 1.5rem; --nx-header-height: 3rem; --nx-sidebar-width: 13.5rem; --nx-tap-target: 32px; --nx-control-h: var(--nx-tap-target); } .nx-admin--compact .nx-table th, .nx-admin--compact .nx-table td { padding-block: var(--nx-space-2); } .nx-admin--compact .nx-nav a { min-height: 2rem; } .nx-admin--compact .nx-admin__density { color: var(--nx-color-accent); } } .nx-page__header { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--nx-space-3); margin-bottom: var(--nx-space-6); } .nx-page__title { font-size: var(--nx-text-2xl); } .nx-footnote { margin-top: var(--nx-space-3); font-size: var(--nx-text-sm); max-width: 60ch; } .nx-palette-trigger { display: inline-flex; align-items: center; gap: var(--nx-space-2); min-height: 2.25rem; padding: 0 var(--nx-space-3); border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius-sm); background: var(--nx-color-surface-2); color: var(--nx-color-text-muted); font-size: var(--nx-text-sm); } } /* Catalogue (commerce admin). */ @layer components { .nx-filters { display: grid; gap: var(--nx-space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); align-items: end; } .nx-filters .nx-field + .nx-field { margin-top: 0; } .nx-filters .nx-form-actions { margin-top: 0; } .nx-inline-form { flex-wrap: nowrap; } .nx-inline-form .nx-field { min-width: 10rem; } .nx-bulk { border: 0; padding: 0; margin: 0; } .nx-select--inline { width: auto; } .nx-thumb-cell { width: 3.5rem; } .nx-thumb { width: 48px; height: 60px; object-fit: cover; border-radius: var(--nx-radius-sm); background: var(--nx-color-surface-2); } .nx-thumb--empty { display: block; } .nx-item-link { font-weight: var(--nx-weight-medium); } .nx-editor { display: grid; gap: var(--nx-space-8); } @media (min-width: 72rem) { .nx-editor { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; } .nx-editor__side { position: sticky; top: var(--nx-space-4); } } .nx-editor fieldset.nx-card { padding: var(--nx-space-5); } .nx-editor legend.nx-card__title { font-size: var(--nx-text-lg); font-weight: var(--nx-weight-bold); padding: 0 var(--nx-space-2); } /* A field an agent drafted: the agent's violet, spread past the field's edges with a shadow so the field keeps its place in the grid. */ .nx-ai { border-radius: var(--nx-radius-sm); background: var(--nx-color-agent-soft); box-shadow: 0 calc(-1 * var(--nx-space-2)) 0 var(--nx-space-2) var(--nx-color-agent-soft); } .nx-ai__confirm { min-height: 2rem; font-size: var(--nx-text-sm); } .nx-sticky-actions { position: sticky; bottom: 0; margin: 0; padding: var(--nx-space-3) 0; background: linear-gradient(to top, var(--nx-color-bg) 70%, transparent); } .nx-checklist { margin: var(--nx-space-2) 0 0; padding-left: 1.2em; } .nx-photo-list { display: grid; gap: var(--nx-space-4); list-style: none; margin: 0; padding: 0; } .nx-photo { display: grid; grid-template-columns: 6rem 1fr; gap: var(--nx-space-3); align-items: start; } .nx-photo img { width: 6rem; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--nx-radius-sm); background: var(--nx-color-surface-2); } .nx-result-list { margin: var(--nx-space-2) 0 0; padding-left: 1.2em; } .nx-dropzone { display: grid; gap: var(--nx-space-2); padding: var(--nx-space-6); border: 2px dashed var(--nx-color-border-strong); border-radius: var(--nx-radius); background: var(--nx-color-surface-2); } .nx-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); } .nx-stats { display: flex; flex-wrap: wrap; gap: var(--nx-space-3); margin: 0; } .nx-stats > div { min-width: 7rem; padding: var(--nx-space-3) var(--nx-space-4); border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius); background: var(--nx-color-surface); } .nx-stats dt { font-size: var(--nx-text-sm); color: var(--nx-color-text-muted); } .nx-stats dd { margin: 0; font-size: var(--nx-text-2xl); font-weight: var(--nx-weight-bold); font-variant-numeric: tabular-nums; } .nx-stats--bad dd { color: var(--nx-color-danger); } .nx-issues { margin: 0; padding-left: 1.1em; } .nx-diff { display: grid; grid-template-columns: max-content 1fr; gap: var(--nx-space-1) var(--nx-space-3); margin: 0; font-size: var(--nx-text-sm); } .nx-diff dd { margin: 0; } .nx-diff del { color: var(--nx-color-danger); margin-right: var(--nx-space-2); } .nx-diff ins { text-decoration: none; color: var(--nx-color-success); } } /* Drops (commerce admin). */ @layer components { .nx-wrap { flex-wrap: wrap; } .nx-row--tight { gap: var(--nx-space-1); flex-wrap: nowrap; } .nx-warn { color: var(--nx-color-warning); font-size: var(--nx-text-sm); } /* The Pieces panel's found pieces: a box that scrolls, loading more. */ .nx-candidates { border: 0; padding: 0; margin: 0; min-width: 0; max-height: 24rem; overflow-y: auto; } .nx-pick__state { display: flex; flex-wrap: wrap; gap: var(--nx-space-2); align-items: center; } } /* Orders and ledger. */ @layer components { .nx-journal-lines { list-style: none; margin: 0; padding: 0; font-size: var(--nx-text-sm); font-variant-numeric: tabular-nums; } .nx-table__total td { font-weight: var(--nx-weight-bold); border-top: 2px solid var(--nx-color-border-strong); } } /* Inbox and thread (conversations). */ @layer components { .nx-inbox__list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius); background: var(--nx-color-surface); } .nx-inbox__row + .nx-inbox__row { border-top: 1px solid var(--nx-color-border); } .nx-inbox__link { display: grid; gap: var(--nx-space-1); padding: var(--nx-space-3) var(--nx-space-4); color: var(--nx-color-text); text-decoration: none; min-height: var(--nx-tap-target); } .nx-inbox__link:hover { background: var(--nx-color-surface-2); } .nx-inbox__top { display: flex; justify-content: space-between; gap: var(--nx-space-3); align-items: baseline; } .nx-inbox__name { font-weight: var(--nx-weight-medium); } .nx-inbox__row--new .nx-inbox__name { font-weight: var(--nx-weight-bold); } .nx-inbox__when { font-size: var(--nx-text-xs); white-space: nowrap; } .nx-inbox__meta { display: flex; flex-wrap: wrap; gap: var(--nx-space-2); align-items: center; } .nx-inbox__dot { display: inline-flex; align-items: center; gap: var(--nx-space-1); font-size: var(--nx-text-xs); color: var(--nx-color-accent); font-weight: var(--nx-weight-medium); } .nx-inbox__dot::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; } .nx-inbox__preview { color: var(--nx-color-text-muted); font-size: var(--nx-text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nx-thread { display: grid; gap: var(--nx-space-6); } .nx-thread__main { min-width: 0; } .nx-composer { border-top: 1px solid var(--nx-color-border); padding-top: var(--nx-space-4); } .nx-composer__label { margin: 0; font-size: var(--nx-text-sm); font-weight: var(--nx-weight-medium); } .nx-relabel { flex-wrap: wrap; } .nx-linkref > .nx-field { flex: 1; } .nx-select--sm, .nx-input--sm { --nx-control-h: 2.25rem; font-size: var(--nx-text-sm); } .nx-linked { display: flex; gap: var(--nx-space-3); align-items: flex-start; } .nx-linked img { flex: none; object-fit: cover; border-radius: var(--nx-radius-sm); background: var(--nx-color-skeleton); } @media (min-width: 60rem) { .nx-thread { grid-template-columns: minmax(0, 1fr) 18rem; align-items: start; } .nx-thread__side { position: sticky; top: var(--nx-space-4); } } } /* Packing board (fulfilment): three columns on wide screens, stacked on phones with "To pack" first. */ @layer components { .nx-kanban { display: grid; gap: var(--nx-space-4); align-items: start; } .nx-kanban__col { background: var(--nx-color-surface-2); border-radius: var(--nx-radius); padding: var(--nx-space-3); min-width: 0; } .nx-kanban__title { font-size: var(--nx-text-md); margin: 0 0 var(--nx-space-3); display: flex; gap: var(--nx-space-2); align-items: baseline; } .nx-kanban__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-space-3); } .nx-kanban__empty { margin: 0; font-size: var(--nx-text-sm); } @media (min-width: 60rem) { .nx-kanban { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .nx-ocard { background: var(--nx-color-surface); border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius); padding: var(--nx-space-3); display: grid; gap: var(--nx-space-2); } .nx-ocard__head { display: flex; justify-content: space-between; gap: var(--nx-space-2); align-items: baseline; flex-wrap: wrap; } .nx-ocard__title { font-size: var(--nx-text-md); margin: 0; } .nx-ocard__title a { color: var(--nx-color-text); } .nx-ocard__when { font-size: var(--nx-text-xs); } .nx-ocard__to, .nx-ocard__tracking { margin: 0; font-size: var(--nx-text-sm); } .nx-ocard__pieces { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-space-2); } .nx-ocard__piece { display: flex; gap: var(--nx-space-2); align-items: center; font-size: var(--nx-text-sm); } .nx-ocard__thumb { flex: none; width: 44px; height: 55px; border-radius: var(--nx-radius-sm); overflow: hidden; background: var(--nx-color-skeleton); } .nx-ocard__thumb img { width: 100%; height: 100%; object-fit: cover; } .nx-ocard__pname { min-width: 0; overflow-wrap: anywhere; } .nx-inline-form { display: inline; } /* The ship form sits in a packing card: small controls. */ .nx-shipform { --nx-control-h: 2.25rem; } .nx-shipform__row { align-items: end; } .nx-shipform__row .nx-field { width: 7rem; } .nx-shipform .nx-field + .nx-field { margin-top: var(--nx-space-2); } .nx-shipform__manual summary { cursor: pointer; font-size: var(--nx-text-sm); min-height: var(--nx-tap-target); display: flex; align-items: center; } } /* Refunds on the order page: each piece with its "back on sale" choice under it. */ @layer components { .nx-refund-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-space-3); } .nx-refund-line { display: grid; gap: var(--nx-space-1); padding-bottom: var(--nx-space-3); border-bottom: 1px solid var(--nx-color-border); } .nx-refund-line span { overflow-wrap: anywhere; } .nx-refund-line__restock { margin-left: var(--nx-space-8); font-size: var(--nx-text-sm); } } /* Customer profile. */ @layer components { .nx-break { overflow-wrap: anywhere; } .nx-fit { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); gap: var(--nx-space-2) var(--nx-space-4); margin: 0; } .nx-fit dt { font-size: var(--nx-text-sm); color: var(--nx-color-text-muted); } .nx-fit dd { margin: 0; font-variant-numeric: tabular-nums; } } /* Packing slip: an A4/Letter page with photos, printed without the admin chrome. */ @layer components { .nx-slip { max-width: 44rem; } .nx-slip__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--nx-space-6); border-bottom: 2px solid var(--nx-color-text); padding-bottom: var(--nx-space-4); } .nx-slip__shop { margin: 0; font-family: var(--nx-font-heading); font-size: var(--nx-text-lg); } .nx-slip__title { margin: var(--nx-space-1) 0 0; font-size: var(--nx-text-2xl); } .nx-slip__to { font-style: normal; line-height: var(--nx-leading); } .nx-slip__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-space-4); } .nx-slip__line { display: grid; grid-template-columns: 120px 1fr 1.5rem; gap: var(--nx-space-4); align-items: start; break-inside: avoid; } .nx-slip__line p { margin: 0; } .nx-slip__photo { width: 120px; height: 150px; background: var(--nx-color-skeleton); border-radius: var(--nx-radius-sm); overflow: hidden; } .nx-slip__photo img { width: 100%; height: 100%; object-fit: cover; } .nx-slip__name { font-weight: var(--nx-weight-medium); } .nx-slip__check { width: 1.25rem; height: 1.25rem; border: 2px solid var(--nx-color-text); border-radius: 3px; } .nx-slip__foot { border-top: 1px solid var(--nx-color-border); padding-top: var(--nx-space-4); } .nx-slip__foot p { margin: 0; } @media (max-width: 30rem) { .nx-slip__line { grid-template-columns: 80px 1fr 1.25rem; } .nx-slip__photo { width: 80px; height: 100px; } } @media print { .nx-print-page .nx-admin__top, .nx-print-page .nx-admin__nav, .nx-print-page .nx-skip-link, .nx-no-print { display: none !important; } html:has(.nx-print-page), .nx-print-page, .nx-print-page .nx-admin, .nx-print-page .nx-admin__main { height: auto; overflow: visible; } .nx-print-page .nx-admin, .nx-print-page .nx-admin__main, .nx-print-page .nx-page { display: block; padding: 0; margin: 0; max-width: none; } .nx-print-page { background: #fff; color: #000; } @page { margin: 14mm; } } } /* Margins and lots. */ @layer components { .nx-neg { color: var(--nx-color-danger); } .nx-daterange { align-items: end; } .nx-daterange > .nx-field { margin-top: 0; } .nx-num > .nx-field > .nx-f__control { justify-items: end; } .nx-fieldset { border: 0; margin: 0; padding: 0; } .nx-fieldset legend { font-weight: var(--nx-weight-medium); margin-bottom: var(--nx-space-2); } .nx-lotpiece { display: flex; gap: var(--nx-space-2); align-items: center; font-weight: var(--nx-weight-regular); } .nx-lotpiece img { flex: none; object-fit: cover; border-radius: var(--nx-radius-sm); background: var(--nx-color-skeleton); } .nx-input--num { width: 6.5rem; text-align: right; } } /* Drag-to-order rows (drop builder). */ @layer components { .nx-sortrow { cursor: grab; } .nx-sortrow.is-dragging { opacity: .45; } .nx-sortrow a, .nx-sortrow button { cursor: pointer; } } /* Terminal (xterm.js). */ @layer components { .nx-term { display: grid; gap: var(--nx-space-2); } .nx-term__screen { height: min(70dvh, 40rem); padding: var(--nx-space-2); background: #141412; border-radius: var(--nx-radius); overflow: hidden; } } @layer components { .nx-keys { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-space-2); } .nx-keys > li { justify-content: space-between; border-bottom: 1px solid var(--nx-color-border); padding-bottom: var(--nx-space-2); } } /* The Node editor lens (09 §12, ADR-035): (web/static/js/space/space-nodes.js). DOM cards and SVG wires in one plane, panned and zoomed with one transform set through the CSSOM. */ @layer components { .nx-nodes { display: grid; gap: var(--nx-space-3); } .nx-nodes__meta { border: 0; padding: 0; margin: 0; } /* and .nx-form-grid */ .nx-nodes__meta legend { font-weight: var(--nx-weight-bold); margin-bottom: var(--nx-space-2); } .nx-nodes__toolbar { display: flex; flex-wrap: wrap; gap: var(--nx-space-2); align-items: center; } .nx-nodes__state { margin: 0 0 0 auto; font-size: var(--nx-text-sm); color: var(--nx-color-text-muted); } .nx-nodes__palette { position: relative; flex: 1 1 16rem; max-width: 24rem; } .nx-nodes__types { position: absolute; z-index: var(--nx-z-overlay); left: 0; right: 0; top: calc(100% + 4px); max-height: 20rem; overflow: auto; margin: 0; padding: var(--nx-space-1); list-style: none; background: var(--nx-color-bg); border: 1px solid var(--nx-color-border-strong); border-radius: var(--nx-radius); box-shadow: var(--nx-shadow-lg); } .nx-nodes__type { display: grid; gap: 2px; padding: var(--nx-space-2); border-radius: var(--nx-radius-sm); cursor: pointer; min-height: var(--nx-tap-target); } .nx-nodes__type[aria-selected="true"] { background: var(--nx-color-accent-soft); outline: 2px solid var(--nx-color-accent); outline-offset: -2px; } .nx-nodes__type-t { font-weight: var(--nx-weight-medium); } .nx-nodes__type-k { font-size: var(--nx-text-xs); font-family: var(--nx-font-mono); overflow-wrap: anywhere; } .nx-nodes__crumbs ol { display: flex; flex-wrap: wrap; gap: var(--nx-space-1); align-items: center; list-style: none; margin: 0; padding: 0; } .nx-nodes__crumbs li + li::before { content: "/"; color: var(--nx-color-text-muted); margin-right: var(--nx-space-1); } .nx-nodes__crumbs [aria-current] { font-weight: var(--nx-weight-bold); } .nx-nodes__problems { border: 1px solid var(--nx-color-danger); border-radius: var(--nx-radius); padding: var(--nx-space-2) var(--nx-space-3); background: var(--nx-color-danger-soft); } .nx-nodes__problems-h { font-size: var(--nx-text-sm); margin: 0 0 var(--nx-space-1); } .nx-nodes__problems ol { margin: 0; padding-left: 1.4em; display: grid; gap: 2px; } .nx-nodes__problem { background: none; border: 0; padding: 2px 0; font: inherit; font-size: var(--nx-text-sm); color: var(--nx-color-text); text-align: left; cursor: pointer; text-decoration: underline; min-height: 24px; } .nx-nodes__body { display: grid; gap: var(--nx-space-3); } .nx-nodes--text .nx-nodes__body { grid-template-columns: minmax(0, 1fr); } @media (min-width: 64rem) { .nx-nodes--text .nx-nodes__body { grid-template-columns: minmax(0, 1fr) minmax(20rem, 34%); } } .nx-nodes__canvas { position: relative; overflow: hidden; height: min(72vh, 40rem); border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius); background-color: var(--nx-color-surface); background-image: radial-gradient(var(--nx-color-border) 1px, transparent 1px); background-size: 24px 24px; touch-action: none; cursor: grab; } .nx-nodes__plane { position: absolute; inset: 0 auto auto 0; transform-origin: 0 0; } .nx-nodes__wires { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; } .nx-nodes__wire { fill: none; stroke: var(--nx-color-text-muted); stroke-width: 1.5; } .nx-nodes__wire--data { stroke: var(--nx-color-accent); stroke-width: 2; } .nx-nodes__wire--problem { stroke: var(--nx-color-danger); stroke-dasharray: 6 4; } .nx-nodes__wire--drag { stroke: var(--nx-color-focus); stroke-dasharray: 4 4; } .nx-nodes__wire--boundary { stroke-dasharray: 2 4; } .nx-nodes__wires marker path { fill: var(--nx-color-text-muted); } .nx-nodes__labels { position: absolute; left: 0; top: 0; } .nx-nodes__wlabel { position: absolute; left: 0; top: 0; display: flex; gap: 4px; align-items: center; white-space: nowrap; font-size: var(--nx-text-xs); color: var(--nx-color-text); } .nx-nodes__wlabel > span { background: var(--nx-color-bg); border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius-pill); padding: 0 6px; } .nx-nodes__count { font-variant-numeric: tabular-nums; font-weight: var(--nx-weight-medium); } .nx-nodes__cards { position: absolute; left: 0; top: 0; list-style: none; margin: 0; padding: 0; } .nx-nodes__item { position: absolute; left: 0; top: 0; } .nx-nodes__card { position: relative; width: 224px; display: grid; border: 1px solid var(--nx-color-border-strong); border-left-width: 4px; border-radius: var(--nx-radius); background: var(--nx-color-bg); color: var(--nx-color-text); box-shadow: var(--nx-shadow-sm); cursor: default; } .nx-nodes__card--start, .nx-nodes__card--end { border-left-color: var(--nx-color-text); } .nx-nodes__card--action { border-left-color: var(--nx-color-accent); } .nx-nodes__card--approval, .nx-nodes__card--agent { border-left-color: var(--nx-color-info); } .nx-nodes__card--group { border-style: double; border-width: 3px; border-left-width: 6px; border-left-color: var(--nx-color-text-muted); } .nx-nodes__card--selected { border-color: var(--nx-color-accent); box-shadow: var(--nx-shadow); z-index: 1; } .nx-nodes__card--problem { border-color: var(--nx-color-danger); border-style: dashed; } .nx-nodes__card--failed { outline: 2px solid var(--nx-color-danger); outline-offset: 2px; } @media (prefers-reduced-motion: no-preference) { .nx-nodes__card--failed { animation: nx-nodes-pulse var(--nx-duration-linger) var(--nx-ease) infinite; } @keyframes nx-nodes-pulse { 50% { outline-color: transparent; outline-offset: 6px; } } } .nx-nodes__node { display: grid; gap: 2px; text-align: left; padding: var(--nx-space-2) var(--nx-space-3); border: 0; border-radius: var(--nx-radius) var(--nx-radius) 0 0; background: transparent; color: inherit; font: inherit; cursor: pointer; min-height: 44px; } .nx-nodes__node:focus-visible, .nx-nodes__port:focus-visible, .nx-nodes__badge:focus-visible { outline: 3px solid var(--nx-color-focus); outline-offset: 2px; } /* A boundary marker (inside a group): the outside step a wire goes to or comes from. */ .nx-nodes__boundary { width: 160px; border: 1px dashed var(--nx-color-border-strong); border-radius: var(--nx-radius-pill); background: var(--nx-color-surface); } .nx-nodes__boundary--in { border-right: 3px solid var(--nx-color-text-muted); } .nx-nodes__boundary--out { border-left: 3px solid var(--nx-color-text-muted); } .nx-nodes__bmark { display: grid; gap: 0; width: 100%; min-height: 44px; padding: var(--nx-space-1) var(--nx-space-3); border: 0; border-radius: inherit; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; } .nx-nodes__bmark .nx-nodes__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nx-nodes__bmark:focus-visible { outline: 3px solid var(--nx-color-focus); outline-offset: 2px; } .nx-nodes__node[aria-pressed="true"] { background: var(--nx-color-accent-soft); } .nx-nodes__kind { font-size: var(--nx-text-xs); text-transform: uppercase; letter-spacing: var(--nx-tracking-caps); color: var(--nx-color-text-muted); } .nx-nodes__title { font-size: var(--nx-text-sm); font-weight: var(--nx-weight-bold); overflow-wrap: anywhere; } .nx-nodes__stats { font-size: var(--nx-text-xs); color: var(--nx-color-text-muted); font-variant-numeric: tabular-nums; } .nx-nodes__stats:empty { display: none; } .nx-nodes__ports { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--nx-space-2); padding: 0 0 var(--nx-space-1); border-top: 1px solid var(--nx-color-border); } .nx-nodes__ins, .nx-nodes__outs { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; } .nx-nodes__pin { display: flex; align-items: center; gap: 2px; min-height: 24px; font-size: var(--nx-text-xs); } .nx-nodes__outs .nx-nodes__pin { flex-direction: row-reverse; text-align: right; } .nx-nodes__pname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--nx-color-text-muted); } /* A port's hit area is 24 px (WCAG 2.5.8); the dot sits on the card's edge. */ .nx-nodes__port { position: relative; flex: none; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: crosshair; } .nx-nodes__ins .nx-nodes__port { margin-left: -14px; } .nx-nodes__outs .nx-nodes__port { margin-right: -14px; } .nx-nodes__port::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 2px solid var(--nx-color-text-muted); background: var(--nx-color-bg); } .nx-nodes__port--data::before { border-color: var(--nx-color-accent); border-radius: 3px; } .nx-nodes__port--required::before { background: var(--nx-color-accent-soft); } .nx-nodes__port--problem::before { border-color: var(--nx-color-danger); background: var(--nx-color-danger-soft); } .nx-nodes__port--source::before { background: var(--nx-color-focus); border-color: var(--nx-color-focus); } .nx-nodes__port--ok::before { border-color: var(--nx-color-success); background: var(--nx-color-success-soft); box-shadow: 0 0 0 4px var(--nx-color-success-soft); } .nx-nodes__pin:has(.nx-nodes__port--no) { opacity: 0.45; } .nx-nodes--connecting .nx-nodes__node, .nx-nodes--dragging .nx-nodes__canvas { cursor: crosshair; } .nx-nodes__badge { position: absolute; top: -12px; right: -12px; min-width: 24px; height: 24px; padding: 0 6px; border: 0; border-radius: var(--nx-radius-pill); background: var(--nx-color-danger); color: var(--nx-color-danger-contrast); font: inherit; font-size: var(--nx-text-xs); font-weight: var(--nx-weight-bold); cursor: help; } .nx-nodes__badge--wire { position: static; } .nx-nodes__runlink { margin: 0 var(--nx-space-3) var(--nx-space-2); font-size: var(--nx-text-xs); color: var(--nx-color-danger); font-weight: var(--nx-weight-medium); } .nx-nodes__detail { display: grid; gap: var(--nx-space-2); padding: var(--nx-space-2) var(--nx-space-3) var(--nx-space-3); border-top: 1px solid var(--nx-color-border); cursor: auto; } .nx-nodes__detail:empty { display: none; } .nx-nodes__conns { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: var(--nx-text-xs); } .nx-nodes__conns li { display: flex; justify-content: space-between; align-items: center; gap: var(--nx-space-1); } .nx-nodes__io pre { max-height: 8rem; overflow: auto; margin: 0; font-size: var(--nx-text-xs); white-space: pre-wrap; } .nx-nodes__io-h { margin: var(--nx-space-1) 0 0; font-size: var(--nx-text-xs); color: var(--nx-color-text-muted); } .nx-nodes__slot .nx-field { gap: 2px; } .nx-nodes__slot .nx-input, .nx-nodes__slot .nx-select, .nx-nodes__slot .nx-textarea { font-size: var(--nx-text-sm); } .nx-nodes__status { margin: 0; font-size: var(--nx-text-xs); min-height: 1.2em; } .nx-nodes__tip { position: absolute; left: 0; top: 0; z-index: var(--nx-z-overlay); max-width: 20rem; padding: var(--nx-space-1) var(--nx-space-2); background: var(--nx-color-text); color: var(--nx-color-bg); border-radius: var(--nx-radius-sm); font-size: var(--nx-text-xs); white-space: pre-line; pointer-events: none; } .nx-nodes { position: relative; } .nx-nodes__text { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--nx-space-2); min-height: 20rem; max-height: min(72vh, 40rem); border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius); padding: var(--nx-space-2); background: var(--nx-color-bg); } .nx-nodes__text-head { display: flex; justify-content: space-between; align-items: center; } .nx-nodes__text-h { font-size: var(--nx-text-md); margin: 0; } .nx-nodes__text-body { min-height: 0; overflow: auto; } .nx-nodes__text-note { margin: 0; font-size: var(--nx-text-xs); } .nx-nodes__text-bad { background: var(--nx-color-danger-soft); } @media (prefers-contrast: more) { .nx-nodes__wire { stroke: var(--nx-color-text); stroke-width: 2; } .nx-nodes__port::before { border-color: var(--nx-color-text); } } .nx-flow__yaml textarea { font-size: var(--nx-text-sm); } .nx-flow-sim { display: grid; gap: var(--nx-space-2); padding-left: 1.2em; } } /* CodeMirror in the lens's text pane: unlayered, as the vendored stylesheet it overrides. */ .nx-nodes__text-body .CodeMirror { height: auto; min-height: 18rem; background: var(--nx-color-surface); color: var(--nx-color-text); font-family: var(--nx-font-mono); font-size: var(--nx-text-sm); } .nx-nodes__text-body .CodeMirror-focused { box-shadow: inset 0 0 0 2px var(--nx-color-focus); } .nx-nodes__text-body .CodeMirror-gutters { background: var(--nx-color-surface-2); border-right: 1px solid var(--nx-color-border); } .nx-nodes__text-body .CodeMirror-linenumber { color: var(--nx-color-text-muted); } .nx-nodes__text-body .CodeMirror-cursor { border-left-color: var(--nx-color-text); } /* Nexus Studio (M12). */ @layer components { .nx-subnav ul { display: flex; flex-wrap: wrap; gap: var(--nx-space-1); list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--nx-color-border); } .nx-subnav a { display: inline-flex; align-items: center; min-height: var(--nx-tap-target); padding: 0 var(--nx-space-3); color: var(--nx-color-text); text-decoration: none; border-bottom: 2px solid transparent; } .nx-subnav a[aria-current="page"] { border-bottom-color: var(--nx-color-accent); font-weight: var(--nx-weight-bold); } .nx-studio { display: grid; gap: var(--nx-space-4); } @media (min-width: 64rem) { .nx-studio { grid-template-columns: 14rem minmax(0, 1fr) 18rem; align-items: start; } } .nx-studio__files ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-space-1); } .nx-studio__files a { overflow-wrap: anywhere; } .nx-studio__files a[aria-current="page"] { font-weight: var(--nx-weight-bold); } .nx-studio__code { font-size: var(--nx-text-sm); line-height: 1.5; tab-size: 2; white-space: pre; overflow-wrap: normal; overflow-x: auto; } .nx-studio__ref dl { display: grid; gap: var(--nx-space-1); font-size: var(--nx-text-sm); } .nx-studio__ref dd { margin: 0 0 var(--nx-space-2); color: var(--nx-color-text-muted); } .nx-studio__field { border-bottom: 1px solid var(--nx-color-border); } .nx-studio__preview { border: 1px dashed var(--nx-color-border); border-radius: var(--nx-radius-md); padding: var(--nx-space-4); } } /* The glow between linked windows (glow.js). */ @layer components { .nx-glow { position: fixed; inset: 0; width: 100vw; height: 100dvh; pointer-events: none; z-index: 2147483000; } } /* The key-hint bar (keymap.js): what can follow a sequence's first key, or the ⌘ keys while ⌘ is held, over a context line for where the focus is. It takes no pointer events and never shows on a phone or a touch-first device, so it never covers what you'd tap. */ @layer components { .nx-keyhints { position: fixed; left: 50%; bottom: var(--nx-space-3); z-index: var(--nx-z-overlay); transform: translateX(-50%); display: grid; justify-items: center; gap: var(--nx-space-1); width: max-content; max-width: min(56rem, calc(100vw - 2 * var(--nx-space-4))); pointer-events: none; font-size: var(--nx-text-xs); line-height: 1.5; color: var(--nx-color-text-muted); } .nx-keyhints[hidden], .nx-keyhints > [hidden] { display: none; } /* On a Space it floats over the canvas, above the zoom control and the notices. */ .nx-body--space .nx-keyhints { bottom: calc(var(--nx-space-3) + 3.25rem); } .nx-keyhints__next, .nx-keyhints__ctx { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--nx-space-1) var(--nx-space-3); padding: var(--nx-space-1) var(--nx-space-3); background: var(--nx-color-surface); border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius); box-shadow: var(--nx-shadow); } .nx-keyhints__next { font-size: var(--nx-text-sm); color: var(--nx-color-text); box-shadow: var(--nx-shadow-lg); } .nx-keyhints__typed { font-weight: var(--nx-weight-bold); } .nx-keyhints__item { white-space: nowrap; } .nx-keyhints kbd { margin-right: 2px; background: var(--nx-color-surface-2); color: var(--nx-color-text); } @media (prefers-reduced-motion: no-preference) { .nx-keyhints__next { animation: nx-keyhints-in var(--nx-duration-fast) var(--nx-ease); } } @keyframes nx-keyhints-in { from { opacity: 0; translate: 0 calc(var(--nx-motion-shift) / 3); } } @media (max-width: 40rem), (pointer: coarse) { .nx-keyhints { display: none; } } } /* Edit mode (ADR-042): the framed editor (the shop in a frame, the panel beside it) and the panel, which is also docked on the shop. */ @layer components { .nx-site-editor { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--nx-space-4); height: calc(100dvh - var(--nx-header-height, 3.5rem) - var(--nx-space-8)); min-height: 30rem; } .nx-site-editor__stage { display: flex; flex-direction: column; min-width: 0; gap: var(--nx-space-2); } .nx-site-editor__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-3); } .nx-site-editor__path { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--nx-text-sm); } .nx-site-editor__frames { flex: 1; display: flex; gap: var(--nx-space-3); justify-content: center; min-height: 0; overflow: auto; background: var(--nx-color-surface-2, var(--nx-color-surface)); border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius); } .nx-site-editor__frame { flex: 1 1 0; width: var(--nx-site-width, 100%); max-width: var(--nx-site-width, 100%); min-width: 0; height: 100%; border: 0; background: var(--nx-color-bg); } .nx-site-editor__frames:not([data-width="fit"]) .nx-site-editor__frame { flex: 0 0 var(--nx-site-width); } .nx-site-editor__frame[hidden] { display: none; } .nx-site-editor__panel { min-width: 0; overflow: auto; border-left: 1px solid var(--nx-color-border); padding-left: var(--nx-space-4); } @media (max-width: 63.99rem) { .nx-site-editor { grid-template-columns: 1fr; height: auto; } .nx-site-editor__frames { height: 70dvh; } .nx-site-editor__panel { border-left: 0; padding-left: 0; } } .nx-seg { display: inline-flex; border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius-pill); overflow: hidden; } .nx-seg__btn { min-height: var(--nx-tap-target, 2.75rem); padding: 0 var(--nx-space-3); border: 0; background: transparent; color: var(--nx-color-text); font: inherit; font-size: var(--nx-text-sm); cursor: pointer; } .nx-seg__btn + .nx-seg__btn { border-left: 1px solid var(--nx-color-border); } .nx-seg__btn[aria-pressed="true"] { background: var(--nx-color-accent-soft); font-weight: 600; } .nx-seg__btn:focus-visible { outline: 2px solid var(--nx-color-accent); outline-offset: -2px; } .nx-site-panel__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-2); } .nx-site-panel__title { margin: 0; font-size: var(--nx-text-lg); margin-right: auto; } .nx-site-panel__drafts { flex-basis: 100%; font-size: var(--nx-text-sm); } .nx-site-panel__drafts summary { cursor: pointer; color: var(--nx-color-text-muted); } .nx-site-panel__drafts ul { margin: var(--nx-space-1) 0 0; padding-left: var(--nx-space-4); } .nx-site-panel__actions { display: flex; flex-wrap: wrap; gap: var(--nx-space-2); align-items: flex-start; flex-basis: 100%; } .nx-site-panel__actions form { margin: 0; } .nx-site-panel__hint { margin: 0; font-size: var(--nx-text-sm); } .nx-site-panel__tabs { display: flex; flex-wrap: wrap; gap: var(--nx-space-1); border-bottom: 1px solid var(--nx-color-border); } .nx-site-panel__tabs a { display: inline-flex; align-items: center; min-height: var(--nx-tap-target, 2.75rem); padding: 0 var(--nx-space-2); color: var(--nx-color-text-muted); text-decoration: none; font-size: var(--nx-text-sm); border-bottom: 2px solid transparent; } .nx-site-panel__tabs a[aria-current="page"] { color: var(--nx-color-text); border-bottom-color: var(--nx-color-accent); font-weight: 600; } .nx-site-conflict { margin: 0 0 var(--nx-space-2); padding: var(--nx-space-2); border: 1px solid var(--nx-color-border-strong); border-radius: var(--nx-radius); font-size: var(--nx-text-sm); } .nx-site-conflict label { display: flex; gap: var(--nx-space-2); align-items: center; min-height: var(--nx-tap-target, 2.75rem); } .nx-site-changes, .nx-site-history { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-space-3); } .nx-site-change { display: grid; gap: var(--nx-space-1); font-size: var(--nx-text-sm); padding-bottom: var(--nx-space-2); border-bottom: 1px solid var(--nx-color-border); } .nx-site-change__label { font-weight: 600; } .nx-site-change__diff { overflow-wrap: anywhere; } .nx-site-change__diff del { color: var(--nx-color-text-muted); } .nx-site-change__diff ins { text-decoration: none; font-weight: 600; } /* Who sees it (flag rules, 10 §12.1) under a setting, and the audiences. */ .nx-site-who { font-size: var(--nx-text-sm); margin-top: calc(-1 * var(--nx-space-1)); } .nx-site-who > summary { cursor: pointer; min-height: var(--nx-tap-target, 2.75rem); display: flex; align-items: center; gap: var(--nx-space-1); color: var(--nx-color-text-muted); overflow-wrap: anywhere; } .nx-site-who > summary span { color: var(--nx-color-text); } .nx-site-who__body { padding: var(--nx-space-2) 0 var(--nx-space-2) var(--nx-space-3); border-left: 2px solid var(--nx-color-border); } .nx-site-who__pct { max-width: 8rem; } .nx-site-who__rules { font-family: var(--nx-font-mono, ui-monospace, monospace); } .nx-site-who__note { margin: 0; } .nx-site-who [hidden] { display: none; } .nx-site-audience { display: grid; gap: var(--nx-space-2); align-items: start; padding-bottom: var(--nx-space-2); border-bottom: 1px solid var(--nx-color-border); } .nx-site-audience > .nx-field { margin: 0; } @media (min-width: 40rem) { .nx-site-audience { grid-template-columns: 1fr 2fr; } .nx-site-audience > .nx-help { grid-column: 1 / -1; } } /* The SEO tab (10 §11.1): the Google result, the social card, the focal point. */ .nx-seo-google { display: grid; gap: 2px; padding: var(--nx-space-3); border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius); background: var(--nx-color-surface); font-family: Arial, Helvetica, sans-serif; } .nx-seo-google__site { font-size: 12px; color: var(--nx-color-text-muted); overflow-wrap: anywhere; } .nx-seo-google__title { font-size: 20px; line-height: 1.3; color: var(--nx-color-accent); overflow-wrap: anywhere; } .nx-seo-google__desc { font-size: 14px; line-height: 1.58; color: var(--nx-color-text); overflow-wrap: anywhere; } .nx-seo-card { display: grid; border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius); overflow: hidden; background: var(--nx-color-surface-2); } .nx-seo-card__img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; } .nx-seo-card__none { aspect-ratio: 1200 / 630; display: grid; place-items: center; padding: var(--nx-space-3); text-align: center; font-size: var(--nx-text-sm); color: var(--nx-color-text-muted); } .nx-seo-card__text { display: grid; gap: 2px; padding: var(--nx-space-2) var(--nx-space-3); font-size: var(--nx-text-sm); } .nx-seo-card__domain { text-transform: uppercase; font-size: 12px; color: var(--nx-color-text-muted); } .nx-seo-card__title { font-weight: 600; overflow-wrap: anywhere; } .nx-seo-card__desc { color: var(--nx-color-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nx-seo-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-space-1); font-size: var(--nx-text-sm); } .nx-seo-checks li { display: flex; flex-wrap: wrap; gap: var(--nx-space-2); align-items: center; } .nx-site-seo__focus { margin: 0; } .nx-site-seo__photo { position: relative; max-width: 20rem; cursor: crosshair; border-radius: var(--nx-radius); } .nx-site-seo__photo img { display: block; width: 100%; height: auto; border-radius: var(--nx-radius); user-select: none; } .nx-site-seo__photo:focus-visible { outline: 2px solid var(--nx-color-focus); outline-offset: 2px; } .nx-site-seo__dot { position: absolute; left: 50%; top: 50%;width: 1.25rem; height: 1.25rem; margin: -0.625rem 0 0 -0.625rem; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px #000; pointer-events: none; } .nx-site-redirects__add { display: grid; gap: var(--nx-space-2); align-items: end; } @media (min-width: 40rem) { .nx-site-redirects__add { grid-template-columns: 1fr 1fr auto auto; } } .nx-site-redirects__to { overflow-wrap: anywhere; } .nx-site-version { font-size: var(--nx-text-sm); display: grid; gap: var(--nx-space-1); } .nx-site-version__keys { overflow-wrap: anywhere; } .nx-site-dockpage { padding: var(--nx-space-4); } body.nx-site-docked { overflow: auto; height: auto; } } @layer components { .nx-site-panel__sub { margin: 0; font-size: var(--nx-text-base); } .nx-site-compare { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-2); font-size: var(--nx-text-sm); } .nx-site-compare .nx-select { width: auto; } .nx-site-version__diff { margin: 0; padding-left: var(--nx-space-4); overflow-wrap: anywhere; } .nx-site-version__diff del { color: var(--nx-color-text-muted); } .nx-site-version__diff ins { text-decoration: none; font-weight: 600; } } /* Insights (analytics, ADR-043): the dashboard and edit mode's tab. */ @layer components { .nx-insights__section { display: grid; gap: var(--nx-space-3); min-width: 0; } .nx-insights__h { margin: 0; font-size: var(--nx-text-lg); } .nx-insights__h3 { margin: 0; font-size: var(--nx-text-md); font-weight: var(--nx-weight-bold); } .nx-insights__pair, .nx-insights__grid { display: grid; gap: var(--nx-space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); align-items: start; } .nx-insights__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); } .nx-insights__path { overflow-wrap: anywhere; } .nx-insights__status { font-size: var(--nx-text-sm); font-variant-numeric: tabular-nums; } .nx-insights .nx-table td, .nx-insights .nx-table th { font-variant-numeric: tabular-nums; } .nx-vital { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--nx-space-2); white-space: nowrap; } /* The funnel: a list with its numbers in words; the bars are decoration. */ .nx-funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-space-2); max-width: 48rem; } .nx-funnel__step { display: grid; grid-template-columns: minmax(0, 1fr) auto 4.5rem; gap: var(--nx-space-1) var(--nx-space-3); align-items: baseline; } .nx-funnel__n, .nx-funnel__pct { text-align: right; font-variant-numeric: tabular-nums; } .nx-funnel__n { font-weight: var(--nx-weight-bold); } .nx-funnel__pct { color: var(--nx-color-text-muted); } .nx-funnel__track { grid-column: 1 / -1; height: .5rem; border-radius: var(--nx-radius-pill); background: var(--nx-color-surface-2); overflow: hidden; } .nx-funnel__bar { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--nx-color-accent); } .nx-funnel__bar[data-w="5"] { width: 5%; } .nx-funnel__bar[data-w="10"] { width: 10%; } .nx-funnel__bar[data-w="15"] { width: 15%; } .nx-funnel__bar[data-w="20"] { width: 20%; } .nx-funnel__bar[data-w="25"] { width: 25%; } .nx-funnel__bar[data-w="30"] { width: 30%; } .nx-funnel__bar[data-w="35"] { width: 35%; } .nx-funnel__bar[data-w="40"] { width: 40%; } .nx-funnel__bar[data-w="45"] { width: 45%; } .nx-funnel__bar[data-w="50"] { width: 50%; } .nx-funnel__bar[data-w="55"] { width: 55%; } .nx-funnel__bar[data-w="60"] { width: 60%; } .nx-funnel__bar[data-w="65"] { width: 65%; } .nx-funnel__bar[data-w="70"] { width: 70%; } .nx-funnel__bar[data-w="75"] { width: 75%; } .nx-funnel__bar[data-w="80"] { width: 80%; } .nx-funnel__bar[data-w="85"] { width: 85%; } .nx-funnel__bar[data-w="90"] { width: 90%; } .nx-funnel__bar[data-w="95"] { width: 95%; } .nx-funnel__bar[data-w="100"] { width: 100%; } .nx-site-insights { display: grid; gap: var(--nx-space-3); } .nx-site-insights > .nx-site-panel__sub { margin-top: var(--nx-space-3); } .nx-site-insights__intro { margin: 0; font-size: var(--nx-text-sm); } .nx-site-insights__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nx-space-2); margin: 0; } .nx-site-insights__stats > div { padding: var(--nx-space-2) var(--nx-space-3); border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius); background: var(--nx-color-surface); } .nx-site-insights__stats dt { font-size: var(--nx-text-sm); color: var(--nx-color-text-muted); } .nx-site-insights__stats dd { margin: 0; font-size: var(--nx-text-xl); font-weight: var(--nx-weight-bold); font-variant-numeric: tabular-nums; } .nx-site-insights__vitals { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-space-2); font-size: var(--nx-text-sm); } .nx-site-insights__vitals li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-1) var(--nx-space-2); padding-bottom: var(--nx-space-2); border-bottom: 1px solid var(--nx-color-border); } .nx-site-insights__label { font-weight: 600; margin-right: auto; } .nx-site-insights__n { flex-basis: 100%; font-size: var(--nx-text-xs); text-align: right; } .nx-site-insights__note { margin: 0; font-size: var(--nx-text-xs); } .nx-site-insights__table { width: 100%; font-size: var(--nx-text-sm); } .nx-site-insights__table th[scope="row"] code { overflow-wrap: anywhere; } /* The Integrations tab (10 §3.8): a row per integration. */ .nx-site-integrations { display: grid; gap: var(--nx-space-3); } .nx-site-integrations__intro { margin: 0; font-size: var(--nx-text-sm); } .nx-site-integrations__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-space-3); } .nx-site-integration { display: grid; gap: var(--nx-space-2); padding: var(--nx-space-3); border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius); background: var(--nx-color-surface); font-size: var(--nx-text-sm); min-width: 0; } .nx-site-integration__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nx-space-1) var(--nx-space-2); } .nx-site-integration__head > .nx-site-panel__sub { margin: 0; } .nx-site-integration__detail, .nx-site-integration__note { margin: 0; } .nx-site-integration__note { font-size: var(--nx-text-xs); } .nx-site-integration__facts { display: grid; gap: var(--nx-space-1); margin: 0; } .nx-site-integration__facts > div { display: grid; grid-template-columns: minmax(7em, auto) 1fr; gap: var(--nx-space-2); align-items: baseline; } .nx-site-integration__facts dt { color: var(--nx-color-text-muted); } .nx-site-integration__facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } .nx-site-integration__facts code { overflow-wrap: anywhere; } .nx-site-integration__webhook { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-1) var(--nx-space-2); } .nx-site-integration__error { color: var(--nx-color-danger); } .nx-site-integration__test { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-2); } .nx-site-integration__result { margin: 0; flex: 1 1 12em; min-width: 0; } .nx-site-integration__ok { color: var(--nx-color-success); } .nx-site-integration__fail { color: var(--nx-color-danger); } .nx-site-launch { display: grid; gap: var(--nx-space-4); } .nx-site-launch__summary { margin: 0; font-size: var(--nx-text-sm); } .nx-site-launch__area { display: grid; gap: var(--nx-space-2); } .nx-site-launch__area > .nx-site-panel__sub { margin: 0; } .nx-site-launch__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-space-2); } .nx-site-launch__item { display: grid; gap: var(--nx-space-1); padding: var(--nx-space-2) var(--nx-space-3); border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius); background: var(--nx-color-surface); font-size: var(--nx-text-sm); min-width: 0; } .nx-site-launch__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nx-space-1) var(--nx-space-2); } .nx-site-launch__title { font-weight: 600; } .nx-site-launch__detail, .nx-site-launch__by { margin: 0; overflow-wrap: anywhere; } .nx-site-launch__by { font-size: var(--nx-text-xs); } @media (max-width: 30rem) { .nx-site-integration__facts > div { grid-template-columns: 1fr; gap: 0; } } /* Experiments (10 §12.2): the back office's list and edit mode's tab. */ .nx-experiments { display: grid; gap: var(--nx-space-3); } .nx-experiments__intro { margin: 0; font-size: var(--nx-text-sm); } .nx-exp-card { padding: var(--nx-space-3); border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius); background: var(--nx-color-surface); min-width: 0; } .nx-exp-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nx-space-1) var(--nx-space-2); } .nx-exp-card__title { margin: 0; font-size: var(--nx-text-lg); } .nx-exp-card__facts { display: grid; gap: var(--nx-space-1); margin: 0; font-size: var(--nx-text-sm); } .nx-exp-card__facts > div { display: grid; grid-template-columns: minmax(7em, auto) 1fr; gap: var(--nx-space-2); align-items: baseline; } .nx-exp-card__facts dt { color: var(--nx-color-text-muted); } .nx-exp-card__facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } .nx-exp-card__dates { margin: 0; font-size: var(--nx-text-sm); } .nx-exp-card__variants { margin: 0; padding-left: 1.2em; font-size: var(--nx-text-sm); } .nx-exp-card__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--nx-space-2); } .nx-exp-result__table { width: 100%; font-size: var(--nx-text-sm); } .nx-exp-result__value { display: block; font-weight: normal; font-size: var(--nx-text-xs); overflow-wrap: anywhere; } .nx-exp-result__wait, .nx-exp-result__prior { margin: 0; font-size: var(--nx-text-sm); } .nx-exp-result__guards { font-size: var(--nx-text-sm); } .nx-exp-result__guards p { margin: 0 0 var(--nx-space-1); } .nx-exp-result__guards ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--nx-space-1); } .nx-exp-ship { flex: 1 1 16em; min-width: 0; } .nx-exp-ship > summary { display: inline-flex; list-style: none; cursor: pointer; } .nx-exp-ship > summary::-webkit-details-marker { display: none; } .nx-exp-ship__form { margin-top: var(--nx-space-2); } .nx-exp-ship__choice { display: flex; align-items: center; gap: var(--nx-space-2); padding: var(--nx-space-1) 0; } .nx-exp-new { max-width: 44rem; } .nx-exp-form__control { margin: 0; font-size: var(--nx-text-sm); } .nx-exp-form__variant { padding-top: var(--nx-space-2); border-top: 1px solid var(--nx-color-border); } .nx-exp-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--nx-space-3); } @media (max-width: 30rem) { .nx-exp-card__facts > div { grid-template-columns: 1fr; gap: 0; } } } /* css/records.css */ /* Records (ADR-044, docs/07): generic lists and record pages. Fields are components.FieldFrame, styled in components.css: one control height (--nx-control-h) for every kind of control, and three field styles (inline, stacked, sheet) chosen per person. What's here is records' own: lists, sections, pickers, children and arranging. */ @layer app { :root { --nx-rec-gap: var(--nx-space-4); } /* ── Index ── */ .nx-rec-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--nx-space-3); padding: 0; margin-top: var(--nx-space-4); } .nx-rec-type { display: flex; align-items: center; border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius); background: var(--nx-color-surface); } .nx-rec-type:hover { border-color: var(--nx-color-border-strong); } .nx-rec-type__main { flex: 1; display: grid; grid-template-columns: auto 1fr; gap: 0 var(--nx-space-3); align-items: center; padding: var(--nx-space-4); color: inherit; text-decoration: none; } .nx-rec-type svg { grid-row: span 2; width: 1.5rem; height: 1.5rem; } .nx-rec-type__fields { padding: var(--nx-space-2) var(--nx-space-3); margin-right: var(--nx-space-2); border-radius: var(--nx-radius-sm); font-size: var(--nx-text-sm); color: var(--nx-color-text-muted); } .nx-rec-type__fields:hover { color: var(--nx-color-text); background: var(--nx-color-surface-2); } .nx-rec-type__name { font-weight: var(--nx-weight-medium); } .nx-rec-type__app { font-size: var(--nx-text-xs); } /* ── Records and Fields tabs; the Fields page ── */ .nx-rec-tabs { display: flex; gap: var(--nx-space-1); margin-top: var(--nx-space-2); border-bottom: 1px solid var(--nx-color-border); } .nx-rec-tabs a { padding: var(--nx-space-2) var(--nx-space-3); border-bottom: 2px solid transparent; color: var(--nx-color-text-muted); text-decoration: none; font-size: var(--nx-text-sm); font-weight: var(--nx-weight-medium); } .nx-rec-tabs a[aria-current="page"] { color: var(--nx-color-text); border-bottom-color: var(--nx-color-accent); } .nx-rec-fields .nx-table-wrap { margin-top: var(--nx-space-4); } .nx-fields-table td { vertical-align: top; } .nx-fields-table code { font-size: var(--nx-text-xs); } .nx-fields-details { max-width: 28rem; } .nx-fields-h { margin-top: var(--nx-space-6); font-size: var(--nx-text-lg); } .nx-fields-list { display: grid; gap: var(--nx-space-2); padding: 0; margin-top: var(--nx-space-2); } .nx-fields-list li { display: flex; gap: var(--nx-space-3); align-items: center; } .nx-fields-new { margin-top: var(--nx-space-3); } /* The Fields page's menus open fixed to the window beside the table, so a field at the end of the list reaches every control; the new-field form sits in the page and grows it (FB-1F1470E5). */ .nx-fields-table .nx-menu__panel { position: fixed; top: var(--nx-space-12); right: var(--nx-space-4); left: auto; width: min(34rem, calc(100vw - 2 * var(--nx-space-4))); max-height: calc(100dvh - 2 * var(--nx-space-12)); } .nx-menu__panel--flow { position: static; margin-top: var(--nx-space-2); max-height: none; box-shadow: none; } .nx-fields-rules { max-width: 16rem; color: var(--nx-color-text-muted); } .nx-fieldmenu { gap: var(--nx-space-3); padding: var(--nx-space-3); } .nx-fieldmenu__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nx-space-2) var(--nx-space-3); } .nx-fieldmenu__steps { display: flex; flex-wrap: wrap; gap: var(--nx-space-2) var(--nx-space-4); margin: 0; padding: 0; border: 0; } .nx-fieldmenu__steps legend { margin-bottom: var(--nx-space-1); } /* A shop type's steps (07 DS13). */ .nx-steps { margin-top: var(--nx-space-6); } .nx-steps .nx-fields-h { margin-top: 0; } .nx-steps > p { max-width: 70ch; } .nx-steps-table td { vertical-align: top; } .nx-steps-table .nx-input, .nx-steps-table .nx-select { min-width: 12ch; } .nx-steps__from { display: flex; flex-wrap: wrap; gap: var(--nx-space-1) var(--nx-space-3); margin: 0; padding: 0; border: 0; } .nx-steps__flows { margin: 0 0 var(--nx-space-1); padding: 0; list-style: none; } .nx-steps__flows li + li { margin-top: var(--nx-space-1); } .nx-steps__stages, .nx-steps__add { display: flex; flex-wrap: wrap; align-items: end; gap: var(--nx-space-3); margin-top: var(--nx-space-4); } .nx-steps__stages .nx-f { flex: 1 1 28ch; } .nx-steps__add .nx-f { flex: 0 1 24ch; } .nx-steps__stages .nx-btn, .nx-steps__add .nx-btn { min-height: var(--nx-control-h); } /* A step's gate and what the stages mean (ADR-088). */ .nx-steps__meanings { display: flex; flex-wrap: wrap; align-items: end; gap: var(--nx-space-2) var(--nx-space-4); margin: var(--nx-space-3) 0 0; padding: 0; border: 0; } .nx-steps__meanings > p { flex-basis: 100%; margin: 0; max-width: 70ch; } .nx-steps__meaning, .nx-gate__count, .nx-gate__when { display: flex; flex-direction: column; gap: var(--nx-space-1); } .nx-steps__gaterow > td { padding-top: 0; } .nx-gate__parts { display: grid; gap: var(--nx-space-4); } .nx-gate__part { margin: 0; padding: 0; border: 0; min-width: 0; } .nx-gate__part > p { margin: 0 0 var(--nx-space-2); max-width: 70ch; } .nx-gate__items { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--nx-space-2); } .nx-gate__item, .nx-gate__add { display: flex; flex-wrap: wrap; align-items: end; gap: var(--nx-space-2) var(--nx-space-3); } .nx-gate__add { margin-top: var(--nx-space-2); } .nx-gate__item .nx-input, .nx-gate__add .nx-input, .nx-gate__item .nx-select, .nx-gate__add .nx-select { width: auto; min-width: 10ch; max-width: 100%; } .nx-gate__item input[type="number"], .nx-gate__n { width: 7ch; min-width: 7ch; } .nx-gate__when { flex: 1 1 22ch; } .nx-gate__when .nx-input { width: 100%; } @media (max-width: 40rem) { .nx-fieldmenu__grid { grid-template-columns: minmax(0, 1fr); } } .nx-f__accept { margin-top: var(--nx-space-1); } /* ── A records list (16 §10): one header row, then the table, which fills the rest of the screen and scrolls on its own, so the row and the column names stay put while the rows move. ── */ .nx-admin__main:has(> .nx-page > .nx-rec-list) { display: flex; flex-direction: column; padding-top: var(--nx-space-4); padding-bottom: var(--nx-space-4); } .nx-admin__main > .nx-page:has(> .nx-rec-list) { flex: 1 1 auto; display: flex; flex-direction: column; width: 100%; min-height: 0; } .nx-page > .nx-rec-list { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; } .nx-rec-list > * { flex: none; } .nx-rec-wrap > .nx-new-above { top: calc(2.5rem + var(--nx-space-2)); } /* under the column names */ .nx-rec-list > .nx-rec-wrap { position: relative; flex: 1 1 auto; min-height: 12rem; } /* relative: hidden labels in rows scroll with it */ .nx-rec-head { flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--nx-space-2); margin-bottom: var(--nx-space-3); } .nx-rec-head__title { display: flex; align-items: baseline; gap: var(--nx-space-2); min-width: 0; white-space: nowrap; } .nx-rec-head .nx-page__title { font-size: var(--nx-text-xl); } .nx-rec-head .nx-list-count { font-size: var(--nx-text-sm); } .nx-rec-head .nx-rec-bar { flex: 0 1 auto; min-width: 0; margin: 0; } .nx-rec-head .nx-rec-search input { min-width: min(12rem, 100%); } .nx-rec-head .nx-fchip select { field-sizing: content; } .nx-rec-head .nx-recview button { padding: 0 var(--nx-space-2); } .nx-rec-head .nx-rec-toolbar { margin: 0; } .nx-rec-head__end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-2); margin-left: auto; } .nx-rec-head .nx-btn { min-height: 2.25rem; } .nx-rec-more > summary { gap: var(--nx-space-1); } .nx-rec-more .nx-menu__panel { min-width: 15rem; } .nx-save-view { padding: var(--nx-space-1) 0 0; margin-top: var(--nx-space-1); border-top: 1px solid var(--nx-color-border); } .nx-save-view .nx-input { width: 100%; height: 2.25rem; min-height: 0; } .nx-rec-head .nx-editlist--done { display: none; } .nx-rec-list.is-editing .nx-rec-head .nx-editlist--done { display: inline-flex; } @media (max-width: 47.99rem) { .nx-rec-head .nx-rec-bar { flex: 1 1 100%; order: 3; } .nx-rec-head .nx-rec-search { flex: 1 1 8rem; order: -2; } .nx-rec-head .nx-rec-bar > details.nx-menu { order: -1; } /* + Filter beside the search, the chips under them */ .nx-rec-head .nx-rec-bar > details.nx-menu > .nx-menu__panel { left: auto; right: 0; } /* it sits at the right edge: open leftwards */ .nx-rec-head .nx-rec-search input { width: 100%; min-width: 0; } .nx-rec-more__word { display: none; } } /* ── An app's list tools (entityapp.RegisterListTools) ── */ .nx-rec-tools { flex-wrap: wrap; } .nx-rec-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nx-space-2); min-width: 0; margin: var(--nx-space-2) 0 0; } .nx-rec-toolbar form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-2); min-width: 0; } .nx-rec-toolbar input[type="text"] { height: var(--nx-control-h); min-width: 0; max-width: 14rem; padding: 0 var(--nx-space-3); border: 1px solid var(--nx-color-border-strong); border-radius: var(--nx-radius-pill); background: var(--nx-color-surface); color: inherit; } .nx-ai__by { margin: var(--nx-space-1) 0 0; font-size: var(--nx-text-sm); } /* ── List bar: search, filter chips, sort ── */ .nx-rec-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-2); margin: var(--nx-space-3) 0; } .nx-rec-search input { height: var(--nx-control-h); min-width: min(18rem, 100%); padding: 0 var(--nx-space-3); border: 1px solid var(--nx-color-border-strong); border-radius: var(--nx-radius-pill); background: var(--nx-color-surface); } .nx-fchip, .nx-sortchip, .nx-chip-add { display: inline-flex; align-items: center; gap: var(--nx-space-1); height: var(--nx-control-h); padding: 0 var(--nx-space-1) 0 var(--nx-space-3); border-radius: var(--nx-radius-pill); font-size: var(--nx-text-sm); white-space: nowrap; } .nx-fchip { background: var(--nx-color-accent-soft); } .nx-fchip.is-incomplete { outline: 1px dashed var(--nx-color-accent); } .nx-fchip__f { font-weight: var(--nx-weight-medium); } .nx-fchip select, .nx-fchip input { height: 1.75rem; padding: 0 var(--nx-space-2); border: 1px solid transparent; border-radius: var(--nx-radius-sm); background: transparent; color: inherit; font-size: var(--nx-text-sm); } .nx-fchip select:hover, .nx-fchip input:hover, .nx-fchip select:focus, .nx-fchip input:focus { border-color: var(--nx-color-border-strong); background: var(--nx-color-surface); } .nx-fchip__x, .nx-sortchip span { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; color: inherit; text-decoration: none; } .nx-fchip__x:hover { background: color-mix(in srgb, var(--nx-color-accent) 22%, transparent); } .nx-sortchip { padding-right: var(--nx-space-1); border: 1px solid var(--nx-color-border); color: var(--nx-color-text-muted); text-decoration: none; } .nx-sortchip:hover { color: var(--nx-color-text); border-color: var(--nx-color-border-strong); } .nx-chip-add { padding-right: var(--nx-space-3); border: 1px dashed var(--nx-color-border-strong); color: var(--nx-color-text-muted); cursor: pointer; list-style: none; } .nx-chip-add::-webkit-details-marker { display: none; } .nx-chip-add:hover { color: var(--nx-color-text); } /* ── Menus (details) ── */ .nx-menu { position: relative; } .nx-menu > summary { list-style: none; cursor: pointer; } .nx-menu > summary::-webkit-details-marker { display: none; } .nx-menu__panel { position: absolute; z-index: var(--nx-z-overlay); top: calc(100% + 4px); left: 0; display: grid; min-width: 13rem; max-height: min(26rem, 70vh); overflow: auto; padding: var(--nx-space-1); border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius); background: var(--nx-color-surface-raised); box-shadow: var(--nx-shadow-lg); font-size: var(--nx-text-sm); font-weight: var(--nx-weight-regular); color: var(--nx-color-text); text-align: left; white-space: normal; } .nx-menu--end .nx-menu__panel { left: auto; right: 0; } .nx-menu__panel--wide { min-width: 17rem; } .nx-menu__panel > a, .nx-menu__panel > button { display: flex; align-items: center; gap: var(--nx-space-2); width: 100%; min-height: 2.25rem; padding: 0 var(--nx-space-3); border: 0; border-radius: var(--nx-radius-sm); background: none; color: inherit; text-align: left; text-decoration: none; font: inherit; cursor: pointer; } .nx-menu__panel > a:hover, .nx-menu__panel > button:hover, .nx-menu__panel > a:focus-visible, .nx-menu__panel > button:focus-visible { background: var(--nx-color-accent-soft); } .nx-menu__panel > button[aria-checked="true"]::after { content: "✓"; margin-left: auto; color: var(--nx-color-accent); } .nx-menu__panel hr { width: 100%; border: 0; border-top: 1px solid var(--nx-color-border); margin: var(--nx-space-1) 0; } .nx-menu__head { padding: var(--nx-space-2) var(--nx-space-3) var(--nx-space-1); font-size: var(--nx-text-xs); letter-spacing: var(--nx-tracking-caps); text-transform: uppercase; color: var(--nx-color-text-muted); } .nx-menu__note { padding: var(--nx-space-1) var(--nx-space-3); font-size: var(--nx-text-xs); color: var(--nx-color-text-muted); } .nx-menu .nx-danger { color: var(--nx-color-danger); } /* ── Editing a list's layout (Edit layout) ── */ .nx-rec-list:not(.is-editing) :is(.nx-th-add > details, .nx-th__rz, .nx-menu__layout) { display: none; } .nx-menu__layout { display: grid; } .nx-menu__layout > button { display: flex; align-items: center; width: 100%; min-height: 2.25rem; padding: 0 var(--nx-space-3); border: 0; border-radius: var(--nx-radius-sm); background: none; color: inherit; text-align: left; font: inherit; cursor: pointer; } .nx-menu__layout > button:hover { background: var(--nx-color-accent-soft); } .nx-menu__layout hr { width: 100%; border: 0; border-top: 1px solid var(--nx-color-border); margin: var(--nx-space-1) 0; } .nx-rec-list.is-editing .nx-rec-th { cursor: grab; } .nx-rec-list.is-editing .nx-rec-table thead { outline: 1px dashed var(--nx-color-accent); outline-offset: -1px; } .nx-editlist[aria-pressed="true"] { background: var(--nx-color-accent-soft); color: var(--nx-color-accent); border-color: transparent; } /* ── Ticking rows for a bulk change ── */ .nx-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-2); margin-bottom: var(--nx-space-3); padding: var(--nx-space-2) var(--nx-space-3); border-radius: var(--nx-radius); background: var(--nx-color-accent-soft); } .nx-rec-list:not(:has(input[name="tick"]:checked)) .nx-bulk { display: none; } .nx-bulk__label { font-size: var(--nx-text-sm); margin-right: var(--nx-space-2); } .nx-rec-table .nx-tick { width: 2.75rem; padding: 0 var(--nx-space-3); text-align: center; } .nx-tick input { width: 1.1rem; height: 1.1rem; accent-color: var(--nx-color-accent); } /* ── Table ── */ .nx-rec-wrap { overflow: auto; } /* Compact rows (16 §10): a small photo, and none where there isn't one. */ .nx-rec-table .nx-thumb { width: 1.75rem; height: 2.1875rem; } .nx-rec-table .nx-thumb--empty { display: none; } .nx-rec-table { table-layout: auto; } .nx-rec-table th { padding: 0; white-space: nowrap; } .nx-rec-table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 32rem; padding-block: var(--nx-space-1); } .nx-th { display: flex; align-items: center; min-height: 2.5rem; position: relative; } .nx-th__sort, .nx-th__label { flex: 1; display: flex; align-items: center; gap: var(--nx-space-1); min-height: 2.5rem; padding: 0 var(--nx-space-3) 0 var(--nx-space-4); color: inherit; text-decoration: none; } .nx-th__sort:hover { color: var(--nx-color-text); } .nx-num .nx-th__sort { justify-content: flex-end; } .nx-th__dir { font-size: .65rem; color: var(--nx-color-accent); } .nx-th__menu > summary { display: grid; place-items: center; width: 1.75rem; height: 2.5rem; opacity: 0; } .nx-th:hover .nx-th__menu > summary, .nx-th__menu[open] > summary, .nx-th__menu > summary:focus-visible { opacity: 1; } .nx-th__rz { position: absolute; top: 25%; bottom: 25%; right: 0; width: 6px; cursor: col-resize; border-right: 1px solid var(--nx-color-border); } .nx-th__rz:hover, .nx-th__rz.is-dragging { border-right: 2px solid var(--nx-color-accent); } .nx-rec-th.is-drop-before { box-shadow: inset 3px 0 0 var(--nx-color-accent); } /* The filters as a header row (ADR-067): a box under each column, held under the sticky column names. */ .nx-rec-table .nx-frow td { position: sticky; top: 2.5rem; z-index: 1; overflow: visible; max-width: none; padding: var(--nx-space-1) var(--nx-space-2); background: var(--nx-color-surface-2); } .nx-fbox { width: 100%; min-width: 5rem; height: var(--nx-control-h); padding: 0 var(--nx-space-2); border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius-sm); background: var(--nx-color-surface); color: var(--nx-color-text); font-size: var(--nx-text-sm); } .nx-fbox::placeholder { color: var(--nx-color-text-muted); } .nx-fbox:hover { border-color: var(--nx-color-border-strong); } .nx-fbox:focus-visible { outline: 2px solid var(--nx-color-focus); outline-offset: -1px; border-color: var(--nx-color-accent); } .nx-fbox--num { text-align: right; } .nx-fbox:is(input:not(:placeholder-shown), select:has(option:checked:not([value=""]))) { border-color: var(--nx-color-accent); background: var(--nx-color-accent-soft); } .nx-th-add { width: 2.5rem; } .nx-th-add summary { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; font-size: var(--nx-text-lg); } .nx-rec-table td.is-cell { outline: 2px solid var(--nx-color-focus); outline-offset: -2px; } /* Always editable (ADR-067): cells look like the fields they are. */ [data-nx-m-edit="always"] .nx-rec-table td[data-field] { cursor: text; box-shadow: inset 0 0 0 1px var(--nx-color-border); } [data-nx-m-edit="always"] .nx-rec-table td[data-field]:hover { box-shadow: inset 0 0 0 1px var(--nx-color-border-strong); } .nx-rec-table td.is-editing { padding: 0; overflow: visible; } .nx-cell-form .nx-input, .nx-cell-form .nx-select, .nx-cell-form .nx-affix { min-height: 0; height: 2.5rem; border-radius: 0; } .nx-cell-form .nx-link { min-width: 16rem; } .nx-cell-link { color: var(--nx-color-accent); } .nx-yes { color: var(--nx-color-success); } .nx-ghost-row { padding: var(--nx-space-1) var(--nx-space-2); border-top: 1px solid var(--nx-color-border); } .nx-ghost { width: 100%; height: 2.5rem; padding: 0 var(--nx-space-3); border: 1px dashed transparent; border-radius: var(--nx-radius-sm); background: transparent; color: var(--nx-color-text); } .nx-ghost::placeholder { color: var(--nx-color-text-muted); } .nx-ghost:hover, .nx-ghost:focus { border-color: var(--nx-color-border-strong); outline: none; background: var(--nx-color-surface); } /* ── Record ── */ .nx-rec { container-type: inline-size; min-width: 0; } .nx-rec__titles { min-width: 0; } .nx-rec__title { overflow-wrap: anywhere; } .nx-rec__head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--nx-space-3); justify-content: space-between; } .nx-rec__kind { font-size: var(--nx-text-sm); color: var(--nx-color-text-muted); display: flex; gap: var(--nx-space-2); } .nx-rec__kind a { color: inherit; } .nx-rec__title { font-size: var(--nx-text-2xl); line-height: var(--nx-leading-tight); } .nx-rec__tools { display: flex; align-items: center; gap: var(--nx-space-2); } .nx-tool { display: inline-flex; align-items: center; height: 2.25rem; padding: 0 var(--nx-space-3); border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius-sm); background: var(--nx-color-surface); color: var(--nx-color-text-muted); font-size: var(--nx-text-sm); cursor: pointer; } .nx-tool:hover { color: var(--nx-color-text); border-color: var(--nx-color-border-strong); } .nx-tool[aria-pressed="true"] { background: var(--nx-color-accent-soft); color: var(--nx-color-accent); border-color: transparent; } .nx-ready { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-2) var(--nx-space-3); margin-top: var(--nx-space-4); padding: var(--nx-space-3) var(--nx-space-4); border-radius: var(--nx-radius); background: var(--nx-color-surface-2); font-size: var(--nx-text-sm); } .nx-ready--todo { background: var(--nx-color-warning-soft); } .nx-ready--go .nx-btn { margin-left: auto; min-height: 2.25rem; } .nx-ready__need { color: var(--nx-color-warning); font-weight: var(--nx-weight-medium); } .nx-ready__reject > summary { cursor: pointer; min-height: var(--nx-tap-target); display: flex; align-items: center; } .nx-rec__sec { margin-top: var(--nx-space-6); } .nx-rec__sec-head { display: flex; align-items: center; gap: var(--nx-space-3); margin-bottom: var(--nx-space-3); } .nx-rec__sec-head h2 { font-size: var(--nx-type-section-size); letter-spacing: var(--nx-type-section-tracking); text-transform: uppercase; color: var(--nx-color-text-muted); font-weight: var(--nx-type-section-weight); } .nx-rec__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--nx-rec-gap); row-gap: var(--nx-space-1); } .nx-span-1 { grid-column: span 1; } .nx-span-2 { grid-column: span 2; } .nx-span-3 { grid-column: 1 / -1; } @container (max-width: 40rem) { .nx-rec__grid { grid-template-columns: minmax(0, 1fr); } .nx-span-2, .nx-span-3 { grid-column: 1 / -1; } } /* Panels: an app's blocks (photos, publishing, access). They start in the side column and can be placed in any section like a field. */ .nx-rec__body { display: grid; gap: var(--nx-space-6); } .nx-f--panel { min-width: 0; } .nx-f--panel .nx-card { padding: var(--nx-space-4); } .nx-f--panel + .nx-f--panel { margin-top: var(--nx-space-3); } .nx-rec__side .nx-rec__grid { grid-template-columns: minmax(0, 1fr); } .nx-rec__side .nx-span-2, .nx-rec__side .nx-span-3 { grid-column: 1 / -1; } .nx-rec__side .nx-rec__sec:first-child { margin-top: 0; } .nx-f__panel-name { display: flex; flex-wrap: wrap; gap: var(--nx-space-2); align-items: baseline; min-height: 3rem; padding: var(--nx-space-2) var(--nx-space-3); border-radius: var(--nx-radius-sm); background: var(--nx-color-surface); font-weight: var(--nx-weight-medium); } .nx-f__panel-name .nx-muted { font-weight: var(--nx-weight-regular); font-size: var(--nx-text-sm); } .nx-add-sections { display: flex; flex-wrap: wrap; gap: var(--nx-space-2); } @container (min-width: 60rem) { .nx-rec__body--side { grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); } .nx-rec__body--side .nx-rec__side { margin-top: var(--nx-space-6); } .nx-rec:not(.is-arranging) .nx-rec__body--side .nx-rec__side { position: sticky; top: var(--nx-space-4); align-self: start; } } /* Running the business by hand (DS7): taking an order, invoices. */ .nx-byhand { display: grid; gap: var(--nx-space-3); } .nx-byhand__title { font-size: var(--nx-text-md); } .nx-byhand__form { display: grid; gap: var(--nx-space-3); } .nx-byhand__form > .nx-field { margin-top: 0; } .nx-byhand__help { font-size: var(--nx-text-xs); color: var(--nx-color-text-muted); } .nx-byhand__choice { display: flex; flex-wrap: wrap; gap: var(--nx-space-1) var(--nx-space-3); margin: 0; padding: 0; border: 0; font-size: var(--nx-text-sm); } .nx-byhand__choice legend { width: 100%; margin-bottom: var(--nx-space-1); } .nx-byhand__choice label { display: inline-flex; align-items: center; gap: var(--nx-space-1); min-height: 2rem; } .nx-byhand__row { display: flex; flex-wrap: wrap; gap: var(--nx-space-2); } .nx-byhand__docs { display: grid; gap: var(--nx-space-1); margin: 0; padding: 0; list-style: none; } .nx-byhand__docs li { display: flex; flex-wrap: wrap; gap: var(--nx-space-2); align-items: baseline; } .nx-byhand__pdf { margin-left: auto; } /* A field's choices on the Fields page (07 D16). */ .nx-choices { display: grid; gap: var(--nx-space-3); width: min(32rem, calc(100vw - 2 * var(--nx-space-4))); } .nx-choices__list { display: grid; gap: var(--nx-space-1); max-height: 22rem; overflow: auto; margin: 0; padding: 0 var(--nx-space-3); list-style: none; } .nx-choices__item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--nx-space-2); } .nx-choices__item.is-retired .nx-input { color: var(--nx-color-text-muted); text-decoration: line-through; } .nx-choices__from { font-size: var(--nx-text-xs); color: var(--nx-color-text-muted); white-space: nowrap; } .nx-choices__add { display: flex; gap: var(--nx-space-2); padding: 0 var(--nx-space-3) var(--nx-space-3); } .nx-choices__add .nx-btn { min-height: var(--nx-control-h); } /* A person's Access panel: roles as switches, then the two things that can't be undone (confirmed in a dialog). */ .nx-access { display: grid; gap: var(--nx-space-3); } .nx-access__title { font-size: var(--nx-text-md); } .nx-access__note { font-size: var(--nx-text-sm); } .nx-access__roles { display: grid; gap: var(--nx-space-1); margin: 0; padding: 0; list-style: none; } .nx-access__role { display: flex; align-items: center; justify-content: space-between; gap: var(--nx-space-3); min-height: var(--nx-tap-target); } .nx-access__role-text { display: grid; min-width: 0; } .nx-access__role-name { font-weight: var(--nx-weight-medium); } .nx-access__role-help { font-size: var(--nx-text-xs); color: var(--nx-color-text-muted); } .nx-access__tokens { font-size: var(--nx-text-sm); color: var(--nx-color-text-muted); } .nx-access__actions { display: flex; flex-wrap: wrap; gap: var(--nx-space-2); } .nx-switch { position: relative; flex: none; width: 2.75rem; height: 1.625rem; padding: 0; border: 1px solid var(--nx-color-border-strong); border-radius: var(--nx-radius-pill); background: var(--nx-color-surface-2); cursor: pointer; } .nx-switch::before { content: ""; position: absolute; inset: -.5rem -.25rem; } .nx-switch__knob { position: absolute; top: 2px; left: 2px; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--nx-color-text-muted); } .nx-switch[aria-checked="true"] { background: var(--nx-color-accent); border-color: var(--nx-color-accent); } .nx-switch[aria-checked="true"] .nx-switch__knob { left: auto; right: 2px; background: var(--nx-color-accent-contrast); } .nx-switch:focus-visible { outline: var(--nx-focus-width) solid var(--nx-color-focus, var(--nx-color-accent)); outline-offset: 2px; } @media (prefers-reduced-motion: no-preference) { .nx-switch__knob { transition: left var(--nx-duration) var(--nx-ease), right var(--nx-duration) var(--nx-ease); } } /* Fields: the structure, controls and the three styles are in components.css (components.FieldFrame); these are records' own. */ .nx-f + .nx-f { margin-top: 0; } .nx-rec__grid > .nx-f > .nx-f__help { min-height: 1.25rem; } .nx-f.is-missing .nx-ghost { border-color: var(--nx-color-warning); background-color: color-mix(in srgb, var(--nx-color-warning-soft) 65%, var(--nx-color-surface)); } .nx-fields--sheet .nx-rec__grid > .nx-f > .nx-f__help { min-height: 0; } /* Related, children, pickers (the link control is in components.css) */ .nx-picker { position: absolute; z-index: var(--nx-z-overlay); left: 0; right: 0; top: calc(100% + 2px); } .nx-picker:empty { display: none; } .nx-picker__list { display: grid; padding: var(--nx-space-1); margin: 0; list-style: none; border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius); background: var(--nx-color-surface-raised); box-shadow: var(--nx-shadow-lg); max-height: 18rem; overflow: auto; } .nx-picker__opt { display: flex; justify-content: space-between; gap: var(--nx-space-3); width: 100%; min-height: 2.25rem; padding: 0 var(--nx-space-3); border: 0; border-radius: var(--nx-radius-sm); background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; } .nx-picker__opt:hover, .nx-picker__opt:focus-visible { background: var(--nx-color-accent-soft); outline: none; } .nx-picker__opt--new { color: var(--nx-color-accent); } .nx-picker__none { padding: var(--nx-space-2) var(--nx-space-3); font-size: var(--nx-text-sm); } .nx-nest:empty { display: none; } .nx-nest { grid-column: 1 / -1; width: 100%; } .nx-nested { margin-top: var(--nx-space-2); padding: var(--nx-space-2) var(--nx-space-4) var(--nx-space-3); border-left: 3px solid var(--nx-color-accent); border-radius: 0 var(--nx-radius) var(--nx-radius) 0; background: color-mix(in srgb, var(--nx-color-accent-soft) 40%, transparent); } .nx-nested__head { display: flex; justify-content: space-between; gap: var(--nx-space-3); padding: var(--nx-space-2) 0; font-size: var(--nx-text-xs); color: var(--nx-color-text-muted); } .nx-related .nx-nest { margin-top: var(--nx-space-1); } .nx-kids { position: relative; display: grid; gap: var(--nx-space-2); min-width: 0; } .nx-kid { min-width: 0; } .nx-kids__list { display: grid; gap: var(--nx-space-1); padding: 0; margin: 0; } .nx-kid { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-1) var(--nx-space-3); min-height: var(--nx-control-h); padding: var(--nx-space-1) var(--nx-space-2); border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius-sm); background: var(--nx-color-surface); } .nx-kid .nx-thumb { width: 2rem; height: 2.5rem; } .nx-kid__t { flex: 1 1 9rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; } .nx-kid__x { font-size: var(--nx-text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; } .nx-kid__btn { height: 2rem; padding: 0 var(--nx-space-2); border: 0; border-radius: var(--nx-radius-sm); background: none; color: var(--nx-color-text-muted); font-size: var(--nx-text-xs); cursor: pointer; } .nx-kid__btn:hover { background: var(--nx-color-surface-2); color: var(--nx-color-text); } .nx-kid__btn--danger:hover { color: var(--nx-color-danger); } .nx-kids .nx-ghost { border-color: var(--nx-color-border); } .nx-chips { display: flex; flex-wrap: wrap; gap: var(--nx-space-1); min-width: 0; margin: 0; padding: 0; list-style: none; } .nx-kid[draggable="true"] { cursor: grab; } .nx-kid__grip { color: var(--nx-color-text-muted); } .nx-kid.is-drop-before { box-shadow: inset 0 3px 0 var(--nx-color-accent); } /* ── Field style: stacked (name above; rows line up across the grid) ── */ .nx-fields--stacked .nx-rec__grid { row-gap: 0; } .nx-fields--stacked .nx-rec__grid > .nx-f:not(.nx-f--panel) { grid-template-rows: subgrid; grid-row: span 3; } .nx-fields--sheet .nx-rec__grid { grid-template-columns: minmax(0, 1fr); row-gap: 0; } /* ── How records open, and moving through them ── */ .nx-recview button { height: 2rem; font-size: var(--nx-text-sm); } @media (max-width: 59.99rem) { .nx-seg.nx-recview { display: none; } } /* .nx-seg (below) would show it */ .nx-recnav { display: inline-flex; align-items: center; gap: var(--nx-space-1); margin-right: var(--nx-space-2); font-size: var(--nx-text-sm); color: var(--nx-color-text-muted); font-variant-numeric: tabular-nums; } .nx-recnav a, .nx-recnav span[aria-label] { display: inline-grid; place-items: center; min-width: 2rem; height: 2rem; padding: 0 var(--nx-space-2); border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius-sm); color: inherit; text-decoration: none; } .nx-recnav span[aria-label] { opacity: .4; } .nx-recnav a:hover { color: var(--nx-color-text); border-color: var(--nx-color-border-strong); } /* ── Arranging ── */ .nx-arrange-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-2) var(--nx-space-3); margin-top: var(--nx-space-4); padding: var(--nx-space-3) var(--nx-space-4); border: 1px dashed var(--nx-color-accent); border-radius: var(--nx-radius); font-size: var(--nx-text-sm); } .nx-arrange-bar__end { margin-left: auto; display: flex; gap: var(--nx-space-2); align-items: center; } .nx-seg { display: inline-flex; border: 1px solid var(--nx-color-border-strong); border-radius: var(--nx-radius-sm); overflow: hidden; } .nx-seg button { height: 2rem; padding: 0 var(--nx-space-3); border: 0; background: none; color: var(--nx-color-text-muted); cursor: pointer; } .nx-seg button[aria-pressed="true"] { background: var(--nx-color-accent-soft); color: var(--nx-color-accent); font-weight: var(--nx-weight-medium); } .is-arranging .nx-rec__grid { min-height: 3.5rem; padding: var(--nx-space-2); border-radius: var(--nx-radius); background: color-mix(in srgb, var(--nx-color-surface-2) 55%, transparent); row-gap: var(--nx-space-3); } .is-arranging .nx-rec__grid.is-drop-target { background: var(--nx-color-accent-soft); } .is-arranging .nx-f { padding-top: var(--nx-space-6); outline: 1px dashed var(--nx-color-border-strong); outline-offset: 2px; border-radius: var(--nx-radius-sm); cursor: grab; } .is-arranging .nx-f.is-drop-before { outline: 2px solid var(--nx-color-accent); } .is-arranging .nx-f .nx-f__control { pointer-events: none; } .nx-arr { position: absolute; top: 0; right: 0; z-index: 2; display: flex; align-items: center; gap: 2px; font-size: var(--nx-text-xs); } .nx-arr button { height: 1.5rem; min-width: 1.5rem; padding: 0 var(--nx-space-1); border: 0; border-radius: var(--nx-radius-sm); background: none; color: var(--nx-color-text-muted); cursor: pointer; } .nx-arr button:hover { background: var(--nx-color-surface-2); color: var(--nx-color-text); } .nx-arr button[aria-pressed="true"] { color: var(--nx-color-accent); font-weight: var(--nx-weight-bold); } .nx-arr__grip { margin-right: auto; padding: 0 var(--nx-space-1); color: var(--nx-color-text-muted); } .nx-rec__sec-title { height: 2rem; padding: 0 var(--nx-space-2); border: 1px dashed var(--nx-color-border-strong); border-radius: var(--nx-radius-sm); background: transparent; font-size: var(--nx-text-xs); letter-spacing: var(--nx-tracking-caps); text-transform: uppercase; color: var(--nx-color-text); } .nx-add-field, .nx-add-section { display: inline-flex; align-items: center; height: 2rem; margin-top: var(--nx-space-2); padding: 0 var(--nx-space-3); border: 1px dashed var(--nx-color-border-strong); border-radius: var(--nx-radius-sm); background: none; color: var(--nx-color-text-muted); font-size: var(--nx-text-sm); cursor: pointer; } .nx-add-section { margin-top: var(--nx-space-6); } .nx-rec__drop-here { grid-column: 1 / -1; text-align: center; font-size: var(--nx-text-sm); } /* Menus and the list's bar are compact: their controls are the small size, never taller than the tap target (compact density). */ .nx-newfield, .nx-choices, .nx-rec-bar { --nx-control-h: min(2.25rem, var(--nx-tap-target)); } .nx-newfield { display: grid; gap: var(--nx-space-2); padding: var(--nx-space-2) var(--nx-space-3) var(--nx-space-3); } .nx-newfield > .nx-field { margin-top: 0; } .nx-newfield:not(:has(option[value="choice"]:checked)) .nx-newfield__for-choice, .nx-newfield:not(:has(option[value="link"]:checked, option[value="links"]:checked)) .nx-newfield__for-link, .nx-newfield:not(:has(option[value="children"]:checked)) .nx-newfield__for-children, .nx-newfield:not(:has(option[value="related"]:checked)) .nx-newfield__for-related, .nx-newfield:not(:has(option[value="computed"]:checked)) .nx-newfield__for-computed, .nx-newfield:has(option[value="children"]:checked, option[value="related"]:checked, option[value="computed"]:checked, option[value="panel"]:checked) .nx-newfield__for-value { display: none; } /* A shop's panel (07 DS5): its kind, then that kind's controls. */ .nx-newfield:not(:has(option[value="panel"]:checked)) :is(.nx-newfield__for-panel, .nx-newfield__for-panel-records, .nx-newfield__for-panel-list, .nx-newfield__for-panel-summary, .nx-newfield__for-panel-action, .nx-newfield__for-panel-view), .nx-newfield:not(:has(option[value="list"]:checked, option[value="summary"]:checked)) .nx-newfield__for-panel-records, .nx-newfield:not(:has(option[value="list"]:checked)) .nx-newfield__for-panel-list, .nx-newfield:not(:has(option[value="summary"]:checked)) .nx-newfield__for-panel-summary, .nx-newfield:not(:has(option[value="action"]:checked)) .nx-newfield__for-panel-action, .nx-newfield:not(:has(option[value="view"]:checked)) .nx-newfield__for-panel-view { display: none; } .nx-offer { display: grid; gap: var(--nx-space-2); margin-block: var(--nx-space-3); padding: var(--nx-space-3); border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius-md); background: var(--nx-color-surface-raised); } .nx-offer p { margin: 0; } .nx-offer__fields { display: flex; flex-wrap: wrap; gap: var(--nx-space-1) var(--nx-space-4); } .nx-offer .nx-btn { justify-self: start; } .nx-newfield .nx-check { min-height: 0; display: flex; } .nx-newfield .nx-btn { min-height: var(--nx-control-h); } @media (prefers-reduced-motion: no-preference) { .nx-f.is-remote { animation: nx-rec-flash calc(var(--nx-duration-linger) * .875) var(--nx-ease); } } @keyframes nx-rec-flash { from { background: color-mix(in srgb, var(--nx-color-accent) 22%, transparent); } } /* People and agents side by side (07 DS6): what an agent changed or wants to change is drawn in the agent's violet, where it is. */ .nx-agent-mark { color: var(--nx-color-agent); margin-left: var(--nx-space-1); font-weight: var(--nx-weight-bold); } .nx-f.is-agent > .nx-f__control :is(.nx-input, .nx-textarea, .nx-select, .nx-f__ro) { border-color: var(--nx-color-agent); box-shadow: 0 0 0 1px var(--nx-color-agent); } .nx-f.is-proposed > .nx-f__control :is(.nx-input, .nx-textarea, .nx-select, .nx-f__ro) { border-style: dashed; border-color: var(--nx-color-agent); } .nx-agent-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-1) var(--nx-space-3); margin: var(--nx-space-1) 0 0; padding: var(--nx-space-1) var(--nx-space-2); border-left: 3px solid var(--nx-color-agent); border-radius: var(--nx-radius-sm); background: var(--nx-color-agent-soft); color: var(--nx-color-text); font-size: var(--nx-text-sm); min-width: 0; } .nx-agent-note > * { margin: 0; min-width: 0; overflow-wrap: anywhere; } .nx-agent-note .nx-agent-mark { margin: 0 var(--nx-space-1) 0 0; } .nx-agent-note__text { flex: 1 1 12rem; } .nx-agent-note__value { quotes: "“" "”"; } .nx-agent-note__tools { display: flex; gap: var(--nx-space-2); flex: none; } .nx-agent-note--record { margin: 0 0 var(--nx-space-4); padding: var(--nx-space-3); } .nx-agent-note--record .nx-diff { margin-top: var(--nx-space-2); } .nx-btn--agent { background: var(--nx-color-agent); border-color: var(--nx-color-agent); color: var(--nx-color-agent-contrast); } .nx-btn--agent:hover { background: color-mix(in srgb, var(--nx-color-agent) 85%, black); } .nx-history { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-space-3); font-size: var(--nx-text-sm); } .nx-history__entry { display: grid; gap: var(--nx-space-1); padding-left: var(--nx-space-3); border-left: 2px solid var(--nx-color-border); min-width: 0; } .nx-history__entry.is-agent { border-left-color: var(--nx-color-agent); } .nx-history__entry.is-undone .nx-diff { opacity: .6; } .nx-history__head, .nx-history__foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--nx-space-2); margin: 0; } .nx-history__head .nx-agent-mark { margin: 0; } .nx-history .nx-diff { overflow-wrap: anywhere; } .nx-history .nx-diff dt { color: var(--nx-color-text-muted); } } @layer components { /* An offered piece's photos on its record page (commerce.submission). */ .nx-sub-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: var(--nx-space-2); margin: 0; padding: 0; list-style: none; } .nx-sub-photos img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--nx-radius-sm); background: var(--nx-color-surface); } } @layer app { /* A record type's lifecycle (ADR-088): states and moves drawn by the server, the moves in words, and the .nxs beside them. */ .nx-lc { display: grid; gap: var(--nx-space-4); margin-top: var(--nx-space-4); } @media (min-width: 70rem) { .nx-lc--edit { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; } } .nx-lc__draw { overflow-x: auto; border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius); background: var(--nx-color-surface); } .nx-lc__draw svg { display: block; min-width: 100%; height: auto; font-family: inherit; } .nx-lc__state rect { fill: var(--nx-color-surface-2); stroke: var(--nx-color-border-strong); } .nx-lc__state--sunset rect { fill: var(--nx-color-warning-soft); } .nx-lc__state--archived rect { fill: var(--nx-color-surface); stroke-dasharray: 4 3; } .nx-lc__state text { fill: var(--nx-color-text); font-size: 13px; text-anchor: middle; } .nx-lc__move path { fill: none; stroke: var(--nx-color-text-muted); stroke-width: 1.5; marker-end: url(#nx-lc-arrow); } .nx-lc__move text { fill: var(--nx-color-text-muted); font-size: 12px; text-anchor: middle; paint-order: stroke; stroke: var(--nx-color-surface); stroke-width: 4px; } .nx-lc__head { fill: var(--nx-color-text-muted); } .nx-lc__moves { margin: 0; padding-left: var(--nx-space-5); } .nx-lc__moves li + li { margin-top: var(--nx-space-2); } .nx-lc__moves ul { margin: var(--nx-space-1) 0 0; padding-left: var(--nx-space-4); color: var(--nx-color-text-muted); font-size: var(--nx-text-sm); } .nx-lc__text textarea { font-family: var(--nx-font-mono); font-size: var(--nx-text-sm); min-height: 24rem; } .nx-lc__text pre { margin: 0; padding: var(--nx-space-3); overflow-x: auto; font-size: var(--nx-text-sm); background: var(--nx-color-surface-2); border-radius: var(--nx-radius); } .nx-lc__problems { margin: 0; padding-left: var(--nx-space-5); color: var(--nx-color-danger); font-size: var(--nx-text-sm); } } /* css/views.css */ /* View kinds (ADR-076): board, quadrant, calendar, timeline, gallery, tree, graph, map and matrix over any record type. Tokens only; no inline styles (CSP): a timeline bar is placed by vk-at- and vk-span-, a tree row by vk-depth-; the graph and the map by SVG attributes. */ /* ── The bar: kinds and their fields ── */ .vk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-2) var(--nx-space-4); margin-block: var(--nx-space-2) var(--nx-space-3); } .vk-tabs { display: flex; flex-wrap: wrap; gap: var(--nx-space-1); padding: 2px; background: var(--nx-color-surface-2); border-radius: var(--nx-radius); } .vk-tabs a { padding: var(--nx-space-1) var(--nx-space-3); border-radius: var(--nx-radius-sm); color: var(--nx-color-text-muted); text-decoration: none; font-size: var(--nx-text-sm); font-weight: var(--nx-weight-medium, 500); } .vk-tabs a:hover { color: var(--nx-color-text); } .vk-tabs a[aria-current="page"] { background: var(--nx-color-surface); color: var(--nx-color-text); box-shadow: var(--nx-shadow-sm); } .vk-tabs a:focus-visible { outline: 2px solid var(--nx-color-focus); outline-offset: 1px; } .vk-picks { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-2) var(--nx-space-3); } .vk-pick { display: inline-flex; align-items: center; gap: var(--nx-space-2); font-size: var(--nx-text-sm); color: var(--nx-color-text-muted); } .vk-pick select { max-inline-size: 14rem; } .vk-period { display: inline-flex; align-items: center; gap: var(--nx-space-2); } .vk-period__label { font-size: var(--nx-text-sm); min-inline-size: 9rem; text-align: center; } .vk-keys { margin: 0 0 var(--nx-space-3); } .vk-count { margin: 0 0 var(--nx-space-3); font-size: var(--nx-text-sm); } /* ── Cards ── */ .vk-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-space-2); min-inline-size: 0; } .vk-cards--row { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); } .vk-card { display: flex; flex-direction: column; gap: var(--nx-space-1); background: var(--nx-color-surface); border: var(--nx-border-width) solid var(--nx-color-border); border-radius: var(--nx-radius); padding: var(--nx-space-2) var(--nx-space-3); min-inline-size: 0; cursor: default; transition: box-shadow var(--nx-duration-fast) var(--nx-ease), border-color var(--nx-duration-fast) var(--nx-ease); } .vk-card[draggable="true"] { cursor: grab; } .vk-card:hover { border-color: var(--nx-color-border-strong); } .vk-card:focus, .vk-card:focus-visible { outline: 2px solid var(--nx-color-focus); outline-offset: 1px; box-shadow: var(--nx-shadow-sm); } .vk-card.is-dragging { opacity: 0.45; } .vk-card[aria-busy="true"] { opacity: 0.55; } .vk-card.is-done .vk-card__title { color: var(--nx-color-text-muted); text-decoration: line-through; } .vk-card.is-blocked { border-inline-start: 3px solid var(--nx-color-warning); } .vk-card__title { font-weight: 600; color: var(--nx-color-text); text-decoration: none; overflow-wrap: anywhere; } .vk-card__title:hover { text-decoration: underline; } .vk-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-2); font-size: var(--nx-text-sm); } .vk-card__code { font-family: var(--nx-font-mono); color: var(--nx-color-text-muted); font-variant-numeric: tabular-nums; } .vk-card__facts { display: grid; gap: 0 var(--nx-space-2); grid-template-columns: auto 1fr; margin: 0; font-size: var(--nx-text-sm); } .vk-card__facts > div { display: contents; } .vk-card__facts dt { color: var(--nx-color-text-muted); } .vk-card__facts dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } .vk-card__after { font-size: var(--nx-text-sm); color: var(--nx-color-text-muted); } .vk-card__after.is-blocked { color: var(--nx-color-text); } /* ── Lanes: board and quadrant ── */ .vk-lane { min-inline-size: 0; } .vk-lane.is-over { outline: 2px dashed var(--nx-color-accent); outline-offset: -2px; background: var(--nx-color-accent-soft); } .vk-lane__h { font-size: var(--nx-text-md); margin: 0 0 var(--nx-space-3); display: flex; gap: var(--nx-space-2); align-items: baseline; } .vk-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 1fr); gap: var(--nx-space-4); align-items: start; overflow-x: auto; padding-block-end: var(--nx-space-2); } .vk-board > .vk-lane, .vk-quad__q { background: var(--nx-color-surface-2); border: var(--nx-border-width) solid var(--nx-color-border); border-block-start: 3px solid var(--nx-color-border-strong); border-radius: var(--nx-radius); padding: var(--nx-space-3); } .vk-tone-info { border-block-start-color: var(--nx-color-info) !important; } .vk-tone-success { border-block-start-color: var(--nx-color-success) !important; } .vk-tone-warning { border-block-start-color: var(--nx-color-warning) !important; } .vk-tone-danger { border-block-start-color: var(--nx-color-danger) !important; } @media (max-width: 40rem) { .vk-board { grid-auto-flow: row; grid-auto-columns: auto; } } .vk-quad { display: grid; grid-template-columns: auto 1fr 1fr; grid-template-rows: auto 1fr 1fr; gap: var(--nx-space-3); } .vk-quad__axis { font-size: var(--nx-text-sm); color: var(--nx-color-text-muted); align-self: center; } .vk-quad__axis { font-weight: 600; text-align: center; } .vk-quad__axis--x1 { grid-column: 2; grid-row: 1; } .vk-quad__axis--x0 { grid-column: 3; grid-row: 1; } .vk-quad__axis--y1, .vk-quad__axis--y0 { grid-column: 1; writing-mode: vertical-rl; transform: rotate(180deg); } .vk-quad__axis--y1 { grid-row: 2; } .vk-quad__axis--y0 { grid-row: 3; } .vk-quad__q--00 { grid-column: 2; grid-row: 2; border-block-start-color: var(--nx-color-danger); } .vk-quad__q--10 { grid-column: 3; grid-row: 2; border-block-start-color: var(--nx-color-info); } .vk-quad__q--01 { grid-column: 2; grid-row: 3; border-block-start-color: var(--nx-color-warning); } .vk-quad__q--11 { grid-column: 3; grid-row: 3; } @media (max-width: 40rem) { .vk-quad { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; } .vk-quad__axis { display: none; } .vk-quad__q { grid-column: 1 !important; grid-row: auto !important; } } /* ── Calendar ── */ .vk-cal { border: var(--nx-border-width) solid var(--nx-color-border); border-radius: var(--nx-radius); overflow: hidden; } .vk-cal__head, .vk-cal__week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); } .vk-cal__head span { padding: var(--nx-space-2); font-size: var(--nx-text-sm); color: var(--nx-color-text-muted); background: var(--nx-color-surface-2); text-align: start; } .vk-cal__day { background: var(--nx-color-surface); min-block-size: 7rem; padding: var(--nx-space-1) var(--nx-space-2) var(--nx-space-2); border-block-start: var(--nx-border-width) solid var(--nx-color-border); border-inline-start: var(--nx-border-width) solid var(--nx-color-border); display: flex; flex-direction: column; gap: var(--nx-space-1); } .vk-cal__day:first-child { border-inline-start: 0; } .vk-cal__day.is-muted { background: var(--nx-color-surface-2); } .vk-cal__day.is-muted .vk-cal__n { color: var(--nx-color-text-muted); } .vk-cal__day:focus-visible { outline: 2px solid var(--nx-color-focus); outline-offset: -2px; } .vk-cal__n { font-size: var(--nx-text-sm); font-variant-numeric: tabular-nums; } .vk-cal__day.is-today .vk-cal__n { display: inline-grid; place-items: center; inline-size: 1.6rem; block-size: 1.6rem; border-radius: var(--nx-radius-pill); background: var(--nx-color-accent); color: var(--nx-color-accent-contrast); } .vk-cal .vk-cards { gap: var(--nx-space-1); } .vk-cal .vk-card { padding: 2px var(--nx-space-2); font-size: var(--nx-text-sm); } .vk-cal .vk-card__facts, .vk-cal .vk-card__meta { display: none; } @media (max-width: 40rem) { .vk-cal__head { display: none; } .vk-cal__week { grid-template-columns: minmax(0, 1fr); } .vk-cal__day { min-block-size: 0; border-inline-start: 0; } .vk-cal__day:not(:has(.vk-card)):not(.is-today) { display: none; } } /* ── Timeline ── */ .vk-tl { --tl-label: 16rem; --tl-day: 2rem; --tl-weekend: var(--nx-color-surface-2); overflow-x: auto; border: var(--nx-border-width) solid var(--nx-color-border); border-radius: var(--nx-radius); max-inline-size: 100%; } @media (max-width: 40rem) { .vk-tl { --tl-label: 9rem; --tl-day: 1.75rem; } } .vk-tl__grid { inline-size: max-content; min-inline-size: 100%; } .vk-tl__bars { list-style: none; margin: 0; padding: 0; } .vk-tl__row { display: grid; grid-template-columns: var(--tl-label); grid-auto-columns: var(--tl-day); align-items: center; min-block-size: 2.5rem; border-block-end: var(--nx-border-width) solid var(--nx-color-border); background-image: repeating-linear-gradient(90deg, transparent 0 calc(var(--tl-day) * 5), var(--tl-weekend) calc(var(--tl-day) * 5) calc(var(--tl-day) * 7)); background-position: var(--tl-label) 0; } .vk-tl__row > * { grid-row: 1; } .vk-tl__row--head { position: sticky; inset-block-start: 0; background-color: var(--nx-color-surface); z-index: 1; font-size: var(--nx-text-sm); min-block-size: 2.75rem; padding-block-end: var(--nx-space-1); } .vk-tl__row--group { background-color: var(--nx-color-surface-2); min-block-size: 2rem; } .vk-tl__label { grid-column: 1; padding: var(--nx-space-1) var(--nx-space-2); min-inline-size: 0; position: sticky; inset-inline-start: 0; background: var(--nx-color-surface); z-index: 1; border-inline-end: var(--nx-border-width) solid var(--nx-color-border); align-self: stretch; display: flex; align-items: center; } .vk-tl__row--group .vk-tl__label { background: var(--nx-color-surface-2); font-weight: 600; font-size: var(--nx-text-sm); } .vk-tl__label .vk-card { border: 0; padding: 0; background: transparent; inline-size: 100%; } .vk-tl__label .vk-card__facts, .vk-tl__label .vk-card__after { display: none; } .vk-tl__day { display: grid; justify-items: center; align-content: end; color: var(--nx-color-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; } .vk-tl__month { font-size: var(--nx-text-xs, 0.75rem); font-weight: 600; color: var(--nx-color-text); min-block-size: 1em; justify-self: start; padding-inline-start: 2px; } .vk-tl__day.is-monday { border-inline-start: var(--nx-border-width) solid var(--nx-color-border); } .vk-tl__day.is-today { color: var(--nx-color-accent); font-weight: 700; } .vk-tl__bar { block-size: 1.25rem; border-radius: var(--nx-radius-sm); background: var(--nx-color-accent); margin-inline: 2px; touch-action: none; } .vk-tl__bar.is-done { background: var(--nx-color-success); opacity: 0.6; } .vk-tl__bar.is-blocked { background: var(--nx-color-warning); } .vk-tl__bar.is-cut-start { border-start-start-radius: 0; border-end-start-radius: 0; margin-inline-start: 0; } .vk-tl__bar.is-cut-end { border-start-end-radius: 0; border-end-end-radius: 0; margin-inline-end: 0; } .vk-tl__bar.is-dragging { outline: 2px dashed var(--nx-color-focus); } .vk-tl__row:has(.vk-card:focus) .vk-tl__bar { outline: 2px solid var(--nx-color-focus); outline-offset: 1px; } .vk-tl__marker { color: var(--nx-color-accent); text-align: center; } /* Bars: a day's column and how many days (the range is at most 91). */ .vk-at-0 { grid-column-start: 2; } .vk-at-1 { grid-column-start: 3; } .vk-at-2 { grid-column-start: 4; } .vk-at-3 { grid-column-start: 5; } .vk-at-4 { grid-column-start: 6; } .vk-at-5 { grid-column-start: 7; } .vk-at-6 { grid-column-start: 8; } .vk-at-7 { grid-column-start: 9; } .vk-at-8 { grid-column-start: 10; } .vk-at-9 { grid-column-start: 11; } .vk-at-10 { grid-column-start: 12; } .vk-at-11 { grid-column-start: 13; } .vk-at-12 { grid-column-start: 14; } .vk-at-13 { grid-column-start: 15; } .vk-at-14 { grid-column-start: 16; } .vk-at-15 { grid-column-start: 17; } .vk-at-16 { grid-column-start: 18; } .vk-at-17 { grid-column-start: 19; } .vk-at-18 { grid-column-start: 20; } .vk-at-19 { grid-column-start: 21; } .vk-at-20 { grid-column-start: 22; } .vk-at-21 { grid-column-start: 23; } .vk-at-22 { grid-column-start: 24; } .vk-at-23 { grid-column-start: 25; } .vk-at-24 { grid-column-start: 26; } .vk-at-25 { grid-column-start: 27; } .vk-at-26 { grid-column-start: 28; } .vk-at-27 { grid-column-start: 29; } .vk-at-28 { grid-column-start: 30; } .vk-at-29 { grid-column-start: 31; } .vk-at-30 { grid-column-start: 32; } .vk-at-31 { grid-column-start: 33; } .vk-at-32 { grid-column-start: 34; } .vk-at-33 { grid-column-start: 35; } .vk-at-34 { grid-column-start: 36; } .vk-at-35 { grid-column-start: 37; } .vk-at-36 { grid-column-start: 38; } .vk-at-37 { grid-column-start: 39; } .vk-at-38 { grid-column-start: 40; } .vk-at-39 { grid-column-start: 41; } .vk-at-40 { grid-column-start: 42; } .vk-at-41 { grid-column-start: 43; } .vk-at-42 { grid-column-start: 44; } .vk-at-43 { grid-column-start: 45; } .vk-at-44 { grid-column-start: 46; } .vk-at-45 { grid-column-start: 47; } .vk-at-46 { grid-column-start: 48; } .vk-at-47 { grid-column-start: 49; } .vk-at-48 { grid-column-start: 50; } .vk-at-49 { grid-column-start: 51; } .vk-at-50 { grid-column-start: 52; } .vk-at-51 { grid-column-start: 53; } .vk-at-52 { grid-column-start: 54; } .vk-at-53 { grid-column-start: 55; } .vk-at-54 { grid-column-start: 56; } .vk-at-55 { grid-column-start: 57; } .vk-at-56 { grid-column-start: 58; } .vk-at-57 { grid-column-start: 59; } .vk-at-58 { grid-column-start: 60; } .vk-at-59 { grid-column-start: 61; } .vk-at-60 { grid-column-start: 62; } .vk-at-61 { grid-column-start: 63; } .vk-at-62 { grid-column-start: 64; } .vk-at-63 { grid-column-start: 65; } .vk-at-64 { grid-column-start: 66; } .vk-at-65 { grid-column-start: 67; } .vk-at-66 { grid-column-start: 68; } .vk-at-67 { grid-column-start: 69; } .vk-at-68 { grid-column-start: 70; } .vk-at-69 { grid-column-start: 71; } .vk-at-70 { grid-column-start: 72; } .vk-at-71 { grid-column-start: 73; } .vk-at-72 { grid-column-start: 74; } .vk-at-73 { grid-column-start: 75; } .vk-at-74 { grid-column-start: 76; } .vk-at-75 { grid-column-start: 77; } .vk-at-76 { grid-column-start: 78; } .vk-at-77 { grid-column-start: 79; } .vk-at-78 { grid-column-start: 80; } .vk-at-79 { grid-column-start: 81; } .vk-at-80 { grid-column-start: 82; } .vk-at-81 { grid-column-start: 83; } .vk-at-82 { grid-column-start: 84; } .vk-at-83 { grid-column-start: 85; } .vk-at-84 { grid-column-start: 86; } .vk-at-85 { grid-column-start: 87; } .vk-at-86 { grid-column-start: 88; } .vk-at-87 { grid-column-start: 89; } .vk-at-88 { grid-column-start: 90; } .vk-at-89 { grid-column-start: 91; } .vk-at-90 { grid-column-start: 92; } .vk-at-91 { grid-column-start: 93; } .vk-span-1 { grid-column-end: span 1; } .vk-span-2 { grid-column-end: span 2; } .vk-span-3 { grid-column-end: span 3; } .vk-span-4 { grid-column-end: span 4; } .vk-span-5 { grid-column-end: span 5; } .vk-span-6 { grid-column-end: span 6; } .vk-span-7 { grid-column-end: span 7; } .vk-span-8 { grid-column-end: span 8; } .vk-span-9 { grid-column-end: span 9; } .vk-span-10 { grid-column-end: span 10; } .vk-span-11 { grid-column-end: span 11; } .vk-span-12 { grid-column-end: span 12; } .vk-span-13 { grid-column-end: span 13; } .vk-span-14 { grid-column-end: span 14; } .vk-span-15 { grid-column-end: span 15; } .vk-span-16 { grid-column-end: span 16; } .vk-span-17 { grid-column-end: span 17; } .vk-span-18 { grid-column-end: span 18; } .vk-span-19 { grid-column-end: span 19; } .vk-span-20 { grid-column-end: span 20; } .vk-span-21 { grid-column-end: span 21; } .vk-span-22 { grid-column-end: span 22; } .vk-span-23 { grid-column-end: span 23; } .vk-span-24 { grid-column-end: span 24; } .vk-span-25 { grid-column-end: span 25; } .vk-span-26 { grid-column-end: span 26; } .vk-span-27 { grid-column-end: span 27; } .vk-span-28 { grid-column-end: span 28; } .vk-span-29 { grid-column-end: span 29; } .vk-span-30 { grid-column-end: span 30; } .vk-span-31 { grid-column-end: span 31; } .vk-span-32 { grid-column-end: span 32; } .vk-span-33 { grid-column-end: span 33; } .vk-span-34 { grid-column-end: span 34; } .vk-span-35 { grid-column-end: span 35; } .vk-span-36 { grid-column-end: span 36; } .vk-span-37 { grid-column-end: span 37; } .vk-span-38 { grid-column-end: span 38; } .vk-span-39 { grid-column-end: span 39; } .vk-span-40 { grid-column-end: span 40; } .vk-span-41 { grid-column-end: span 41; } .vk-span-42 { grid-column-end: span 42; } .vk-span-43 { grid-column-end: span 43; } .vk-span-44 { grid-column-end: span 44; } .vk-span-45 { grid-column-end: span 45; } .vk-span-46 { grid-column-end: span 46; } .vk-span-47 { grid-column-end: span 47; } .vk-span-48 { grid-column-end: span 48; } .vk-span-49 { grid-column-end: span 49; } .vk-span-50 { grid-column-end: span 50; } .vk-span-51 { grid-column-end: span 51; } .vk-span-52 { grid-column-end: span 52; } .vk-span-53 { grid-column-end: span 53; } .vk-span-54 { grid-column-end: span 54; } .vk-span-55 { grid-column-end: span 55; } .vk-span-56 { grid-column-end: span 56; } .vk-span-57 { grid-column-end: span 57; } .vk-span-58 { grid-column-end: span 58; } .vk-span-59 { grid-column-end: span 59; } .vk-span-60 { grid-column-end: span 60; } .vk-span-61 { grid-column-end: span 61; } .vk-span-62 { grid-column-end: span 62; } .vk-span-63 { grid-column-end: span 63; } .vk-span-64 { grid-column-end: span 64; } .vk-span-65 { grid-column-end: span 65; } .vk-span-66 { grid-column-end: span 66; } .vk-span-67 { grid-column-end: span 67; } .vk-span-68 { grid-column-end: span 68; } .vk-span-69 { grid-column-end: span 69; } .vk-span-70 { grid-column-end: span 70; } .vk-span-71 { grid-column-end: span 71; } .vk-span-72 { grid-column-end: span 72; } .vk-span-73 { grid-column-end: span 73; } .vk-span-74 { grid-column-end: span 74; } .vk-span-75 { grid-column-end: span 75; } .vk-span-76 { grid-column-end: span 76; } .vk-span-77 { grid-column-end: span 77; } .vk-span-78 { grid-column-end: span 78; } .vk-span-79 { grid-column-end: span 79; } .vk-span-80 { grid-column-end: span 80; } .vk-span-81 { grid-column-end: span 81; } .vk-span-82 { grid-column-end: span 82; } .vk-span-83 { grid-column-end: span 83; } .vk-span-84 { grid-column-end: span 84; } .vk-span-85 { grid-column-end: span 85; } .vk-span-86 { grid-column-end: span 86; } .vk-span-87 { grid-column-end: span 87; } .vk-span-88 { grid-column-end: span 88; } .vk-span-89 { grid-column-end: span 89; } .vk-span-90 { grid-column-end: span 90; } .vk-span-91 { grid-column-end: span 91; } /* ── Gallery ── */ .vk-cards--gallery { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--nx-space-3); } .vk-cards--gallery .vk-card { padding: 0 0 var(--nx-space-2); overflow: hidden; } .vk-cards--gallery .vk-card > :not(.vk-card__img) { margin-inline: var(--nx-space-2); } .vk-card__img { display: block; inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--nx-color-surface-2); border-block-end: var(--nx-border-width) solid var(--nx-color-border); } /* ── Tree ── */ .vk-cards--tree { gap: 2px; } .vk-tree__item { display: flex; align-items: center; gap: var(--nx-space-2); } .vk-tree__item .vk-card { flex: 1 1 auto; flex-direction: row; flex-wrap: wrap; align-items: baseline; padding-block: var(--nx-space-1); } .vk-tree__item .vk-card__facts { display: flex; gap: var(--nx-space-2); } .vk-tree__twisty { inline-size: 1rem; flex: none; color: var(--nx-color-text-muted); text-align: center; } .vk-tree__item[aria-expanded="false"] .vk-tree__twisty { transform: rotate(-90deg); } .vk-tree__item.is-folded { display: none; } .vk-depth-0 { padding-inline-start: calc(var(--nx-space-5) * 0); } .vk-depth-1 { padding-inline-start: calc(var(--nx-space-5) * 1); } .vk-depth-2 { padding-inline-start: calc(var(--nx-space-5) * 2); } .vk-depth-3 { padding-inline-start: calc(var(--nx-space-5) * 3); } .vk-depth-4 { padding-inline-start: calc(var(--nx-space-5) * 4); } .vk-depth-5 { padding-inline-start: calc(var(--nx-space-5) * 5); } .vk-depth-6 { padding-inline-start: calc(var(--nx-space-5) * 6); } .vk-depth-7 { padding-inline-start: calc(var(--nx-space-5) * 7); } .vk-depth-8 { padding-inline-start: calc(var(--nx-space-5) * 8); } /* ── Graph and map ── */ .vk-graph, .vk-map { margin: 0; border: var(--nx-border-width) solid var(--nx-color-border); border-radius: var(--nx-radius); background: var(--nx-color-surface); padding: var(--nx-space-2); } .vk-graph__svg, .vk-map__svg { display: block; inline-size: 100%; block-size: auto; max-block-size: 75vh; } .vk-graph__edges line { stroke: var(--nx-color-border-strong); stroke-width: 1.5; } .vk-map__grid line { stroke: var(--nx-color-border); stroke-width: 1; } .vk-node circle { fill: var(--nx-color-accent); stroke: var(--nx-color-surface); stroke-width: 2; } .vk-node--other circle { fill: var(--nx-color-surface); stroke: var(--nx-color-accent); } .vk-node.is-done circle { fill: var(--nx-color-success); } .vk-node text { fill: var(--nx-color-text); font-size: 13px; font-family: var(--nx-font-sans); paint-order: stroke; stroke: var(--nx-color-surface); stroke-width: 3px; } .vk-node { cursor: pointer; } .vk-node:focus { outline: none; } .vk-node:focus circle, .vk-node:hover circle { stroke: var(--nx-color-focus); stroke-width: 4; } .vk-graph figcaption, .vk-map figcaption { margin-block-start: var(--nx-space-2); } /* ── Matrix ── */ .vk-matrix__table th[scope="row"] { font-weight: 600; } .vk-matrix__table a { display: block; font-variant-numeric: tabular-nums; } .vk-matrix__table a:focus { outline: 2px solid var(--nx-color-focus); outline-offset: 1px; } .vk-matrix__total { font-weight: 600; background: var(--nx-color-surface-2); } /* ── Unplaced ── */ .vk-unplaced { margin-block-start: var(--nx-space-6); } @media (prefers-reduced-motion: reduce) { .vk-card { transition: none; } } /* css/knowledge.css */ /* Knowledge: the recorder, transcript import and a capture's page. */ .kx-controls { display: flex; align-items: center; gap: var(--nx-space-3); flex-wrap: wrap; margin-block-end: var(--nx-space-4); } #kx-rec[aria-pressed="true"] { background: var(--nx-color-danger); border-color: var(--nx-color-danger); } .kx-rec kbd, .kx-controls kbd { font-size: 0.75em; opacity: 0.75; margin-inline-start: 0.35em; } .kx-timer { font-variant-numeric: tabular-nums; font-size: 1.25rem; min-inline-size: 4ch; } .kx-level { inline-size: min(12rem, 40vw); block-size: 0.75rem; } .kx-policy { margin-inline-start: auto; } .kx-drop { display: flex; flex-direction: column; gap: var(--nx-space-2); padding: var(--nx-space-4); border: 1px dashed var(--nx-color-border); border-radius: var(--nx-radius); cursor: pointer; } .kx-drop[data-over] { border-color: var(--nx-color-accent); background: var(--nx-color-surface-2); } .kx-audio { inline-size: 100%; } .kx-text p { margin-block: 0 0.75em; line-height: 1.55; max-inline-size: 72ch; overflow-wrap: anywhere; } .kx-transcript { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; } .kx-transcript li { line-height: 1.5; overflow-wrap: anywhere; } .kx-at { font-variant-numeric: tabular-nums; color: var(--nx-color-text-muted); margin-inline-end: 0.5em; font-size: 0.85em; } /* Deliverables (OUT1): the record page's panels. */ .dl-findings { list-style: none; margin: 0 0 var(--nx-space-3); padding: 0; display: grid; gap: var(--nx-space-2); } .dl-f { overflow-wrap: anywhere; } .dl-ok { margin: 0 0 var(--nx-space-2); } .dl-block { margin: 0 0 var(--nx-space-2); color: var(--nx-color-danger); } .dl-exports { display: flex; flex-wrap: wrap; gap: var(--nx-space-2); margin: 0 0 var(--nx-space-2); } .dl-sources { margin: 0 0 var(--nx-space-2); padding-left: 1.6em; overflow-wrap: anywhere; } .dl-go { align-self: end; } .dl-from { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-2); } .dl-from .nx-label { flex-basis: 100%; } /* Presentations (M20): a deck's slides, each with its speaker notes. */ .dl-slides { list-style: none; margin: 0 0 var(--nx-space-3); padding: 0; display: grid; gap: var(--nx-space-3); } .dl-slide { border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius); padding: var(--nx-space-3); overflow-wrap: anywhere; min-inline-size: 0; } .dl-slide__title { margin: 0 0 var(--nx-space-2); font-size: var(--nx-text-md); font-weight: var(--nx-weight-medium); } .dl-slide__bullets { margin: 0; padding-inline-start: 1.2em; display: grid; gap: var(--nx-space-1); } .dl-slide__notes { margin-block-start: var(--nx-space-2); padding: var(--nx-space-2) var(--nx-space-3); border-inline-start: 3px solid var(--nx-color-border-strong); background: var(--nx-color-surface-2); border-radius: var(--nx-radius-sm); font-size: var(--nx-text-sm); color: var(--nx-color-text); } .dl-slide__notes p { margin: 0 0 var(--nx-space-1); } .dl-slide__notes-label { font-size: var(--nx-text-xs); font-weight: var(--nx-weight-medium); color: var(--nx-color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .kx-deck { margin-block-start: var(--nx-space-3); } /* The knowledge view (M17, 07 §3.6): raw, ladder, outputs. Three panes on a wide screen; tabs on a phone. */ .kx-view { display: grid; gap: var(--nx-space-4); grid-template-columns: minmax(0, 1fr); } .kx-pane { min-inline-size: 0; background: var(--nx-color-surface); border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius-lg); padding: var(--nx-space-4); } .kx-pane__title { font-size: 1rem; margin: 0 0 var(--nx-space-3); } .kx-tabs { position: sticky; top: 0; z-index: 1; background: var(--nx-color-bg); } .kx-tabs [role="tablist"] { display: flex; gap: var(--nx-space-1); border-bottom: 1px solid var(--nx-color-border); overflow-x: auto; } .kx-tabs [role="tab"] { min-height: var(--nx-tap-target); padding: 0 var(--nx-space-4); border: 0; border-bottom: 2px solid transparent; background: none; color: var(--nx-color-text-muted); font-weight: var(--nx-weight-medium); white-space: nowrap; } .kx-tabs [role="tab"][aria-selected="true"] { color: var(--nx-color-text); border-bottom-color: var(--nx-color-accent); } .kx-view[data-kx-js] .kx-pane:not([data-kx-shown]) { display: none; } .kx-view:not([data-kx-js]) .kx-tabs { display: none; } @media (min-width: 1100px) { .kx-view { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr) minmax(0, 0.7fr); align-items: start; } .kx-tabs { display: none; } .kx-pane, .kx-view[data-kx-js] .kx-pane:not([data-kx-shown]) { display: block; max-block-size: calc(100dvh - 10rem); overflow: auto; overscroll-behavior: contain; } } .kx-pane--raw .kx-transcript li { cursor: pointer; border-radius: var(--nx-radius-sm); padding-inline: var(--nx-space-1); } .kx-rungs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-space-3); } .kx-rung { border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius); padding: var(--nx-space-3); background: var(--nx-color-bg); } .kx-rung--entry { border-color: var(--nx-color-accent); } .kx-rung--stale { border-style: dashed; border-color: var(--nx-color-warning); } .kx-rung--at { outline: 2px solid var(--nx-color-accent); outline-offset: 2px; } .kx-rungs[data-kx-focusing] > .kx-rung:not([data-kx-focus]) { opacity: 0.45; } .kx-rung__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--nx-space-2); margin-block-end: var(--nx-space-2); } .kx-rung__name { margin: 0; font-size: 0.95rem; } .kx-delta { font-variant-numeric: tabular-nums; color: var(--nx-color-text-muted); font-weight: normal; } .kx-rung__by { font-size: var(--nx-text-sm); } .kx-rung__acts { margin-inline-start: auto; display: flex; gap: var(--nx-space-1); flex-wrap: wrap; } .kx-sents { margin: 0; line-height: 1.6; max-inline-size: 75ch; overflow-wrap: anywhere; } .kx-s { border-radius: var(--nx-radius-sm); cursor: pointer; transition: background-color var(--nx-duration-fast); } .kx-s:focus-visible { outline: 2px solid var(--nx-color-accent); outline-offset: 1px; } .kx-s--inferred { font-style: italic; color: var(--nx-color-text-muted); text-decoration: underline dotted; text-underline-offset: 3px; } .kx-lit { background: var(--nx-color-accent-soft); } .kx-src { background: var(--nx-color-warning-soft); } .kx-made { background: var(--nx-color-info-soft); } .kx-entry { margin: 0 0 var(--nx-space-3); } .kx-slider { display: flex; align-items: center; gap: var(--nx-space-2); margin-block-end: var(--nx-space-3); } .kx-slider input { flex: 1; max-inline-size: 16rem; } .kx-legend { margin-block: var(--nx-space-3); } .kx-parts__title { font-size: 0.95rem; margin: var(--nx-space-4) 0 var(--nx-space-2); } .kx-part { border-block-start: 1px solid var(--nx-color-border); padding-block: var(--nx-space-2); } .kx-part > summary { cursor: pointer; padding-block: var(--nx-space-1); overflow-wrap: anywhere; } .kx-part .kx-rungs { margin-block-start: var(--nx-space-2); } .kx-edit textarea { inline-size: 100%; } .kx-building { color: var(--nx-color-info); margin: 0 0 var(--nx-space-2); } .kx-outputs { list-style: none; margin: 0 0 var(--nx-space-4); padding: 0; display: grid; gap: var(--nx-space-3); } .kx-outputs li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--nx-space-1) var(--nx-space-2); } .kx-out__name { font-weight: 600; } .kx-out__from { color: var(--nx-color-text-muted); } @media (prefers-reduced-motion: reduce) { .kx-s { transition: none; } } /* A capture's outcomes and who spoke (MW2, ADR-055). */ .kx-summary { line-height: 1.55; max-inline-size: 72ch; margin-block: 0 0.75em; overflow-wrap: anywhere; } .kx-h { font-size: 0.95rem; margin-block: 1rem 0.35rem; } .kx-list { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: 0.35rem; max-inline-size: 72ch; } .kx-list li { line-height: 1.5; overflow-wrap: anywhere; } .kx-actions { list-style: none; padding: 0; } .kx-actions li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--nx-space-3); flex-wrap: wrap; } .kx-addtask { margin: 0; flex: none; } .kx-provenance { margin-block: 1rem 0; } .kx-speakers table { inline-size: 100%; max-inline-size: 36rem; } .kx-speakers td:last-child, .kx-speakers th:last-child { text-align: center; inline-size: 4rem; } .kx-speakers__foot { display: flex; align-items: center; gap: var(--nx-space-3); flex-wrap: wrap; margin-block: 0.75rem 0; } /* M18: roll-ups, briefs, notes on a record. */ .kx-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-space-3); } .kx-note { border-block-start: 1px solid var(--nx-color-border); padding-block-start: var(--nx-space-2); min-inline-size: 0; } .kx-note:first-child { border-block-start: 0; padding-block-start: 0; } .kx-note__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--nx-space-1) var(--nx-space-2); overflow-wrap: anywhere; } .kx-note__text { margin: var(--nx-space-1) 0 0; line-height: 1.55; max-inline-size: 75ch; overflow-wrap: anywhere; } .kx-rollup[aria-busy="true"] { opacity: 0.6; } .kx-brief .kx-h:first-of-type { margin-block-start: 0; } .kx-drafts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-space-4); } .kx-draft { border-block-start: 1px solid var(--nx-color-border); padding-block-start: var(--nx-space-3); min-inline-size: 0; } .kx-draft textarea { inline-size: 100%; } /* M20: sending a draft, and requests waiting for approval. */ .kx-sends { list-style: none; margin: 0 0 var(--nx-space-2); padding: 0; display: grid; gap: var(--nx-space-2); } .kx-send { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-2); min-inline-size: 0; overflow-wrap: anywhere; } .kx-send__decide { display: inline-flex; flex-wrap: wrap; gap: var(--nx-space-2); align-items: center; } .kx-sendbar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--nx-space-2); } .kx-sendform { flex: 1 1 100%; min-inline-size: 0; } .kx-sendform[open] > summary { margin-block-end: var(--nx-space-2); } .kx-sendform > summary { list-style: none; inline-size: max-content; cursor: pointer; color: var(--nx-color-accent); } .kx-sendform > summary::-webkit-details-marker { display: none; } .kx-sendform form { display: grid; gap: var(--nx-space-1); max-inline-size: 40rem; } .kx-sendform input { inline-size: 100%; } .kx-approvals { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-space-5); } .kx-approval { min-inline-size: 0; } .kx-approval textarea { inline-size: 100%; } .kx-approval:focus-within, .kx-approval:focus { outline: 2px solid var(--nx-color-focus); outline-offset: var(--nx-space-1); border-radius: var(--nx-radius-sm); } .kx-push { display: grid; gap: var(--nx-space-1); justify-items: end; } @media (max-width: 40rem) { .kx-push { justify-items: start; } } /* VX dock (M19): talking to Nexus (web/static/js/vx.js). Bottom right on a wide screen; a full-width bottom sheet on a phone. */ .vx { position: fixed; z-index: var(--nx-z-overlay); inset: auto var(--nx-space-4) var(--nx-space-4) auto; inline-size: min(26rem, calc(100vw - 2 * var(--nx-space-4))); max-block-size: min(40rem, calc(100dvh - 2 * var(--nx-space-4))); display: flex; flex-direction: column; gap: var(--nx-space-2); padding: var(--nx-space-3) var(--nx-space-4); background: var(--nx-color-surface); color: var(--nx-color-text); border: 1px solid var(--nx-color-border-strong); border-radius: var(--nx-radius-lg); box-shadow: var(--nx-shadow-lg); overflow: hidden; } .vx[hidden], .vx [hidden] { display: none !important; } .vx :focus-visible { outline: 3px solid var(--nx-color-focus); outline-offset: 2px; } .vx__head { display: flex; align-items: center; gap: var(--nx-space-2); min-inline-size: 0; } .vx__title { font-size: var(--nx-text-md); margin: 0; white-space: nowrap; } .vx__label { font-size: var(--nx-text-xs); color: var(--nx-color-text-muted); min-inline-size: 0; overflow-wrap: anywhere; } .vx__close { margin-inline-start: auto; flex: none; } .vx__modes { display: flex; flex-wrap: wrap; gap: var(--nx-space-1); } .vx__mode { display: inline-flex; align-items: center; gap: var(--nx-space-1); min-block-size: 2rem; padding: 0 var(--nx-space-2); border: 1px solid var(--nx-color-border-strong); border-radius: var(--nx-radius-pill); background: var(--nx-color-surface); color: var(--nx-color-text); font-size: var(--nx-text-sm); cursor: pointer; } .vx__mode:hover { background: var(--nx-color-surface-2); } .vx__mode[aria-pressed="true"] { background: var(--nx-color-accent); border-color: var(--nx-color-accent); color: var(--nx-color-accent-contrast); } .vx__mode kbd { font-size: 0.7em; border-color: currentColor; } .vx__bar { display: flex; align-items: center; gap: var(--nx-space-3); } .vx__mic { flex: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; inline-size: 4.5rem; block-size: 4.5rem; border-radius: 50%; border: 2px solid var(--nx-color-accent); background: var(--nx-color-surface); color: var(--nx-color-accent); font-size: var(--nx-text-xs); font-weight: var(--nx-weight-medium); cursor: pointer; line-height: 1.1; text-align: center; transition: background-color var(--nx-duration-fast) var(--nx-ease); } .vx__mic:hover { background: var(--nx-color-accent-soft); } .vx__mic[aria-pressed="true"] { background: var(--nx-color-accent); color: var(--nx-color-accent-contrast); } .vx__icon { inline-size: 1.5rem; block-size: 1.5rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .vx__status { display: grid; gap: var(--nx-space-1); min-inline-size: 0; flex: 1; } .vx__state { font-size: var(--nx-text-sm); font-weight: var(--nx-weight-medium); } .vx__level { inline-size: 100%; block-size: 0.6rem; } .vx__lat { font-size: var(--nx-text-xs); color: var(--nx-color-text-muted); font-variant-numeric: tabular-nums; min-block-size: 1em; } .vx__note { margin: 0; font-size: var(--nx-text-sm); color: var(--nx-color-text); background: var(--nx-color-warning-soft); border-radius: var(--nx-radius-sm); padding: var(--nx-space-1) var(--nx-space-2); } .vx__turns { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-space-2); align-content: start; overflow-y: auto; overscroll-behavior: contain; min-block-size: 3rem; flex: 1 1 auto; } .vx-turn { display: grid; gap: 2px; font-size: var(--nx-text-sm); line-height: 1.45; overflow-wrap: anywhere; min-inline-size: 0; } .vx-turn__who { color: var(--nx-color-text-muted); font-size: var(--nx-text-xs); margin-inline-end: var(--nx-space-1); } .vx-turn__nexus { padding-inline-start: var(--nx-space-2); border-inline-start: 2px solid var(--nx-color-accent); } .vx-turn__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-1); font-size: var(--nx-text-xs); color: var(--nx-color-text-muted); } .vx-turn--busy .vx-turn__nexus .vx-turn__text { color: var(--nx-color-text-muted); } .vx-turn--note { color: var(--nx-color-text-muted); font-size: var(--nx-text-xs); border-block-start: 1px dashed var(--nx-color-border); padding-block-start: var(--nx-space-1); } .vx-turn--note a { display: inline-flex; align-items: center; min-block-size: 24px; color: var(--nx-color-accent); font-weight: var(--nx-weight-medium); } .vx-turn--danger { color: var(--nx-color-danger); } .vx__cards { display: grid; gap: var(--nx-space-2); } .vx-card { border: 1px solid var(--nx-color-border-strong); border-radius: var(--nx-radius); padding: var(--nx-space-2) var(--nx-space-3); background: var(--nx-color-bg); display: grid; gap: var(--nx-space-1); min-inline-size: 0; } .vx-card--screen { border-color: var(--nx-color-warning); border-inline-start-width: 4px; } .vx-card__title { font-size: var(--nx-text-sm); margin: 0; overflow-wrap: anywhere; } .vx-card__risk, .vx-card__say, .vx-card__why { margin: 0; font-size: var(--nx-text-sm); overflow-wrap: anywhere; } .vx-card__why { color: var(--nx-color-text-muted); } .vx-card__args { list-style: none; margin: 0; padding: 0; font-size: var(--nx-text-sm); overflow-wrap: anywhere; } .vx-card__key { color: var(--nx-color-text-muted); } .vx-card__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-2); font-size: var(--nx-text-sm); } .vx__type { margin: 0; } .vx__text { inline-size: 100%; } .vx__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--nx-space-2); flex-wrap: wrap; } .vx__history { display: inline-flex; align-items: center; min-block-size: 24px; color: var(--nx-color-accent); font-size: var(--nx-text-sm); } @media (max-width: 40rem) { .vx { inset: auto 0 0 0; inline-size: 100%; max-block-size: 85dvh; border-radius: var(--nx-radius-lg) var(--nx-radius-lg) 0 0; border-inline: 0; border-block-end: 0; padding-block-end: calc(var(--nx-space-3) + env(safe-area-inset-bottom, 0px)); } .vx__mic { inline-size: 4rem; block-size: 4rem; } } @media (prefers-reduced-motion: reduce) { .vx__mic { transition: none; } } /* M18.1: research and enrich, threads, contradictions. */ .kx-research { margin-block-start: var(--nx-space-4); border-block-start: 1px solid var(--nx-color-border); padding-block-start: var(--nx-space-3); } .kx-research__title { font-size: 1rem; margin: 0 0 var(--nx-space-2); } .kx-research__form { display: grid; gap: var(--nx-space-2); max-inline-size: 72ch; } .kx-research__in { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--nx-space-1) var(--nx-space-4); } .kx-research__query .nx-input { inline-size: 100%; } .kx-enrich-list, .kx-contras { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-space-3); } .kx-enrich__facts, .kx-enrich__sources { margin: var(--nx-space-1) 0; padding-inline-start: 1.25rem; display: grid; gap: 0.3rem; overflow-wrap: anywhere; } .kx-enrich__sub { font-size: 0.875rem; margin: var(--nx-space-2) 0 0; } .kx-cite { font-size: 0.8em; vertical-align: super; text-decoration: none; } .kx-contra blockquote { margin: var(--nx-space-1) 0; padding-inline-start: var(--nx-space-3); border-inline-start: 3px solid var(--nx-color-border); overflow-wrap: anywhere; } .kx-contra blockquote p { margin: 0; } .kx-contra blockquote footer { font-size: 0.875rem; color: var(--nx-color-text-muted); } .kx-inline-form { display: inline; } /* css/work.css */ /* My work (ADR-054): Today, the task views, the dashboard and quick capture. Today's components; DS1 restyles them. */ .nx-work-capture { display: grid; grid-template-columns: 1fr auto; gap: var(--nx-space-2); margin-block-end: var(--nx-space-6); } .nx-work-capture .nx-work-help { grid-column: 1 / -1; margin: 0; } .nx-work-help { font-size: var(--nx-text-sm, 0.875rem); } .nx-work-h { font-size: var(--nx-text-lg); margin: 0 0 var(--nx-space-3); text-align: start; } .nx-work-foot { margin-block-start: var(--nx-space-4); } .nx-work-today { display: grid; grid-template-columns: minmax(16rem, 1fr) minmax(0, 2fr); gap: var(--nx-space-8); align-items: start; } @media (max-width: 52rem) { .nx-work-today { grid-template-columns: 1fr; } } .nx-work-agenda, .nx-work-list { list-style: none; margin: 0; padding: 0; } .nx-work-meeting { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--nx-space-3); padding-block: var(--nx-space-2); border-block-end: var(--nx-border-width) solid var(--nx-color-border); } .nx-work-when { font-variant-numeric: tabular-nums; color: var(--nx-color-text-muted); } .nx-work-meeting__main { display: flex; flex-direction: column; gap: var(--nx-space-1); min-width: 0; } .nx-work-group { margin-block-end: var(--nx-space-6); } .nx-work-group__h { font-size: var(--nx-text-md); margin: 0 0 var(--nx-space-2); } .nx-work-task { display: grid; grid-template-columns: auto 1fr auto; gap: var(--nx-space-3); align-items: start; padding-block: var(--nx-space-2); border-block-end: var(--nx-border-width) solid var(--nx-color-border); } .nx-work-task:focus-within { background: var(--nx-color-surface-2); } .nx-work-task__main { display: flex; flex-direction: column; gap: var(--nx-space-1); min-width: 0; } .nx-work-task__title { overflow-wrap: anywhere; } .nx-work-task.is-done .nx-work-task__title { text-decoration: line-through; color: var(--nx-color-text-muted); } .nx-work-meta { display: flex; flex-wrap: wrap; gap: var(--nx-space-2); align-items: center; font-size: var(--nx-text-sm, 0.875rem); } .nx-work-due.is-overdue, td.is-overdue, .nx-work-stats .is-overdue strong { color: var(--nx-color-danger); } .nx-work-tick { inline-size: 1.5rem; block-size: 1.5rem; min-inline-size: 1.5rem; margin-block-start: 0.1rem; border: 2px solid var(--nx-color-border-strong); border-radius: 50%; background: var(--nx-color-surface); color: var(--nx-color-success); font-weight: 700; line-height: 1; cursor: pointer; } .nx-work-tick:hover { border-color: var(--nx-color-success); } .nx-work-tick[aria-pressed="true"] { border-color: var(--nx-color-success); background: var(--nx-color-success-soft); } .nx-work-tick:focus-visible { outline: 2px solid var(--nx-color-focus); outline-offset: 2px; } .nx-work-plan { display: flex; gap: var(--nx-space-1); } @media (max-width: 40rem) { .nx-work-task { grid-template-columns: auto 1fr; } .nx-work-plan { grid-column: 2; } } .nx-work-views { display: flex; flex-wrap: wrap; gap: var(--nx-space-4); margin-block-end: var(--nx-space-6); } .nx-work-views a[aria-current="page"] { font-weight: 700; text-decoration: underline; text-underline-offset: 0.3em; } .nx-work-stats { list-style: none; padding: 0; margin: 0 0 var(--nx-space-6); display: flex; flex-wrap: wrap; gap: var(--nx-space-6); } .nx-work-stats strong { font-size: var(--nx-text-2xl); display: block; font-variant-numeric: tabular-nums; } .nx-work-dash { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nx-space-8); align-items: start; } @media (max-width: 52rem) { .nx-work-dash { grid-template-columns: 1fr; } } .nx-work-tally { inline-size: 100%; } .nx-work-tally caption { caption-side: top; } .nx-work-tally th[scope="row"] { font-weight: 400; } .nx-work-tally th[scope="row"] .nx-muted { display: block; font-size: var(--nx-text-sm, 0.875rem); } .nx-capture { inline-size: min(40rem, calc(100vw - 2rem)); } .nx-capture__form { display: grid; gap: var(--nx-space-3); padding: var(--nx-space-4); } .nx-capture__said:empty { display: none; } /* A meeting's "Record this meeting" (MW2). */ .wk-record { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2, 0.5rem); padding: var(--space-3, 0.75rem); margin: 0; } /* Links and related (MW3, ADR-058). */ .nx-links { display: grid; gap: var(--nx-space-2); padding: var(--nx-space-4); margin: 0; } .nx-links__h { font-size: var(--nx-text-lg, 1.125rem); margin: 0; } .nx-links__sub { font-size: var(--nx-text-sm, 0.875rem); font-weight: 600; margin: var(--nx-space-3) 0 0; } .nx-links__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-space-1); } .nx-links__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--nx-space-1) var(--nx-space-2); padding: var(--nx-space-1) var(--nx-space-2); border-radius: var(--nx-radius); min-inline-size: 0; } .nx-links__row--suggested { background: var(--nx-color-surface-2, transparent); border: var(--nx-border-width) dashed var(--nx-color-border); } .nx-links__row--suggested:focus-visible { outline: 2px solid var(--nx-color-focus, currentColor); outline-offset: 2px; } .nx-links__row[aria-busy="true"] { opacity: 0.5; } .nx-links__main { flex: 1 1 14rem; min-inline-size: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--nx-space-1) var(--nx-space-2); } .nx-links__kind { font-size: var(--nx-text-xs, 0.75rem); text-transform: uppercase; letter-spacing: 0.04em; color: var(--nx-color-text-muted); } .nx-links__title { overflow-wrap: anywhere; } .nx-links__quote, .nx-links__why { flex-basis: 100%; font-size: var(--nx-text-sm, 0.875rem); color: var(--nx-color-text-muted); overflow-wrap: anywhere; } .nx-links__act { display: inline; margin: 0; } .nx-links__add { display: flex; gap: var(--nx-space-2); margin-top: var(--nx-space-2); } .nx-links__add .nx-input { flex: 1; min-inline-size: 0; } .nx-links__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nx-space-2); margin: var(--nx-space-2) 0 0; } .nx-links__from { display: inline-flex; gap: var(--nx-space-1); align-items: baseline; } .nx-links__list--page .nx-links__row { padding: var(--nx-space-2) var(--nx-space-3); } .nx-links__acts { display: inline-flex; gap: var(--nx-space-1); margin-inline-start: auto; } /* css/work-plan.css */ /* The Plan and Waits for panels (ADR-059). The board and the timeline are the shared view kinds now (ADR-076, views.css). */ /* ── Panels ── */ .nx-plan-panel { display: grid; gap: var(--nx-space-2); padding: var(--nx-space-4); margin: 0; } .nx-plan-panel__h { font-size: var(--nx-text-lg, 1.125rem); margin: 0; } .nx-plan-panel__sub { font-size: var(--nx-text-sm, 0.875rem); font-weight: 600; margin: var(--nx-space-2) 0 0; } .nx-plan-panel__links { display: flex; gap: var(--nx-space-4); margin: 0; } .nx-plan-panel__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-space-2); } .nx-plan-panel__ms { display: grid; gap: var(--nx-space-1); } .nx-plan-panel__ms span { display: flex; flex-wrap: wrap; gap: var(--nx-space-2); align-items: baseline; } .nx-plan-panel__ms progress { inline-size: 100%; accent-color: var(--nx-color-accent); } .nx-plan-panel__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--nx-space-1) var(--nx-space-2); min-inline-size: 0; } .nx-plan-panel__row a { overflow-wrap: anywhere; } .nx-plan-panel__row.is-done a { text-decoration: line-through; } .nx-plan-panel__act { display: inline; margin: 0 0 0 auto; } .nx-plan-add { display: flex; gap: var(--nx-space-2); } .nx-plan-add .nx-input { flex: 1; min-inline-size: 0; } /* css/work-time.css */ /* Time (ADR-059 §4): the timer, the log box, the week's grid, entries and the Time panel on tasks and projects. Today's components; DS1 restyles. */ .nx-time { display: grid; gap: var(--nx-space-4); min-width: 0; } .nx-time > * { min-width: 0; } .nx-time-log { margin-block-end: 0; } .nx-time-said { grid-column: 1 / -1; margin: 0; font-size: var(--nx-text-sm); } .nx-time-said:empty { display: none; } .nx-time-timer { padding: var(--nx-space-4); } .nx-time-timer .nx-work-h { margin-block-end: var(--nx-space-2); } .nx-time-timer p { margin: 0; } .nx-time-timer__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-2) var(--nx-space-3); margin: 0 0 var(--nx-space-3); } .nx-time-timer__main { display: flex; flex-wrap: wrap; gap: var(--nx-space-2); flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; } .nx-time-running { inline-size: 0.625rem; block-size: 0.625rem; border-radius: 50%; background: var(--nx-color-danger, #c62828); flex: none; } @media (prefers-reduced-motion: no-preference) { .nx-time-running { animation: nx-time-pulse var(--nx-duration-linger) var(--nx-ease-in-out) infinite; } } @keyframes nx-time-pulse { 50% { opacity: 0.35; } } .nx-time-elapsed { font-variant-numeric: tabular-nums; font-weight: var(--nx-weight-bold); } .nx-time-nav { flex-wrap: wrap; align-items: center; } .nx-time-nav__gap { flex: 1 1 auto; } .nx-time-nav kbd { font-size: 0.8em; } .nx-time-grid td, .nx-time-grid th { white-space: nowrap; font-variant-numeric: tabular-nums; } .nx-time-grid .nx-time-grid__name { white-space: normal; min-width: 12rem; color: var(--nx-color-text); } .nx-time-grid th.is-today { color: var(--nx-color-text); text-decoration: underline; text-underline-offset: 0.25em; } .nx-time-grid tfoot th, .nx-time-grid tfoot td { border-top: 1px solid var(--nx-color-border); font-weight: var(--nx-weight-medium); } .nx-time-grid caption .nx-muted { display: block; font-weight: normal; } .nx-time-grid__sep { margin-inline: 0.35em; } .nx-time-entries { margin-block-start: var(--nx-space-4); } .nx-time-entry { display: grid; grid-template-columns: 7rem minmax(0, 1fr) auto; gap: var(--nx-space-3); align-items: baseline; padding: var(--nx-space-2) 0; border-bottom: 1px solid var(--nx-color-border); } .nx-time-entry:focus-within { outline: 2px solid var(--nx-color-focus, currentColor); outline-offset: 2px; } .nx-time-entry__main { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; } .nx-time-entry__time { font-variant-numeric: tabular-nums; white-space: nowrap; } .nx-time-entry.is-running .nx-time-entry__time { font-weight: var(--nx-weight-bold); } @media (max-width: 40rem) { .nx-time-entry { grid-template-columns: minmax(0, 1fr) auto; } .nx-time-entry__day { grid-column: 1 / -1; font-size: var(--nx-text-sm); } } .nx-time-panel__total { margin: 0 0 var(--nx-space-2); } /* css/work-review.css */ /* Proposed tasks and the weekly review (ADR-059 §6, 8). Today's components; DS1 restyles them. */ .wr-keys { margin: 0 0 var(--nx-space-3); } .wr-inline { display: inline-flex; flex-wrap: wrap; gap: var(--nx-space-1); margin: 0; } /* A proposal: what and why on the left, the answers on the right. */ .wr-prop { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--nx-space-2) var(--nx-space-4); padding: var(--nx-space-2) var(--nx-space-3); border-block-end: var(--nx-border-width) solid var(--nx-color-border); border-radius: var(--nx-radius); } .wr-prop:focus-visible { outline: 2px solid var(--nx-color-focus, currentColor); outline-offset: 2px; } .wr-prop:focus-within { background: var(--nx-color-surface-2); } .wr-prop[aria-busy="true"] { opacity: 0.5; } .wr-prop__main { flex: 1 1 16rem; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--nx-space-1); } .wr-prop__title { overflow-wrap: anywhere; font-weight: 600; } .wr-prop__reason { color: var(--nx-color-text-muted); font-size: var(--nx-text-sm, 0.875rem); overflow-wrap: anywhere; } .wr-prop__acts { display: flex; flex-wrap: wrap; gap: var(--nx-space-2); align-items: center; } .wr-panel { display: grid; gap: var(--nx-space-2); padding: var(--nx-space-4); margin: 0; } .wr-panel__h { font-size: var(--nx-text-lg, 1.125rem); margin: 0; } /* The review. */ .wr-weeks { display: flex; flex-wrap: wrap; gap: var(--nx-space-4); margin-block-end: var(--nx-space-4); } .wr-reviewed { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-2); margin: 0 0 var(--nx-space-4); } .wr-steps { list-style: none; margin: 0 0 var(--nx-space-3); padding: 0; display: flex; flex-wrap: wrap; gap: var(--nx-space-2); } .wr-steps a { display: inline-flex; align-items: baseline; gap: var(--nx-space-1); padding: var(--nx-space-1) var(--nx-space-3); border: var(--nx-border-width) solid var(--nx-color-border); border-radius: var(--nx-radius-pill, 999px); text-decoration: none; color: var(--nx-color-text); } .wr-steps a[aria-current="step"] { border-color: var(--nx-color-text); font-weight: 700; background: var(--nx-color-surface-2); } .wr-steps__n { font-variant-numeric: tabular-nums; color: var(--nx-color-text-muted); } .wr-step { margin-block-start: var(--nx-space-4); } .wr-step h2:focus { outline: none; } .wr-step h2:focus-visible { outline: 2px solid var(--nx-color-focus, currentColor); outline-offset: 2px; } .wr-step .nx-work-group__h { margin-block-start: var(--nx-space-5, 1.25rem); } .nx-work-task.is-priority { box-shadow: inset 3px 0 0 var(--nx-color-info); padding-inline-start: var(--nx-space-2); } .wr-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--nx-space-2); padding-block: var(--nx-space-2); border-block-end: var(--nx-border-width) solid var(--nx-color-border); } .wr-line a { overflow-wrap: anywhere; } .wr-finish { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--nx-space-8); align-items: start; } @media (max-width: 52rem) { .wr-finish { grid-template-columns: 1fr; } } .wr-finish__form { display: grid; gap: var(--nx-space-2); margin-block-start: var(--nx-space-4); } .wr-finish__form .nx-btn { justify-self: start; } .wr-notes { inline-size: 100%; min-block-size: 8rem; resize: vertical; } .wr-chosen { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: var(--nx-space-1); } .wr-chosen li { overflow-wrap: anywhere; } .wr-done { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: var(--nx-space-1); } .wr-routine { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-2); margin-block-start: var(--nx-space-6); } /* Tasks from email or document (ADR-077 §3): a drop zone around the file and the pasted text, the details beside each other where they fit. */ .wr-source { display: grid; gap: var(--nx-space-3); padding: var(--nx-space-4); margin-block-start: var(--nx-space-6); } .wr-source[aria-busy="true"] { opacity: 0.7; } .wr-source.is-dropping { outline: 3px dashed var(--nx-color-focus, currentColor); outline-offset: 2px; background: var(--nx-color-accent-soft); } .wr-source__form { display: grid; gap: var(--nx-space-3); min-inline-size: 0; } .wr-source__drop { display: grid; gap: var(--nx-space-3); } .wr-source__drop .nx-field + .nx-field, .wr-source__fields .nx-field + .nx-field { margin-top: 0; } .wr-source__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--nx-space-3); } .wr-source__form > .nx-btn { justify-self: start; } .wr-source__notice { margin: 0; overflow-wrap: anywhere; } .wr-source input[type="file"] { min-inline-size: 0; max-inline-size: 100%; } /* css/work-reports.css */ /* Status reports (ADR-059 §7): the list, a report's page and the panel on projects and engagements. Today's components; DS1 restyles them. */ .nx-reports__h { font-size: var(--nx-text-lg, 1.125rem); margin: 0 0 var(--nx-space-2); } .nx-reports-new { display: grid; gap: var(--nx-space-2); padding: var(--nx-space-4); margin-block-end: var(--nx-space-6); } .nx-reports-new__fields { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--nx-space-2) var(--nx-space-3); align-items: end; } .nx-reports-new__fields .nx-field { display: grid; gap: var(--nx-space-1); min-inline-size: 0; margin: 0; } .nx-reports-new__fields .nx-input { inline-size: 100%; min-inline-size: 0; } .nx-reports-new .nx-help { margin: 0; } @media (max-width: 52rem) { .nx-reports-new__fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .nx-reports-new__fields .nx-field:first-child, .nx-reports-new__fields .nx-btn { grid-column: 1 / -1; } } .nx-reports__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-space-1); } .nx-reports__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--nx-space-1) var(--nx-space-3); padding: var(--nx-space-2); border-block-end: var(--nx-border-width) solid var(--nx-color-border); min-inline-size: 0; } .nx-reports__title { font-weight: 600; overflow-wrap: anywhere; } .nx-reports__title:focus-visible { outline: 2px solid var(--nx-color-focus, currentColor); outline-offset: 2px; } .nx-reports__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--nx-space-1) var(--nx-space-2); font-size: var(--nx-text-sm, 0.875rem); } .nx-reports-panel { display: grid; gap: var(--nx-space-2); padding: var(--nx-space-4); margin: 0; } .nx-reports-panel form { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--nx-space-2); } .nx-reports-panel .nx-help { margin: 0; } .nx-report { display: grid; gap: var(--nx-space-4); } .nx-report__head { display: grid; gap: var(--nx-space-2); } .nx-report__state { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--nx-space-2); margin: 0; } .nx-report__acts { display: flex; flex-wrap: wrap; gap: var(--nx-space-2); align-items: center; } .nx-report__act { margin: 0; } .nx-report__key { margin-inline-start: var(--nx-space-1); font-size: 0.75em; } .nx-report__head .nx-help { margin: 0; } .nx-report__form .nx-field { display: grid; gap: var(--nx-space-1); margin: 0; } .nx-report__body { inline-size: 100%; min-block-size: 24rem; font-family: var(--nx-font-mono, ui-monospace, monospace); font-size: var(--nx-text-sm, 0.875rem); line-height: 1.5; resize: vertical; } .nx-report__writing { display: flex; align-items: center; gap: var(--nx-space-2); margin: 0 0 var(--nx-space-2); font-weight: 600; } .nx-report__dot { inline-size: 0.625rem; block-size: 0.625rem; border-radius: 50%; background: currentColor; animation: nx-report-pulse var(--nx-duration-linger) var(--nx-ease-in-out) infinite; } @keyframes nx-report-pulse { 50% { opacity: 0.25; } } @media (prefers-reduced-motion: reduce) { .nx-report__dot { animation: none; } } .nx-report__facts { margin: 0; padding: var(--nx-space-3); border: var(--nx-border-width) dashed var(--nx-color-border); border-radius: var(--nx-radius); white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--nx-text-sm, 0.875rem); color: var(--nx-color-text-muted); } /* Undo in a toast: the toast's own colour, underlined. */ /* css/design.css */ /* Look and feel (DS10, ADR-066): the page that edits a shop's look, its preview (drawn by the draft's scoped stylesheet, never inline styles), and the bar a browser previewing a draft in place shows. */ @layer app { /* ── The bar while previewing a draft in place ── */ .nx-look-bar { position: sticky; top: 0; z-index: var(--nx-z-toast); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--nx-space-2) var(--nx-space-4); padding: var(--nx-space-2) var(--nx-space-4); background: var(--nx-color-agent); color: var(--nx-color-agent-contrast); font-size: var(--nx-text-sm); } .nx-look-bar__msg { margin: 0; } .nx-look-bar .nx-btn { background: var(--nx-color-agent-contrast); color: var(--nx-color-agent); border-color: transparent; } /* ── The page ── */ .nx-design__targets { display: inline-flex; border: 1px solid var(--nx-color-border-strong); border-radius: var(--nx-radius-sm); overflow: hidden; } .nx-design__targets a { display: inline-flex; align-items: center; min-height: var(--nx-control-h); padding: 0 var(--nx-space-4); color: var(--nx-color-text-muted); text-decoration: none; } .nx-design__targets a + a { border-left: 1px solid var(--nx-color-border-strong); } .nx-design__targets a[aria-current="page"] { background: var(--nx-color-accent-soft); color: var(--nx-color-accent); font-weight: var(--nx-weight-medium); } .nx-design__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nx-space-3); } .nx-design__status { margin: 0; color: var(--nx-color-text-muted); } .nx-design__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-2); } .nx-design__preset { flex-direction: column; align-items: flex-start !important; gap: 2px; padding-block: var(--nx-space-2) !important; } .nx-design__preset-name { font-weight: var(--nx-weight-medium); } .nx-design__preset-note { font-size: var(--nx-text-xs); color: var(--nx-color-text-muted); } .nx-design__grid { display: grid; gap: var(--nx-space-6); grid-template-columns: minmax(0, 1fr); align-items: start; } @media (min-width: 70rem) { .nx-design__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } .nx-design__preview { position: sticky; top: calc(var(--nx-header-height) + var(--nx-space-4)); } } .nx-design__group .nx-form-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); } .nx-design__colour { display: flex; gap: var(--nx-space-2); align-items: center; } .nx-design__swatch { flex: none; inline-size: var(--nx-control-h); block-size: var(--nx-control-h); padding: 2px; border: 1px solid var(--nx-color-border-strong); border-radius: var(--nx-radius-sm); background: var(--nx-color-surface); cursor: pointer; } .nx-design__hex { min-inline-size: 0; flex: 1; font-family: var(--nx-font-mono); } .nx-design__preview-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nx-space-2); margin-bottom: var(--nx-space-3); } .nx-design__panes { display: grid; gap: var(--nx-space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); } .nx-design__pane { margin: 0; min-inline-size: 0; } .nx-design__pane-title { margin-bottom: var(--nx-space-2); font-size: var(--nx-type-label-size); font-weight: var(--nx-type-label-weight); } /* ── The preview: the draft's scoped stylesheet sets the tokens on .nx-look-preview[data-scheme]; everything inside only reads them. ── */ .nx-look-preview { overflow: hidden; border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius); background: var(--nx-texture), var(--nx-color-bg); color: var(--nx-color-text); font-family: var(--nx-font-sans); font-size: var(--nx-text-sm); line-height: var(--nx-leading); } .nx-look-preview__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--nx-space-3); padding: var(--nx-space-3) var(--nx-space-4); border-bottom: 1px solid var(--nx-color-border); background: var(--nx-color-surface); } .nx-look-preview__brand { font-family: var(--nx-font-heading); font-size: var(--nx-text-lg); } .nx-look-preview__nav { display: flex; gap: var(--nx-space-3); } .nx-look-preview a { color: var(--nx-color-accent); } .nx-look-preview__body { padding: var(--nx-space-4); } .nx-look-preview__body > * { margin-block: 0; } .nx-look-preview__h { font-family: var(--nx-font-heading); font-size: var(--nx-text-xl); line-height: var(--nx-leading-tight); } .nx-look-preview .nx-field { margin: 0; } .nx-look-preview__table { border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius-sm); background: var(--nx-color-surface); } .nx-look-preview__table td { padding: var(--nx-space-2) var(--nx-space-3); border-top: 1px solid var(--nx-color-border); } .nx-look-preview__table tr:first-child td { border-top: 0; } .nx-look-preview__toast .nx-toast { animation: none; inline-size: fit-content; } .nx-look-preview__toast .nx-toast__action { font-weight: var(--nx-weight-medium); text-decoration: underline; } .nx-look-card { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--nx-space-3); align-items: center; padding: var(--nx-space-3); border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius); background: var(--nx-color-surface); } .nx-look-card__img { aspect-ratio: 4 / 5; border-radius: var(--nx-radius-sm); background: linear-gradient(160deg, var(--nx-color-surface-2), var(--nx-color-accent-soft)); } .nx-look-card__text > p { margin: 0; } .nx-look-card__title { font-weight: var(--nx-weight-medium); } .nx-look-card__price { font-variant-numeric: tabular-nums; } /* Behaviour (DS11, ADR-067) */ .nx-mech__setting { display: grid; gap: var(--nx-space-2); } .nx-mech__help { margin: 0; } .nx-mech__nav-bar { flex-wrap: wrap; align-items: center; gap: var(--nx-space-3); } .nx-mech__nav-bar > p { margin: 0; flex: 1 1 16rem; } .nx-segmented { display: inline-flex; gap: 0; border: 1px solid var(--nx-color-border-strong); border-radius: var(--nx-radius-sm); overflow: hidden; } .nx-segmented > .nx-btn { border: 0; border-radius: 0; } .nx-segmented > [aria-current="true"] { background: var(--nx-color-accent-soft); color: var(--nx-color-accent); font-weight: var(--nx-weight-medium); } .nx-mech__sections, .nx-mech__pages { list-style: none; margin: 0; padding: 0; } .nx-mech__sections { display: grid; gap: var(--nx-space-3); max-width: 36rem; } .nx-mech__section { border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius); padding: var(--nx-space-2) var(--nx-space-3); background: var(--nx-color-surface); } .nx-mech__pages { padding-left: var(--nx-space-4); } .nx-mech__row { display: flex; align-items: center; justify-content: space-between; gap: var(--nx-space-2); min-height: var(--nx-control-h); } .nx-mech__name { min-width: 0; overflow-wrap: anywhere; } .nx-mech__name--section { font-weight: var(--nx-weight-medium); } .nx-mech__move { display: inline-flex; gap: var(--nx-space-1); flex: none; } .nx-mech__keys-bar { align-items: center; gap: var(--nx-space-3); } .nx-mech__keys-bar > p { margin: 0; } .nx-mech__keycell kbd { white-space: nowrap; } .nx-mech__keyacts { white-space: nowrap; text-align: end; } .nx-mech__capture { color: var(--nx-color-accent); font-weight: var(--nx-weight-medium); } .nx-mech__clash { color: var(--nx-color-text-muted); } .nx-mech__err { display: block; } /* ── The gallery (VS1, ADR-073). The stage takes the chosen look's tokens from its scoped stylesheet (.nx-showcase__stage[data-scheme]); the page around it keeps the shop's look. ── */ .nx-showcase { display: grid; gap: var(--nx-space-4); } .nx-showcase__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-3); } .nx-showcase .nx-seg { flex-wrap: wrap; } .nx-showcase .nx-seg a { display: inline-flex; align-items: center; gap: var(--nx-space-1); min-height: 2rem; padding: 0 var(--nx-space-3); color: var(--nx-color-text-muted); text-decoration: none; } .nx-showcase .nx-seg a + a { border-inline-start: 1px solid var(--nx-color-border); } .nx-showcase .nx-seg a:is([aria-pressed="true"], [aria-current="true"], [aria-current="page"]) { background: var(--nx-color-accent-soft); color: var(--nx-color-accent); font-weight: var(--nx-weight-medium); } .nx-showcase__toc { display: flex; flex-wrap: wrap; gap: var(--nx-space-2) var(--nx-space-4); font-size: var(--nx-text-sm); } .nx-showcase__toc ul { display: flex; flex-wrap: wrap; gap: var(--nx-space-1) var(--nx-space-3); margin: 0; padding: 0; list-style: none; } .nx-showcase__toc-group { color: var(--nx-color-text-muted); font-size: var(--nx-type-section-size); font-weight: var(--nx-type-section-weight); letter-spacing: var(--nx-type-section-tracking); text-transform: uppercase; } .nx-showcase__stage { display: grid; gap: var(--nx-space-6); padding: var(--nx-space-4); border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius-lg); background: var(--nx-texture), var(--nx-color-bg); color: var(--nx-color-text); font-family: var(--nx-font-sans); } .nx-showcase__group { display: grid; gap: var(--nx-space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); align-items: start; } .nx-showcase__group-title { grid-column: 1 / -1; font-size: var(--nx-text-xl); } .nx-showcase__item { display: grid; gap: var(--nx-space-2); min-inline-size: 0; padding: var(--nx-space-4); border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius); background: var(--nx-color-surface); } .nx-showcase__item:is(#g-many-items, #g-list, #g-field-kinds, #g-field-states, #g-form-fields, #g-action-form, #g-icons, #g-long-text, #g-type) { grid-column: 1 / -1; } .nx-showcase__title { font-size: var(--nx-text-md); } .nx-showcase__note { color: var(--nx-color-text-muted); font-size: var(--nx-text-sm); } .nx-showcase__body { min-inline-size: 0; padding-block-start: var(--nx-space-2); } .nx-showcase__h1, .nx-showcase__h2, .nx-showcase__h3 { font-family: var(--nx-font-heading); line-height: var(--nx-leading-tight); font-weight: var(--nx-heading-weight); letter-spacing: var(--nx-heading-tracking); } .nx-showcase__h3 { font-family: var(--nx-font-subheading); font-weight: var(--nx-subheading-weight); letter-spacing: normal; } .nx-showcase__stage { accent-color: var(--nx-color-accent); } .nx-showcase__focus { gap: var(--nx-space-5); padding: var(--nx-space-2); } .nx-showcase__focus :is(.nx-btn, .nx-input, a) { outline: var(--nx-focus-width) solid var(--nx-color-focus); outline-offset: var(--nx-focus-offset); } .nx-showcase__focus .nx-input { width: 12rem; } .nx-showcase__h1 { font-size: var(--nx-text-2xl); } .nx-showcase__h2 { font-size: var(--nx-text-xl); } .nx-showcase__h3 { font-size: var(--nx-text-lg); } .nx-showcase__icons { display: grid; gap: var(--nx-space-3); grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); margin: 0; padding: 0; list-style: none; } .nx-showcase__icons li { display: flex; align-items: center; gap: var(--nx-space-2); font-size: var(--nx-text-sm); } .nx-showcase__frame { padding: var(--nx-space-3); border: 1px dashed var(--nx-color-border); border-radius: var(--nx-radius-sm); background: var(--nx-color-bg); overflow: clip; } .nx-showcase__split { display: grid; gap: var(--nx-space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); } .nx-showcase__cards { display: grid; gap: var(--nx-space-2); } .nx-showcase__card { padding: var(--nx-space-3); border: 1px solid var(--nx-color-border); border-radius: var(--nx-radius-sm); background: var(--nx-color-bg); } /* The key-hint bar, in place rather than fixed to the window. */ .nx-keyhints.nx-showcase__keyhints { position: static; display: grid; justify-items: start; inset: auto; width: auto; max-width: 100%; transform: none; } /* Trying a theme (VS2, ADR-074): a bar at the foot of the page. */ .nx-try-bar { position: fixed; z-index: var(--nx-z-toast); inset-inline: 0; bottom: var(--nx-space-4); margin-inline: auto; width: fit-content; max-width: calc(100% - 2 * var(--nx-space-4)); display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-2) var(--nx-space-3); padding: var(--nx-space-2) var(--nx-space-2) var(--nx-space-2) var(--nx-space-4); border: 1px solid var(--nx-color-border-strong); border-radius: var(--nx-radius); background: var(--nx-color-surface-overlay); color: var(--nx-color-text); box-shadow: var(--nx-shadow-lg); font-size: var(--nx-text-sm); animation: nx-pop var(--nx-duration) var(--nx-ease-follow) both; } } /* css/collab.css */ /* Collaboration on every record (CO1, ADR-063): the Discussion panel and the Inbox. */ .nx-collab { display: grid; gap: var(--nx-space-2); padding: var(--nx-space-4); margin: 0; min-inline-size: 0; } .nx-collab__head { display: flex; align-items: center; justify-content: space-between; gap: var(--nx-space-2); } .nx-collab__h { font-size: var(--nx-text-lg, 1.125rem); margin: 0; } .nx-collab__sub { font-size: var(--nx-text-sm, 0.875rem); font-weight: 600; margin: var(--nx-space-3) 0 0; } .nx-collab__follow, .nx-collab__take, .nx-collab__tick { display: inline; margin: 0; } .nx-collab__who { margin: 0; display: flex; flex-wrap: wrap; gap: var(--nx-space-1) var(--nx-space-2); align-items: baseline; overflow-wrap: anywhere; } .nx-collab__agent { font-size: var(--nx-text-xs, 0.75rem); padding: 0 var(--nx-space-1); border-radius: var(--nx-radius); background: var(--nx-color-info-soft); color: var(--nx-color-text); } .nx-collab__row { display: flex; flex-wrap: wrap; gap: var(--nx-space-2); align-items: flex-end; margin: 0; } .nx-collab__row .nx-field { margin: 0; } .nx-collab__grow { flex: 1 1 10rem; min-inline-size: 0; } .nx-collab__for-in { inline-size: 9rem; } .nx-collab__msgs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-space-2); } .nx-collab__msg { padding: var(--nx-space-2) var(--nx-space-3); border-radius: var(--nx-radius); background: var(--nx-color-surface-2); min-inline-size: 0; } .nx-collab__msg--agent { border-inline-start: 3px solid var(--nx-color-info); } .nx-collab__meta { display: flex; flex-wrap: wrap; gap: var(--nx-space-1) var(--nx-space-2); align-items: baseline; font-size: var(--nx-text-sm, 0.875rem); } .nx-collab__body { margin: var(--nx-space-1) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; } .nx-collab__compose { display: grid; gap: var(--nx-space-1); margin: 0; position: relative; } .nx-collab__text { inline-size: 100%; resize: vertical; min-block-size: 3.5rem; } .nx-collab__compose .nx-collab__row { justify-content: space-between; align-items: center; } .nx-collab__tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-space-1); } .nx-collab__task { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--nx-space-1) var(--nx-space-2); padding: var(--nx-space-1) var(--nx-space-2); border-radius: var(--nx-radius); min-inline-size: 0; } .nx-collab__task:focus-visible, .nx-inbox__row:focus-visible { outline: 2px solid var(--nx-color-focus, currentColor); outline-offset: 2px; } .nx-collab__task--done .nx-collab__title { text-decoration: line-through; color: var(--nx-color-text-muted); } .nx-collab__title { flex: 1 1 8rem; min-inline-size: 0; overflow-wrap: anywhere; } .nx-collab__for { font-size: var(--nx-text-sm, 0.875rem); } /* A task that makes a record (ADR-077): its draft and Make it, or what it made. */ .nx-collab__make { display: flex; flex-wrap: wrap; gap: var(--nx-space-1) var(--nx-space-2); align-items: center; flex-basis: 100%; font-size: var(--nx-text-sm, 0.875rem); } .nx-collab__made { font-size: var(--nx-text-sm, 0.875rem); } .nx-collab__add { margin-top: var(--nx-space-1); } /* The @ menu under the comment box. */ .nx-collab__menu { position: absolute; inset-inline-start: 0; top: 100%; z-index: 20; list-style: none; margin: 0; padding: var(--nx-space-1); min-inline-size: 12rem; max-block-size: 14rem; overflow: auto; background: var(--nx-color-surface); border: var(--nx-border-width, 1px) solid var(--nx-color-border-strong); border-radius: var(--nx-radius); box-shadow: 0 4px 16px rgb(0 0 0 / 0.15); } .nx-collab__menu li { padding: var(--nx-space-1) var(--nx-space-2); border-radius: var(--nx-radius); cursor: pointer; display: flex; justify-content: space-between; gap: var(--nx-space-2); } .nx-collab__menu li[aria-selected="true"] { background: var(--nx-color-accent-soft); } .nx-inbox__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-space-1); } .nx-inbox__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-1) var(--nx-space-3); padding: var(--nx-space-2) var(--nx-space-3); border-radius: var(--nx-radius); border: var(--nx-border-width, 1px) solid var(--nx-color-border); } .nx-inbox__row--unread { background: var(--nx-color-accent-soft); border-color: var(--nx-color-border-strong); } .nx-inbox__row--unread .nx-inbox__text { font-weight: 600; } .nx-inbox__row form { margin: 0; } .nx-inbox__open { flex: 1 1 16rem; min-inline-size: 0; } .nx-inbox__text { all: unset; cursor: pointer; overflow-wrap: anywhere; color: var(--nx-color-text); } .nx-inbox__text:hover { text-decoration: underline; } .nx-inbox__text:focus-visible { outline: 2px solid var(--nx-color-focus, currentColor); outline-offset: 2px; } /* Sharing one record (CO2, ADR-077 §2): the panel's Share control and list, and a shared record read-only. */ .nx-collab__shares { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-space-1); } .nx-collab__shared { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--nx-space-1) var(--nx-space-2); min-inline-size: 0; overflow-wrap: anywhere; } .nx-shared__body { display: grid; gap: var(--nx-space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: start; margin-top: var(--nx-space-4); } .nx-shared__card { display: grid; gap: var(--nx-space-2); padding: var(--nx-space-4); margin: 0; min-inline-size: 0; } .nx-shared__fields { display: grid; gap: var(--nx-space-2); margin: 0; } .nx-shared__field { display: grid; grid-template-columns: minmax(7rem, 1fr) 2fr; gap: var(--nx-space-2); align-items: baseline; } .nx-shared__field dt { color: var(--nx-color-text-muted); font-size: var(--nx-text-sm, 0.875rem); } .nx-shared__field dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; } /* css/agents.css */ /* Agents, skills and runs (AGT0, ADR-089): the tabs between the three lists, Run it, the toolset, a skill's SKILL.md and a run's steps. */ .nx-agents-tabs { display: flex; flex-wrap: wrap; gap: var(--nx-space-1); } .nx-agents-run, .nx-agents-tools, .nx-agents-skill, .nx-agents-steps { display: grid; gap: var(--nx-space-2); min-inline-size: 0; } .nx-agents-runs, .nx-agents-tools__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-space-1); } .nx-agents-runs__row { display: flex; flex-wrap: wrap; gap: var(--nx-space-1) var(--nx-space-2); align-items: baseline; min-inline-size: 0; overflow-wrap: anywhere; } .nx-agents-runs__row .nx-help { flex-basis: 100%; margin: 0; } .nx-agents-tools__list li { display: flex; flex-wrap: wrap; gap: var(--nx-space-1) var(--nx-space-2); align-items: baseline; } .nx-agents-skill__md, .nx-agents-steps__out { max-block-size: 24rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--nx-text-sm, 0.875rem); } .nx-agents-steps__list { margin: 0; padding-inline-start: var(--nx-space-4); display: grid; gap: var(--nx-space-3); } .nx-agents-steps__step p { margin: 0 0 var(--nx-space-1); overflow-wrap: anywhere; } .nx-agents-steps__in { overflow-wrap: anywhere; }