/* * Account screens, 1.24.1: the account health panel and the theme guards. The header is the account's own composition * (Member::header and the account styles), as it was before 1.24.1 (owner 2026-11-04). */ /* Corners (ACCOUNT_EXPERIENCE_BAR section 9, owner 2026-11-04: "no rounded buttons or chips anywhere"): 5px for buttons, inputs, cards and panels; 2px for chips, badges and cells; never a pill. The two tokens are set once here. */ #nxc-member:not(#nx-shield):not(#nx-shield) { --nx-radius: 5px; --nx-radius-sm: 2px; --nx-radius-chip: 2px; } /* The theme's floating extras do not sit over the account screens: Ohio's vertical "Scroll to top" bar and its cursor dot (owner 2026-11-04: they overlapped the rail and read as a stuck loader). */ body:has(#nxc-member[data-nxc="account"]) :is(ul.elements-bar > li:has(> .scroll-top), .circle-cursor):not(#nx-shield):not(#nx-shield) { display: none !important; } /* Around the avatar and in the header (1.24.1, HeaderItems): each item only with data. */ #nxc-member .nxc-head .nxc-avatar:not(#nx-shield):not(#nx-shield) { position: relative; } /* The ring says something or is not there: a public seat (neutral, strong ink) or a trust tier from 3 (green); the site colour stays for the primary action (owner 2026-11-04: "not all in yellow"). */ #nxc-member .nxc-head .nxc-avatar[data-ring="role"]:not(#nx-shield):not(#nx-shield) { box-shadow: 0 0 0 2px var(--nx-bg-surface), 0 0 0 4px var(--nx-text-primary); } #nxc-member .nxc-head .nxc-avatar[data-ring="tier"]:not(#nx-shield):not(#nx-shield) { box-shadow: 0 0 0 2px var(--nx-bg-surface), 0 0 0 4px var(--nx-positive); } #nxc-member .nxc-monogram:not(#nx-shield):not(#nx-shield) { display: grid; place-items: center; inline-size: 100%; block-size: 100%; border-radius: inherit; background: var(--nx-accent); color: var(--nx-accent-ink, #000); font: 600 2.5rem/1 var(--nx-font-sans); letter-spacing: 0.02em; } @media (max-width: 40em) { #nxc-member .nxc-monogram:not(#nx-shield):not(#nx-shield) { font-size: 1.75rem; } } #nxc-member .nxc-avatar[data-shape="square"]:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-avatar[data-shape="square"] img:not(#nx-shield):not(#nx-shield) { border-radius: var(--nx-radius-sm, 2px); } #nxc-member .nxc-online:not(#nx-shield):not(#nx-shield) { position: absolute; inset-block-end: 6px; inset-inline-end: 6px; inline-size: 14px; block-size: 14px; border-radius: 50%; background: var(--nx-positive); box-shadow: 0 0 0 3px var(--nx-bg-surface); } #nxc-member .nxc-avatar__edit:not(#nx-shield):not(#nx-shield) { position: absolute; inset: 4px; display: grid; place-content: center; justify-items: center; gap: 0.25rem; border-radius: inherit; background: rgba(0, 0, 0, 0.62); color: #fff !important; font-size: 0.75rem; font-weight: 600; text-decoration: none !important; opacity: 0; transition: opacity var(--nx-motion-fast, 120ms) ease; } #nxc-member .nxc-avatar:hover .nxc-avatar__edit:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-avatar__edit:focus-visible:not(#nx-shield):not(#nx-shield) { opacity: 1; } @media (hover: none) { #nxc-member .nxc-avatar__edit:not(#nx-shield):not(#nx-shield) { inset: auto 4px 4px auto; inline-size: 2rem; block-size: 2rem; border-radius: 50%; opacity: 1; } #nxc-member .nxc-avatar__edit span:not(#nx-shield):not(#nx-shield) { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); } } #nxc-member .nxc-head:not(#nx-shield):not(#nx-shield) { position: relative; } #nxc-member .nxc-cover__tools:not(#nx-shield):not(#nx-shield) { position: absolute; z-index: 2; inset-block-start: 0.75rem; inset-inline-end: 0.75rem; display: flex; gap: 0.375rem; opacity: 0; transition: opacity var(--nx-motion-fast, 120ms) ease; } #nxc-member .nxc-head:hover .nxc-cover__tools:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-cover__tools:focus-within:not(#nx-shield):not(#nx-shield) { opacity: 1; } @media (hover: none) { #nxc-member .nxc-cover__tools:not(#nx-shield):not(#nx-shield) { opacity: 1; } } /* The estate pattern itself is the theme's (the cover's before layer, from data-pattern: themes lane); these are the cover's base tints under it; the after layer is the scrim (member-app.css). */ #nxc-member .nxc-cover[data-preset="hex"]:not(#nx-shield):not(#nx-shield) { background-color: color-mix(in srgb, var(--nx-accent) 14%, var(--nx-bg-muted)); } #nxc-member .nxc-cover[data-preset="field"]:not(#nx-shield):not(#nx-shield) { background-color: color-mix(in srgb, var(--nx-accent) 8%, var(--nx-bg-muted)); } #nxc-member .nxc-cover[data-preset="contour"]:not(#nx-shield):not(#nx-shield) { background-color: color-mix(in srgb, var(--nx-accent) 22%, var(--nx-bg-muted)); } #nxc-member .nxc-cover[data-preset="image"]:not(#nx-shield):not(#nx-shield) { background-size: cover; } #nxc-member .nxc-namerow:not(#nx-shield):not(#nx-shield) { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; } #nxc-member .nxc-pronouns:not(#nx-shield):not(#nx-shield) { font-size: 0.875rem; color: var(--nx-text-muted); } /* Icon chips with tooltips (HeaderItems::chip): colour is semantic and always paired with an icon; the text stays the kit's secondary ink (AA in both modes); the site colour is kept for the primary action and the current place. */ #nxc-member .nxc-hcs:not(#nx-shield):not(#nx-shield) { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-block-start: 0.75rem; } #nxc-member .nxc-hc:not(#nx-shield):not(#nx-shield) { margin: 0; } @media (max-width: 40em) { /* A phone keeps the chips to one row that scrolls sideways, with a fade at the end (three rows beside the photo). */ #nxc-member .nxc-hcs:not(#nx-shield):not(#nx-shield) { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-block: 2px; -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); } #nxc-member .nxc-hcs:not(#nx-shield):not(#nx-shield)::-webkit-scrollbar { display: none; } #nxc-member .nxc-hc:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-hc__more:not(#nx-shield):not(#nx-shield) { flex: none; } [dir="rtl"] #nxc-member .nxc-hcs:not(#nx-shield):not(#nx-shield) { -webkit-mask-image: linear-gradient(to left, #000 85%, transparent); mask-image: linear-gradient(to left, #000 85%, transparent); } } #nxc-member .nxc-hc .nxc-hc__btn:not(#nx-shield):not(#nx-shield) { display: inline-flex; align-items: center; gap: 0.375rem; inline-size: auto; block-size: auto; min-block-size: 1.75rem; padding: 0 0.5rem; border: 0; border-radius: var(--nx-radius-sm, 2px); background: color-mix(in srgb, var(--nx-text-primary) 9%, var(--nx-bg-surface)); color: var(--nx-text-secondary); font: 500 0.875rem/1 var(--nx-font-sans); text-decoration: none !important; cursor: pointer; transition: background-color var(--nx-motion-fast, 150ms) ease, border-color var(--nx-motion-fast, 150ms) ease; } #nxc-member .nxc-hc .nxc-hc__btn:hover:not(#nx-shield):not(#nx-shield) { background: var(--nx-bg-hover); color: var(--nx-text-primary); } #nxc-member .nxc-hc .nxc-hc__btn .nxc-icon:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-muted); } #nxc-member .nxc-hc__l:not(#nx-shield):not(#nx-shield) { max-inline-size: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #nxc-member .nxc-hc[data-icon-only] .nxc-hc__btn:not(#nx-shield):not(#nx-shield) { justify-content: center; min-inline-size: 1.75rem; padding: 0 0.375rem; } #nxc-member .nxc-hc__id:not(#nx-shield):not(#nx-shield) { font: 700 0.75rem/1 var(--nx-font-mono); color: var(--nx-positive); } #nxc-member .nxc-hc[data-tone="verified"] .nxc-hc__btn:not(#nx-shield):not(#nx-shield) { min-inline-size: 1.75rem; padding: 0; border-color: transparent; background: transparent; } #nxc-member .nxc-hc[data-tone="verified"] .nxc-icon:not(#nx-shield):not(#nx-shield) { color: var(--nx-positive); } #nxc-member .nxc-hc[data-tone="passport"] .nxc-icon:not(#nx-shield):not(#nx-shield) { color: var(--nx-info); } #nxc-member .nxc-hc__meter:not(#nx-shield):not(#nx-shield) { display: inline-flex; gap: 2px; } #nxc-member .nxc-hc__meter i:not(#nx-shield):not(#nx-shield) { inline-size: 0.3125rem; block-size: 0.75rem; border-radius: var(--nx-radius-sm, 2px); background: var(--nx-border-hairline-strong); } #nxc-member .nxc-hc__meter i.on:not(#nx-shield):not(#nx-shield) { background: var(--nx-info); } #nxc-member .nxc-hc[data-tone="credential"] .nxc-hc__btn:not(#nx-shield):not(#nx-shield) { background: color-mix(in srgb, var(--nx-text-primary) 9%, var(--nx-bg-surface)); } /* bar section 11: neutral chip, the colour only in its icon */ #nxc-member .nxc-hc[data-tone="credential"] .nxc-icon:not(#nx-shield):not(#nx-shield) { color: var(--nx-quantum); } #nxc-member .nxc-hc[data-tone="standing-positive"] .nxc-icon:not(#nx-shield):not(#nx-shield) { color: var(--nx-positive); } #nxc-member .nxc-hc[data-tone="standing-caution"] .nxc-icon:not(#nx-shield):not(#nx-shield) { color: var(--nx-caution); } #nxc-member .nxc-hc__more:not(#nx-shield):not(#nx-shield) { display: inline-flex; align-items: center; min-block-size: 1.75rem; padding: 0 0.5rem; border: 0; border-radius: var(--nx-radius-sm, 2px); background: color-mix(in srgb, var(--nx-text-primary) 9%, var(--nx-bg-surface)); font: 500 0.75rem/1 var(--nx-font-mono); color: var(--nx-text-secondary) !important; text-decoration: none !important; } /* The bubbles of the header chips and the strip's cells float above the page (both sit in boxes that clip or scroll): account-head.js places each within the viewport edges; until placed, it stays hidden. */ #nxc-member .nxc-hc .nxc-tip__bubble:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-cell__tip:not(#nx-shield):not(#nx-shield) { position: fixed; inset: auto; transform: none; z-index: var(--nx-z-overlay, 50); inline-size: max-content; max-inline-size: min(20rem, calc(100vw - 1rem)); } #nxc-member .nxc-hc:not([data-placed]) .nxc-tip__bubble:not(#nx-shield):not(#nx-shield) { opacity: 0 !important; visibility: hidden !important; } #nxc-member .nxc-hc[data-placed] .nxc-tip__bubble:not(#nx-shield):not(#nx-shield) { pointer-events: auto; } #nxc-member .nxc-hc .nxc-tip__bubble:not(#nx-shield):not(#nx-shield)::before { content: ""; position: absolute; inset: -0.75rem 0; z-index: -1; } #nxc-member .nxc-hc__row:not(#nx-shield):not(#nx-shield) { display: block; } #nxc-member .nxc-hc__row + .nxc-hc__row:not(#nx-shield):not(#nx-shield) { margin-block-start: 0.25rem; } #nxc-member .nxc-hc__row > span:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-secondary); } #nxc-member .nxc-hc__eb:not(#nx-shield):not(#nx-shield) { display: block; margin-block-end: 0.25rem; font: 500 0.75rem/1.2 var(--nx-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--nx-text-muted); } #nxc-member .nxc-hc__url:not(#nx-shield):not(#nx-shield) { font-family: var(--nx-font-mono); font-size: 0.75rem; overflow-wrap: anywhere; } #nxc-member .nxc-hc__tip a:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-primary); text-decoration: underline; text-underline-offset: 0.2em; } #nxc-member .nxc-cell:not(#nx-shield):not(#nx-shield) { position: relative; } /* The Standing meter: four segments, the filled ones in the site colour (a solid fill, so a theme that hides inline SVG definitions cannot blank it). The page's gradient definitions stay rendered at zero size, never display: none. */ #nxc-member .nxc-seg2__on:not(#nx-shield):not(#nx-shield) { fill: var(--nx-accent); } #nxc-member .nxc-defs:not(#nx-shield):not(#nx-shield) { display: block !important; position: absolute; inline-size: 0; block-size: 0; overflow: hidden; } /* Photo and identity read as one unit: both start at the top of the band (product review 2026-11-04). */ #nxc-member .nxc-head > .nxc-head__body > .nxc-avatar:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-head > .nxc-head__body > .nxc-identity:not(#nx-shield):not(#nx-shield) { align-self: start; } @media (max-width: 47.99em) { #nxc-member .nxc-strip__cells:not(#nx-shield):not(#nx-shield) { grid-auto-columns: 9rem; } } /* room for the icon and the full label */ #nxc-member .nxc-cell__label:not(#nx-shield):not(#nx-shield) { display: flex; align-items: center; gap: 0.375rem; } #nxc-member .nxc-cell__label .nxc-icon:not(#nx-shield):not(#nx-shield) { inline-size: 0.875rem; block-size: 0.875rem; color: var(--nx-text-muted); } #nxc-member .nxc-cell .nxc-cell__tip:not(#nx-shield):not(#nx-shield) { display: block; opacity: 0; visibility: hidden; } #nxc-member .nxc-cell[data-placed]:is(:hover, :focus-within) .nxc-cell__tip:not(#nx-shield):not(#nx-shield) { opacity: 1; visibility: visible; } #nxc-member .nxc-cell.is-hushed .nxc-cell__tip:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-hc.is-hushed .nxc-tip__bubble:not(#nx-shield):not(#nx-shield) { opacity: 0 !important; visibility: hidden !important; } #nxc-member .nxc-more__list:not(#nx-shield):not(#nx-shield) { display: grid; gap: 2px; } #nxc-member .nxc-more__list .nf-ui-btn:not(#nx-shield):not(#nx-shield) { inline-size: 100%; justify-content: flex-start; } /* The account menu (1.24.1, owner 2026-11-04: "left bar drawer is clipped with visible scroll bars"): part of the page column at its full height, scrolling with the page; no inner scroll box, no box, no shadow or glow. Groups fold to their heading and count (community-ui.js keeps the current one open); a long label wraps rather than being cut; the current item has the site colour as its bar and a bold label. */ #nxc-member .nxc-nav:not(#nx-shield):not(#nx-shield) { position: static; max-block-size: none; overflow: visible; box-shadow: none !important; background: transparent; } #nxc-member .nxc-nav__label:not(#nx-shield):not(#nx-shield) { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; } #nxc-member .nxc-nav__item:not(#nx-shield):not(#nx-shield) { padding-block: 0.375rem; } #nxc-member .nxc-nav__item[aria-current="page"]:not(#nx-shield):not(#nx-shield) { font-weight: 600; } #nxc-member .nxc-nav__item[aria-current="page"]:not(#nx-shield):not(#nx-shield)::before { background: var(--nx-accent); inline-size: 3px; } #nxc-member .nxc-nav__group[data-cat] .nxc-nav__cat button[aria-expanded="false"]:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-secondary); } /* BuddyPress's horizontal nav draws a white glow (.bp-dir-hori-nav); none on the account screens. */ #nxc-member nav:not(#nx-shield):not(#nx-shield), body:has(#nxc-member) .buddypress-wrap.bp-dir-hori-nav nav:not(#nx-shield):not(#nx-shield) { box-shadow: none !important; } @media (max-width: 63.99em) { /* A phone or tablet: the Menu button opens the menu as a full-height sheet; the button stays on top as its close. */ #nxc-member .nxc-nav.is-folding.is-open:not(#nx-shield):not(#nx-shield) { position: fixed; inset: 0; z-index: var(--nx-z-dialog, 70); overflow-y: auto; overscroll-behavior: contain; padding: max(0.75rem, env(safe-area-inset-top)) var(--nxc-gut) 2rem; background: var(--nx-bg-surface); } #nxc-member .nxc-nav.is-folding.is-open .nxc-nav__toggle:not(#nx-shield):not(#nx-shield) { position: sticky; inset-block-start: 0; z-index: 1; } html.nxc-sheet-open:not(#nx-shield):not(#nx-shield), html.nxc-sheet-open body:not(#nx-shield):not(#nx-shield) { overflow: hidden; } } /* Header compositions (1.24.1, data-head on #nxc-member; A, the band, is the base above). The themes lane adds only what a child theme needs; these are the compositions themselves. */ /* B, hero: a wide 16:5 cover, the photo, name and chips centred over the scrim. */ #nxc-member[data-head="b"] .nxc-head > .nxc-head__body:not(#nx-shield):not(#nx-shield) { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; min-block-size: clamp(17rem, 31.25vw, 25rem); align-content: end; } #nxc-member[data-head="b"] .nxc-head > .nxc-head__body > .nxc-avatar:not(#nx-shield):not(#nx-shield), #nxc-member[data-head="b"] .nxc-head > .nxc-head__body > .nxc-identity:not(#nx-shield):not(#nx-shield) { align-self: auto; } #nxc-member[data-head="b"] :is(.nxc-namerow, .nxc-handle, .nxc-hcs, .nxc-actions):not(#nx-shield):not(#nx-shield) { justify-content: center; } /* C, split: the cover in two thirds, the identity as a card in the last third, the numbers below both. */ @media (min-width: 64em) { #nxc-member[data-head="c"] .nxc-head:not(#nx-shield):not(#nx-shield) { grid-template-columns: minmax(0, 2fr) minmax(20rem, 1fr); } #nxc-member[data-head="c"] .nxc-head > .nxc-cover:not(#nx-shield):not(#nx-shield) { grid-area: 1 / 1; min-block-size: 18rem; } #nxc-member[data-head="c"] .nxc-head > .nxc-head__body:not(#nx-shield):not(#nx-shield) { grid-area: 1 / 2; grid-template-columns: minmax(0, 1fr); align-content: start; min-block-size: 0; padding: 1.5rem; border-inline-start: 1px solid var(--nx-border-hairline); background: var(--nx-bg-surface); } #nxc-member[data-head="c"] .nxc-head > .nxc-head__body .nxc-avatar:not(#nx-shield):not(#nx-shield) { inline-size: 5.5rem; block-size: 5.5rem; } #nxc-member[data-head="c"] .nxc-actions:not(#nx-shield):not(#nx-shield) { justify-content: flex-start; } #nxc-member[data-head="c"] .nxc-head > .nxc-strip:not(#nx-shield):not(#nx-shield), #nxc-member[data-head="c"] .nxc-head > .nxc-kpis:not(#nx-shield):not(#nx-shield) { grid-column: 1 / -1; } #nxc-member[data-head="c"] .nxc-cover__tools:not(#nx-shield):not(#nx-shield) { inset-inline-end: calc(33.333% + 0.75rem); } } /* D, compact: one 96px bar; the cover is a thin rule, the chips stay on one line. */ #nxc-member[data-head="d"] .nxc-head > .nxc-cover:not(#nx-shield):not(#nx-shield) { min-block-size: 0; block-size: 4px; grid-area: auto; } #nxc-member[data-head="d"] .nxc-head > .nxc-cover:not(#nx-shield):not(#nx-shield)::after { display: none; } #nxc-member[data-head="d"] .nxc-head > .nxc-head__body:not(#nx-shield):not(#nx-shield) { grid-area: auto; min-block-size: 6rem; padding-block: 0.75rem; align-items: center; } #nxc-member[data-head="d"] .nxc-head > .nxc-head__body > :is(.nxc-avatar, .nxc-identity):not(#nx-shield):not(#nx-shield) { align-self: center; } #nxc-member[data-head="d"] .nxc-head .nxc-avatar:not(#nx-shield):not(#nx-shield) { inline-size: 4.5rem; block-size: 4.5rem; } #nxc-member[data-head="d"] .nxc-head .nxc-monogram:not(#nx-shield):not(#nx-shield) { font-size: 1.5rem; } #nxc-member[data-head="d"] .nxc-identity:not(#nx-shield):not(#nx-shield) { padding-block-start: 0; } #nxc-member[data-head="d"] .nxc-name:not(#nx-shield):not(#nx-shield) { font-size: 1.375rem; } #nxc-member[data-head="d"] .nxc-hcs:not(#nx-shield):not(#nx-shield) { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-block-start: 0.375rem; padding-block: 2px; -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); } #nxc-member[data-head="d"] .nxc-hcs > *:not(#nx-shield):not(#nx-shield) { flex: none; } #nxc-member[data-head="d"] .nxc-cover__tools:not(#nx-shield):not(#nx-shield) { display: none; } /* The 48px bar (every composition): the photo, the name and the view's primary action, fixed under the estate header once the header has scrolled away (account-head.js sets data-head-stuck); the tabs then sit right under it. */ #nxc-member .nxc-acctbar:not(#nx-shield):not(#nx-shield) { position: fixed; inset-inline: 0; inset-block-start: var(--nx-acct-bar-top, var(--nxh-visible-bottom, 0px)); z-index: calc(var(--nx-z-sticky, 20) + 1); display: flex; align-items: center; gap: 0.75rem; block-size: var(--nx-acct-bar-h, 3rem); padding-inline: max(var(--nxc-gut), calc((100vw - 80rem) / 2 + var(--nxc-gut))); border-block-end: 1px solid var(--nx-border-hairline); background: var(--nx-bg-surface); transform: translateY(-100%); opacity: 0; visibility: hidden; transition: transform var(--nx-motion-base, 200ms) var(--nx-ease-out, ease-out), opacity var(--nx-motion-base, 200ms) ease, visibility 0s linear var(--nx-motion-base, 200ms); } #nxc-member[data-head-stuck] .nxc-acctbar:not(#nx-shield):not(#nx-shield) { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; } #nxc-member .nxc-acctbar__photo:not(#nx-shield):not(#nx-shield) { flex: none; inline-size: 2rem; block-size: 2rem; border-radius: var(--nx-radius-sm, 2px); overflow: hidden; } #nxc-member .nxc-acctbar__photo :is(img, .nxc-monogram):not(#nx-shield):not(#nx-shield) { display: grid; inline-size: 100%; block-size: 100%; object-fit: cover; font-size: 0.875rem; border-radius: var(--nx-radius-sm, 2px); } #nxc-member .nxc-acctbar__name:not(#nx-shield):not(#nx-shield) { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 0.9375rem/1.2 var(--nx-font-sans); color: var(--nx-text-primary); } #nxc-member .nxc-acctbar__name .nxc-icon:not(#nx-shield):not(#nx-shield) { margin-inline-start: 0.25rem; vertical-align: -0.125em; color: var(--nx-positive); } #nxc-member .nxc-acctbar__act:not(#nx-shield):not(#nx-shield) { margin-inline-start: auto; } #nxc-member[data-head-stuck] .nxc-acctabs:not(#nx-shield):not(#nx-shield) { inset-block-start: var(--nx-acct-tabs-top, calc(var(--nxh-visible-bottom, 0px) + 3rem)); } @media (prefers-reduced-motion: reduce) { #nxc-member .nxc-acctbar:not(#nx-shield):not(#nx-shield) { transition: none; } } /* Account tabs (1.24.1, AccountNav): under the header, sticky below the estate header (themes lane offsets); the current tab underlined in the site colour (the current place), counts in mono; a phone scrolls the row with a fade at the end; wider screens move what does not fit into "More" (account-head.js). */ #nxc-member .nxc-acctabs:not(#nx-shield):not(#nx-shield) { position: sticky; inset-block-start: var(--nx-acct-tabs-top, var(--nxh-visible-bottom, 0px)); z-index: var(--nx-z-sticky, 20); display: flex; align-items: stretch; gap: 0.25rem; margin: 0 calc(-1 * var(--nxc-gut)); padding: 0 var(--nxc-gut); border-block-end: 1px solid var(--nx-border-hairline); background: var(--nx-bg-surface); } #nxc-member .nxc-acctabs__list:not(#nx-shield):not(#nx-shield) { display: flex; flex: 1 1 auto; min-inline-size: 0; gap: 0.25rem; margin: 0; padding: 0; list-style: none; overflow: hidden; } #nxc-member .nxc-acctabs__list > li:not(#nx-shield):not(#nx-shield) { flex: none; } #nxc-member .nxc-acctabs__tab:not(#nx-shield):not(#nx-shield) { position: relative; display: inline-flex; align-items: center; gap: 0.4375rem; min-block-size: 2.75rem; padding: 0 0.75rem; color: var(--nx-text-secondary) !important; font: 500 0.875rem/1 var(--nx-font-sans); white-space: nowrap; text-decoration: none !important; transition: color var(--nx-motion-fast, 150ms) ease; } #nxc-member .nxc-acctabs__tab:hover:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-primary) !important; background: var(--nx-bg-hover); } #nxc-member .nxc-acctabs__tab[aria-current="page"]:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-primary) !important; font-weight: 600; } #nxc-member .nxc-acctabs__tab[aria-current="page"]:not(#nx-shield):not(#nx-shield)::after { content: ""; position: absolute; inset-inline: 0.75rem; inset-block-end: -1px; block-size: 2px; border-radius: var(--nx-radius-sm, 2px); background: var(--nx-accent); } #nxc-member .nxc-acctabs__n:not(#nx-shield):not(#nx-shield) { min-inline-size: 1.25rem; padding: 0.125rem 0.3125rem; border-radius: var(--nx-radius-sm, 2px); background: var(--nx-bg-muted); color: var(--nx-text-secondary); font: 500 0.75rem/1 var(--nx-font-mono); font-variant-numeric: tabular-nums; text-align: center; } #nxc-member .nxc-acctabs__more:not(#nx-shield):not(#nx-shield) { position: relative; flex: none; display: flex; } #nxc-member .nxc-acctabs__more[hidden]:not(#nx-shield):not(#nx-shield) { display: none; } #nxc-member .nxc-acctabs__morebtn:not(#nx-shield):not(#nx-shield) { display: inline-flex; align-items: center; gap: 0.375rem; min-block-size: 2.75rem; padding: 0 0.75rem; color: var(--nx-text-secondary); font: 500 0.875rem/1 var(--nx-font-sans); cursor: pointer; list-style: none; } #nxc-member .nxc-acctabs__morebtn:not(#nx-shield):not(#nx-shield)::-webkit-details-marker { display: none; } #nxc-member .nxc-acctabs__more[open] .nxc-acctabs__morebtn:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-acctabs__morebtn:hover:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-primary); } #nxc-member .nxc-acctabs__menu:not(#nx-shield):not(#nx-shield) { position: absolute; inset-block-start: 100%; inset-inline-end: 0; z-index: var(--nx-z-overlay, 50); min-inline-size: 13rem; margin: 0; padding: 0.375rem; list-style: none; border: 1px solid var(--nx-border-hairline-strong); border-radius: var(--nx-radius, 5px); background: var(--nx-bg-elevated); box-shadow: var(--nx-shadow-md); } #nxc-member .nxc-acctabs__menu .nxc-acctabs__tab:not(#nx-shield):not(#nx-shield) { display: flex; justify-content: space-between; inline-size: 100%; box-sizing: border-box; min-block-size: 2.5rem; border-radius: var(--nx-radius-sm, 2px); } #nxc-member .nxc-acctabs__menu .nxc-acctabs__tab[aria-current="page"]:not(#nx-shield):not(#nx-shield)::after { inset-block: 0.5rem; inset-inline: 0 auto; inline-size: 2px; block-size: auto; } #nxc-member .nxc-layout[data-rail="none"]:not(#nx-shield):not(#nx-shield) { grid-template-columns: minmax(0, 1fr); } #nxc-member[data-nav="both"] .nxc-nav__find:not(#nx-shield):not(#nx-shield) { display: none; } /* one short group: nothing to find */ @media (max-width: 47.99em) { #nxc-member .nxc-acctabs__list:not(#nx-shield):not(#nx-shield) { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); } #nxc-member .nxc-acctabs__list:not(#nx-shield):not(#nx-shield)::-webkit-scrollbar { display: none; } [dir="rtl"] #nxc-member .nxc-acctabs__list:not(#nx-shield):not(#nx-shield) { -webkit-mask-image: linear-gradient(to left, #000 85%, transparent); mask-image: linear-gradient(to left, #000 85%, transparent); } } @media (prefers-reduced-motion: reduce) { #nxc-member .nxc-acctabs__tab:not(#nx-shield):not(#nx-shield) { transition: none; } } /* The contributions calendar (1.24.1, ContribCalendar): cells sized from the card (container query units), at least 11px and at most 20px with a 3px gap; a five-step ramp from the site colour; the empty step a faint tint; today ringed. A phone scrolls it, the latest weeks in view first. */ #nxc-member .nxc-cal:not(#nx-shield):not(#nx-shield) { display: grid; gap: 1rem; margin: 0; } #nxc-member .nxc-cal__head:not(#nx-shield):not(#nx-shield) { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; } #nxc-member .nxc-cal__t:not(#nx-shield):not(#nx-shield) { flex: 1 1 auto; margin: 0; font-size: 1rem; font-weight: 600; } #nxc-member .nxc-cal__range select:not(#nx-shield):not(#nx-shield) { min-block-size: 2rem; padding: 0 2rem 0 0.75rem; border: 1px solid var(--nx-border-hairline-strong); border-radius: var(--nx-radius, 5px); background-color: var(--nx-bg-surface); color: var(--nx-text-primary); font: 500 0.875rem/1 var(--nx-font-sans); } #nxc-member .nxc-cal__key:not(#nx-shield):not(#nx-shield) { display: inline-flex; align-items: center; gap: 3px; font: 0.75rem/1 var(--nx-font-mono); color: var(--nx-text-muted); } #nxc-member .nxc-cal__key span:not(#nx-shield):not(#nx-shield) { margin-inline: 0.25rem; } #nxc-member .nxc-cal__key .nxc-cal__c:not(#nx-shield):not(#nx-shield) { inline-size: 11px; block-size: 11px; } #nxc-member .nxc-cal__facts:not(#nx-shield):not(#nx-shield) { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 1px; margin: 0; border: 1px solid var(--nx-border-hairline); border-radius: var(--nx-radius, 5px); background: var(--nx-border-hairline); overflow: hidden; } #nxc-member .nxc-cal__fact:not(#nx-shield):not(#nx-shield) { padding: 0.75rem 0.875rem; background: var(--nx-bg-surface); } #nxc-member .nxc-cal__fact dt:not(#nx-shield):not(#nx-shield) { font: 500 0.75rem/1.2 var(--nx-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--nx-text-muted); } #nxc-member .nxc-cal__fact dd:not(#nx-shield):not(#nx-shield) { margin: 0.375rem 0 0; font: 500 1.25rem/1.1 var(--nx-font-mono); font-variant-numeric: tabular-nums; color: var(--nx-text-primary); } #nxc-member .nxc-cal__fact dd span:not(#nx-shield):not(#nx-shield) { margin-inline-start: 0.375rem; font: 0.75rem/1 var(--nx-font-sans); color: var(--nx-text-muted); } #nxc-member .nxc-cal__mix:not(#nx-shield):not(#nx-shield) { display: grid; gap: 0.75rem; } #nxc-member .nxc-cal__bar:not(#nx-shield):not(#nx-shield) { display: flex; gap: 2px; block-size: 6px; border-radius: var(--nx-radius-sm, 2px); overflow: hidden; } #nxc-member .nxc-cal__seg:not(#nx-shield):not(#nx-shield) { min-inline-size: 4px; } #nxc-member .nxc-cal__kinds:not(#nx-shield):not(#nx-shield) { display: flex; flex-wrap: wrap; gap: 0.375rem; } #nxc-member .nxc-cal__kind:not(#nx-shield):not(#nx-shield) { display: inline-flex; align-items: center; gap: 0.375rem; min-block-size: 1.75rem; padding: 0 0.75rem; border: 0; border-radius: var(--nx-radius-sm, 2px); background: color-mix(in srgb, var(--nx-text-primary) 8%, var(--nx-bg-surface)); color: var(--nx-text-secondary); font: 500 0.875rem/1 var(--nx-font-sans); cursor: pointer; } #nxc-member .nxc-cal__kind span:not(#nx-shield):not(#nx-shield) { font-family: var(--nx-font-mono); color: var(--nx-text-muted); } #nxc-member .nxc-cal__kind i:not(#nx-shield):not(#nx-shield) { inline-size: 6px; block-size: 6px; border-radius: var(--nx-radius-sm, 2px); } #nxc-member .nxc-cal__kind[aria-pressed="true"]:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-primary); font-weight: 600; background: color-mix(in srgb, var(--nx-text-primary) 18%, var(--nx-bg-surface)); } #nxc-member :is(.nxc-cal__seg, .nxc-cal__kind i)[data-kind="posts"]:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-cal__kind[data-kind="posts"] i:not(#nx-shield):not(#nx-shield) { background: var(--nx-info); } #nxc-member .nxc-cal__seg[data-kind="reviews"]:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-cal__kind[data-kind="reviews"] i:not(#nx-shield):not(#nx-shield) { background: var(--nx-quantum); } #nxc-member .nxc-cal__seg[data-kind="proposals"]:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-cal__kind[data-kind="proposals"] i:not(#nx-shield):not(#nx-shield) { background: var(--nx-caution); } #nxc-member .nxc-cal__seg[data-kind="publications"]:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-cal__kind[data-kind="publications"] i:not(#nx-shield):not(#nx-shield) { background: var(--nx-positive); } #nxc-member .nxc-cal__seg[data-kind="decisions"]:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-cal__kind[data-kind="decisions"] i:not(#nx-shield):not(#nx-shield) { background: var(--nx-text-secondary); } #nxc-member .nxc-cal__scroll:not(#nx-shield):not(#nx-shield) { container-type: inline-size; overflow-x: auto; scrollbar-width: thin; padding-block-end: 0.25rem; } #nxc-member .nxc-cal__frame:not(#nx-shield):not(#nx-shield) { --c: clamp(11px, calc((100cqi - 2.25rem - 3px * (var(--nxc-cal-weeks) - 1)) / var(--nxc-cal-weeks)), 20px); display: grid; grid-template-columns: 2.25rem auto; grid-template-rows: auto auto; inline-size: max-content; } #nxc-member .nxc-cal__months:not(#nx-shield):not(#nx-shield) { grid-column: 2; display: grid; grid-template-columns: repeat(var(--nxc-cal-weeks), var(--c)); gap: 3px; block-size: 1rem; font: 0.75rem/1 var(--nx-font-mono); color: var(--nx-text-muted); white-space: nowrap; } #nxc-member .nxc-cal__wd:not(#nx-shield):not(#nx-shield) { grid-column: 1; grid-row: 2; display: grid; grid-template-rows: repeat(7, var(--c)); gap: 3px; font: 0.75rem/1 var(--nx-font-mono); color: var(--nx-text-muted); align-items: center; } #nxc-member .nxc-cal__grid:not(#nx-shield):not(#nx-shield) { grid-column: 2; grid-row: 2; display: grid; grid-template-rows: repeat(7, var(--c)); grid-auto-flow: column; grid-auto-columns: var(--c); gap: 3px; } /* The step colour is an inset fill (box-shadow), so the cell's own background stays the card's and the ink measures against it; the look is the same. */ #nxc-member .nxc-cal__c:not(#nx-shield):not(#nx-shield) { --f: color-mix(in srgb, var(--nx-text-primary) 7%, var(--nx-bg-surface)); --ring: 0 0 transparent; display: block; inline-size: var(--c, 11px); block-size: var(--c, 11px); padding: 0; margin: 0; border: 0; border-radius: var(--nx-radius-sm, 2px); background: transparent; color: var(--nx-text-primary); box-shadow: var(--ring), inset 0 0 0 20px var(--f); cursor: pointer; } #nxc-member .nxc-cal__c[data-s="1"]:not(#nx-shield):not(#nx-shield) { --f: color-mix(in srgb, var(--nx-accent) 30%, var(--nx-bg-surface)); } #nxc-member .nxc-cal__c[data-s="2"]:not(#nx-shield):not(#nx-shield) { --f: color-mix(in srgb, var(--nx-accent) 55%, var(--nx-bg-surface)); } #nxc-member .nxc-cal__c[data-s="3"]:not(#nx-shield):not(#nx-shield) { --f: color-mix(in srgb, var(--nx-accent) 78%, var(--nx-bg-surface)); } #nxc-member .nxc-cal__c[data-s="4"]:not(#nx-shield):not(#nx-shield) { --f: var(--nx-accent); } #nxc-member .nxc-cal__c[data-future]:not(#nx-shield):not(#nx-shield) { opacity: 0.35; cursor: default; } #nxc-member .nxc-cal__c[data-today]:not(#nx-shield):not(#nx-shield) { --ring: 0 0 0 1px var(--nx-bg-surface), 0 0 0 2.5px var(--nx-text-primary); } #nxc-member .nxc-cal__c:focus-visible:not(#nx-shield):not(#nx-shield) { outline: 2px solid var(--nx-focus); outline-offset: 1px; } #nxc-member .nxc-cal__c[data-picked]:not(#nx-shield):not(#nx-shield) { --ring: 0 0 0 1px var(--nx-bg-surface), 0 0 0 3px var(--nx-text-primary); } #nxc-member .nxc-cal.is-in .nxc-cal__grid:not(#nx-shield):not(#nx-shield) { animation: nxc-cal-in var(--nx-motion-base, 200ms) var(--nx-ease-out, ease-out) both; } @keyframes nxc-cal-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } #nxc-member .nxc-cal__tip:not(#nx-shield):not(#nx-shield) { position: fixed; z-index: var(--nx-z-overlay, 50); max-inline-size: 18rem; padding: 0.4375rem 0.75rem; border: 1px solid var(--nx-border-hairline-strong); border-radius: var(--nx-radius, 5px); background: var(--nx-bg-elevated); box-shadow: var(--nx-shadow-md); color: var(--nx-text-primary); font: 0.875rem/1.35 var(--nx-font-sans); pointer-events: none; } #nxc-member .nxc-cal__picked button:not(#nx-shield):not(#nx-shield) { margin-inline-start: 0.5rem; } @media (prefers-reduced-motion: reduce) { #nxc-member .nxc-cal.is-in .nxc-cal__grid:not(#nx-shield):not(#nx-shield) { animation: none; } } /* The phone's bottom bar (1.24.1, PA-07): Menu, Search and Filter within thumb reach; phones only, above the page. */ #nxc-member .nxc-bbar:not(#nx-shield):not(#nx-shield) { display: none; } @media (max-width: 47.99em) { #nxc-member .nxc-bbar:not([hidden]):not(#nx-shield):not(#nx-shield) { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: calc(var(--nx-z-sticky, 20) + 2); display: flex; justify-content: space-around; gap: 0.25rem; padding: 0.25rem 0.5rem max(0.25rem, env(safe-area-inset-bottom)); border-block-start: 1px solid var(--nx-border-hairline); background: var(--nx-bg-surface); } #nxc-member:has(.nxc-bbar:not([hidden])):not(#nx-shield):not(#nx-shield) { padding-block-end: 4.5rem; } #nxc-member .nxc-bbar__b:not(#nx-shield):not(#nx-shield) { display: grid; justify-items: center; gap: 0.125rem; flex: 1 1 0; min-block-size: 3rem; padding: 0.25rem; border: 0; border-radius: var(--nx-radius, 5px); background: transparent; color: var(--nx-text-secondary); font: 500 0.75rem/1.2 var(--nx-font-sans); cursor: pointer; } #nxc-member .nxc-bbar__b[hidden]:not(#nx-shield):not(#nx-shield) { display: none; } #nxc-member .nxc-bbar__b:hover:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-bbar__b[aria-expanded="true"]:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-primary); background: var(--nx-bg-hover); } /* With the bar, the in-page Menu button is not needed: the bar opens the same sheet. */ #nxc-member:has(.nxc-bbar:not([hidden])) .nxc-nav.is-folding:not(.is-open) .nxc-nav__toggle:not(#nx-shield):not(#nx-shield) { display: none; } #nxc-member:has(.nxc-bbar:not([hidden])) .nxc-nav.is-folding:not(.is-open):not(#nx-shield):not(#nx-shield) { padding: 0; border: 0; } } /* Starter pages (1.24.1, Starter): what the area is for and the first action, an example of it with data, how it works in three steps; a 12-column grid, the example beside the lead on wide screens. */ #nxc-member .nxc-start:not(#nx-shield):not(#nx-shield) { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.25rem; padding: 1.5rem; border: 1px solid var(--nx-border-hairline); border-radius: var(--nx-radius, 5px); background: var(--nx-bg-surface); } #nxc-member .nxc-start__lead:not(#nx-shield):not(#nx-shield) { grid-column: span 7; display: grid; align-content: start; justify-items: start; gap: 0.75rem; } #nxc-member .nxc-start__t:not(#nx-shield):not(#nx-shield) { margin: 0; font-size: 1.375rem; font-weight: 600; } #nxc-member .nxc-start__x:not(#nx-shield):not(#nx-shield) { max-inline-size: 60ch; margin: 0; color: var(--nx-text-secondary); font-size: 0.9375rem; line-height: 1.55; } #nxc-member .nxc-start__ex:not(#nx-shield):not(#nx-shield) { grid-column: span 5; display: grid; gap: 0.5rem; align-content: start; margin: 0; } #nxc-member .nxc-start__ex figcaption:not(#nx-shield):not(#nx-shield) { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--nx-text-muted); } #nxc-member .nxc-start__tag:not(#nx-shield):not(#nx-shield) { padding: 0.125rem 0.4375rem; border: 0; background: color-mix(in srgb, var(--nx-text-primary) 10%, var(--nx-bg-surface)); border-radius: var(--nx-radius-sm, 2px); font: 500 0.75rem/1.4 var(--nx-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--nx-text-secondary); } #nxc-member .nxc-start__card:not(#nx-shield):not(#nx-shield) { display: flex; gap: 0.75rem; padding: 1rem; border: 1px dashed var(--nx-border-hairline-strong); border-radius: var(--nx-radius, 5px); background: var(--nx-bg-muted); color: var(--nx-text-secondary); } #nxc-member .nxc-start__card > span:not(#nx-shield):not(#nx-shield) { display: grid; gap: 0.25rem; min-inline-size: 0; } #nxc-member .nxc-start__card strong:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-primary); font-weight: 600; } #nxc-member .nxc-start__card .nxc-icon:not(#nx-shield):not(#nx-shield) { flex: none; color: var(--nx-text-muted); } #nxc-member .nxc-start__how:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-start__help:not(#nx-shield):not(#nx-shield) { grid-column: 1 / -1; display: grid; gap: 0.75rem; padding-block-start: 1.25rem; border-block-start: 1px solid var(--nx-border-hairline); } #nxc-member .nxc-start__h:not(#nx-shield):not(#nx-shield) { margin: 0; font: 500 0.75rem/1.2 var(--nx-font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--nx-text-muted); } #nxc-member .nxc-start__steps:not(#nx-shield):not(#nx-shield) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; } #nxc-member .nxc-start__steps li:not(#nx-shield):not(#nx-shield) { position: relative; display: grid; gap: 0.375rem; align-content: start; padding: 1rem; border: 1px solid var(--nx-border-hairline); border-radius: var(--nx-radius, 5px); color: var(--nx-text-secondary); font-size: 0.875rem; line-height: 1.5; } #nxc-member .nxc-start__steps strong:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-primary); font-weight: 600; } #nxc-member .nxc-start__steps .nxc-icon:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-muted); } #nxc-member .nxc-start__n:not(#nx-shield):not(#nx-shield) { position: absolute; inset-block-start: 0.75rem; inset-inline-end: 0.875rem; font: 500 0.75rem/1 var(--nx-font-mono); color: var(--nx-text-muted); } #nxc-member .nxc-start__help ul:not(#nx-shield):not(#nx-shield) { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0; padding: 0; list-style: none; } #nxc-member .nxc-start__help a:not(#nx-shield):not(#nx-shield) { display: inline-flex; align-items: center; gap: 0.375rem; } @media (max-width: 63.99em) { #nxc-member .nxc-start__lead:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-start__ex:not(#nx-shield):not(#nx-shield) { grid-column: 1 / -1; } #nxc-member .nxc-start__steps:not(#nx-shield):not(#nx-shield) { grid-template-columns: minmax(0, 1fr); } #nxc-member .nxc-start:not(#nx-shield):not(#nx-shield) { padding: 1.125rem; } } /* The Overview's composition (1.24.1, product pass): full-width rows for Needs you and tables, cards two to a row of equal height, and a card alone in its row widening to fill it, so no hole is left and no card is narrower than half. */ #nxc-member .nxc-dash:not(#nx-shield):not(#nx-shield) { display: flex; flex-wrap: wrap; align-items: stretch; gap: 1.5rem; } #nxc-member .nxc-dash > *:not(#nx-shield):not(#nx-shield) { flex: 1 1 100%; min-inline-size: 0; } @media (min-width: 1100px) { #nxc-member .nxc-dash > .nxc-panel:is([data-span="4"], [data-span="6"], [data-span="8"]):not(#nx-shield):not(#nx-shield) { flex: 1 1 calc(50% - 0.75rem); } } #nxc-member .nxc-roles:not(#nx-shield):not(#nx-shield) { display: grid; gap: 1.5rem; margin-block-end: 1.5rem; } /* Customise header (1.24.1, Customise): two panes at full width; the choices as grouped cards on the left, a sticky live preview on the right; picture tiles and a segmented control, never bare radios or framed fieldsets. */ #nxc-member[data-nxc="customise"] .nxc-cz:not(#nx-shield):not(#nx-shield) { display: grid; grid-template-columns: minmax(20rem, 5fr) minmax(0, 7fr); gap: 1.5rem; align-items: start; } #nxc-member .nxc-cz__form:not(#nx-shield):not(#nx-shield) { display: grid; gap: 1rem; margin: 0; } #nxc-member .nxc-cz__card:not(#nx-shield):not(#nx-shield) { display: grid; gap: 0.75rem; padding: 1.125rem; border: 1px solid var(--nx-border-hairline); border-radius: var(--nx-radius, 5px); background: var(--nx-bg-surface); } #nxc-member .nxc-cz__h:not(#nx-shield):not(#nx-shield) { margin: 0; font: 500 0.75rem/1.2 var(--nx-font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--nx-text-muted); } #nxc-member .nxc-cz__help:not(#nx-shield):not(#nx-shield) { margin: 0; color: var(--nx-text-secondary); font-size: 0.875rem; line-height: 1.5; } #nxc-member .nxc-cz__tiles:not(#nx-shield):not(#nx-shield) { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.75rem; } #nxc-member .nxc-cz__tile:not(#nx-shield):not(#nx-shield) { display: grid; gap: 0.25rem; padding: 0.75rem; border: 1px solid var(--nx-border-hairline); border-radius: var(--nx-radius, 5px); cursor: pointer; } #nxc-member .nxc-cz__tile:has(input:checked):not(#nx-shield):not(#nx-shield) { border-color: var(--nx-accent); box-shadow: inset 0 0 0 1px var(--nx-accent); } #nxc-member .nxc-cz__tile:has(input:focus-visible):not(#nx-shield):not(#nx-shield), #nxc-member .nxc-cz__sw:has(input:focus-visible):not(#nx-shield):not(#nx-shield), #nxc-member .nxc-cz__seg label:has(input:focus-visible):not(#nx-shield):not(#nx-shield) { outline: 2px solid var(--nx-focus); outline-offset: 2px; } #nxc-member .nxc-cz__name:not(#nx-shield):not(#nx-shield) { font-weight: 600; font-size: 0.875rem; color: var(--nx-text-primary); } #nxc-member .nxc-cz__note:not(#nx-shield):not(#nx-shield) { font-size: 0.75rem; line-height: 1.35; color: var(--nx-text-muted); } /* the picture: i = cover, b = photo, s = text lines; each tile draws its composition */ #nxc-member .nxc-cz__pic:not(#nx-shield):not(#nx-shield) { position: relative; display: block; block-size: 4rem; border-radius: var(--nx-radius-sm, 2px); background: var(--nx-bg-muted); overflow: hidden; } #nxc-member .nxc-cz__pic i:not(#nx-shield):not(#nx-shield) { position: absolute; inset: 0 0 45% 0; background: color-mix(in srgb, var(--nx-accent) 30%, var(--nx-bg-muted)); } #nxc-member .nxc-cz__pic b:not(#nx-shield):not(#nx-shield) { position: absolute; inset-inline-start: 10%; inset-block-start: 35%; inline-size: 1.25rem; block-size: 1.25rem; border-radius: var(--nx-radius-sm, 2px); background: var(--nx-text-secondary); } #nxc-member .nxc-cz__pic s:not(#nx-shield):not(#nx-shield) { position: absolute; inset-inline-start: 38%; inset-block-start: 62%; inline-size: 45%; block-size: 0.3125rem; border-radius: var(--nx-radius-sm, 2px); background: var(--nx-text-muted); text-decoration: none; box-shadow: 0 0.5rem 0 -0.0625rem var(--nx-border-hairline-strong); } #nxc-member .nxc-cz__tile[data-shape="a"] .nxc-cz__pic i:not(#nx-shield):not(#nx-shield) { inset: 0; } #nxc-member .nxc-cz__tile[data-shape="b"] .nxc-cz__pic i:not(#nx-shield):not(#nx-shield) { inset: 0; } #nxc-member .nxc-cz__tile[data-shape="b"] .nxc-cz__pic b:not(#nx-shield):not(#nx-shield) { inset-inline-start: calc(50% - 0.75rem); inset-block-start: 18%; } #nxc-member .nxc-cz__tile[data-shape="b"] .nxc-cz__pic s:not(#nx-shield):not(#nx-shield) { inset-inline-start: 27.5%; inset-block-start: 68%; } #nxc-member .nxc-cz__tile[data-shape="c"] .nxc-cz__pic i:not(#nx-shield):not(#nx-shield) { inset: 0 38% 0 0; } #nxc-member .nxc-cz__tile[data-shape="c"] .nxc-cz__pic b:not(#nx-shield):not(#nx-shield) { inset-inline-start: 68%; inset-block-start: 15%; } #nxc-member .nxc-cz__tile[data-shape="c"] .nxc-cz__pic s:not(#nx-shield):not(#nx-shield) { inset-inline-start: 68%; inset-block-start: 58%; inline-size: 26%; } #nxc-member .nxc-cz__tile[data-shape="d"] .nxc-cz__pic i:not(#nx-shield):not(#nx-shield) { inset: 0 0 92% 0; } #nxc-member .nxc-cz__tile[data-shape="d"] .nxc-cz__pic b:not(#nx-shield):not(#nx-shield) { inset-block-start: 30%; } #nxc-member .nxc-cz__tile[data-shape="d"] .nxc-cz__pic s:not(#nx-shield):not(#nx-shield) { inset-block-start: 42%; } #nxc-member .nxc-cz__seg:not(#nx-shield):not(#nx-shield) { display: flex; flex-wrap: wrap; gap: 2px; padding: 2px; border-radius: var(--nx-radius, 5px); background: var(--nx-bg-muted); } #nxc-member .nxc-cz__seg label:not(#nx-shield):not(#nx-shield) { flex: 1 1 auto; } #nxc-member .nxc-cz__seg span:not(#nx-shield):not(#nx-shield) { display: block; padding: 0.5rem 0.75rem; border-radius: var(--nx-radius-sm, 2px); text-align: center; font-size: 0.875rem; font-weight: 500; color: var(--nx-text-secondary); cursor: pointer; } #nxc-member .nxc-cz__seg input:checked + span:not(#nx-shield):not(#nx-shield) { background: var(--nx-bg-surface); color: var(--nx-text-primary); box-shadow: 0 0 0 1px var(--nx-border-hairline-strong); font-weight: 600; } #nxc-member .nxc-cz__sws:not(#nx-shield):not(#nx-shield) { display: flex; flex-wrap: wrap; gap: 0.75rem; } #nxc-member .nxc-cz__sw:not(#nx-shield):not(#nx-shield) { display: grid; justify-items: center; gap: 0.25rem; font-size: 0.75rem; color: var(--nx-text-secondary); cursor: pointer; } #nxc-member .nxc-cz__swatch:not(#nx-shield):not(#nx-shield) { inline-size: 3.5rem; block-size: 2.25rem; border-radius: var(--nx-radius-sm, 2px); border: 1px solid var(--nx-border-hairline); background: var(--nx-bg-muted); } #nxc-member .nxc-cz__sw[data-preset="hex"] .nxc-cz__swatch:not(#nx-shield):not(#nx-shield) { background: color-mix(in srgb, var(--nx-accent) 38%, var(--nx-bg-muted)); } #nxc-member .nxc-cz__sw[data-preset="field"] .nxc-cz__swatch:not(#nx-shield):not(#nx-shield) { background: color-mix(in srgb, var(--nx-accent) 22%, var(--nx-bg-muted)); } #nxc-member .nxc-cz__sw[data-preset="contour"] .nxc-cz__swatch:not(#nx-shield):not(#nx-shield) { background: color-mix(in srgb, var(--nx-accent) 12%, var(--nx-bg-muted)); } #nxc-member .nxc-cz__sw:has(input:checked) .nxc-cz__swatch:not(#nx-shield):not(#nx-shield) { box-shadow: 0 0 0 2px var(--nx-bg-surface), 0 0 0 4px var(--nx-accent); } #nxc-member .nxc-cz__range:not(#nx-shield):not(#nx-shield) { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.75rem; font-size: 0.875rem; color: var(--nx-text-secondary); } #nxc-member .nxc-cz__range input:not(#nx-shield):not(#nx-shield) { accent-color: var(--nx-accent); color: var(--nx-text-primary); } #nxc-member .nxc-cz__val:not(#nx-shield):not(#nx-shield) { min-inline-size: 3.25rem; padding: 0.25rem 0.5rem; border-radius: var(--nx-radius-sm, 2px); background: var(--nx-bg-muted); font: 500 0.75rem/1 var(--nx-font-mono); text-align: center; color: var(--nx-text-primary); } #nxc-member .nxc-cz__focal:not(#nx-shield):not(#nx-shield) { margin: 0; } #nxc-member .nxc-cz__save:not(#nx-shield):not(#nx-shield) { position: sticky; inset-block-end: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 0.875rem 0; background: var(--nx-bg-canvas, var(--nx-bg-surface)); } #nxc-member .nxc-cz__stage:not(#nx-shield):not(#nx-shield) { position: sticky; inset-block-start: calc(var(--nxh-visible-bottom, 0px) + 1rem); display: grid; gap: 0.75rem; } #nxc-member .nxc-cz__bar:not(#nx-shield):not(#nx-shield) { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } #nxc-member .nxc-cz__device:not(#nx-shield):not(#nx-shield) { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--nx-radius, 5px); background: var(--nx-bg-muted); } #nxc-member .nxc-cz__device button:not(#nx-shield):not(#nx-shield) { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border: 0; border-radius: var(--nx-radius-sm, 2px); background: transparent; color: var(--nx-text-secondary); font: 500 0.875rem/1 var(--nx-font-sans); cursor: pointer; } #nxc-member .nxc-cz__device button[aria-pressed="true"]:not(#nx-shield):not(#nx-shield) { background: var(--nx-bg-surface); color: var(--nx-text-primary); box-shadow: 0 0 0 1px var(--nx-border-hairline-strong); } #nxc-member .nxc-cz__frame:not(#nx-shield):not(#nx-shield) { margin-inline: auto; inline-size: 100%; border: 1px solid var(--nx-border-hairline); border-radius: var(--nx-radius, 5px); overflow: hidden; background: var(--nx-bg-canvas, var(--nx-bg-surface)); transition: inline-size var(--nx-motion-base, 200ms) var(--nx-ease-out, ease-out); } #nxc-member .nxc-cz__frame[data-device="phone"]:not(#nx-shield):not(#nx-shield) { inline-size: 24.375rem; max-inline-size: 100%; } #nxc-member .nxc-cz__frame .nxc-head:not(#nx-shield):not(#nx-shield) { border-radius: 0; border-inline: 0; border-block-start: 0; } #nxc-member .nxc-cz__frame .nxc-cover:not(#nx-shield):not(#nx-shield) { cursor: crosshair; } #nxc-member .nxc-cz__tabs:not(#nx-shield):not(#nx-shield) { position: static; margin: 0; } #nxc-member .nxc-cz__frame .nxc-acctbar:not(#nx-shield):not(#nx-shield) { display: none; } #nxc-member .nxc-cz__frame[data-device="phone"] .nxc-head__body:not(#nx-shield):not(#nx-shield) { grid-template-columns: minmax(0, 1fr); padding-inline: 1rem; } #nxc-member .nxc-cz__frame[data-device="phone"] :is(.nxc-actions, .nxc-strip):not(#nx-shield):not(#nx-shield) { justify-content: flex-start; } @media (max-width: 63.99em) { #nxc-member[data-nxc="customise"] .nxc-cz:not(#nx-shield):not(#nx-shield) { grid-template-columns: minmax(0, 1fr); } #nxc-member .nxc-cz__stage:not(#nx-shield):not(#nx-shield) { position: static; order: -1; } } @media (prefers-reduced-motion: reduce) { #nxc-member .nxc-cz__frame:not(#nx-shield):not(#nx-shield) { transition: none; } } /* Small charts: the svg root states its own fill and colour (theme audit: an unset root reads as default black). */ #nxc-member :is(.nxc-spark2, .nxc-seg2):not(#nx-shield):not(#nx-shield) { fill: none; color: var(--nx-text-secondary); } /* The account health panel (1.24.1): closed to a slim strip at the content's end edge with the completion ring; open, it overlays the content (or takes its own column from 1440px), never a permanent squeeze. A bottom button on phones. */ #nxc-member .nxc-layout:has(> .nxc-health):not(#nx-shield):not(#nx-shield) { grid-template-columns: var(--nxc-rail-w) minmax(0, 1fr) 3.5rem; position: relative; } #nxc-member .nxc-health:not(#nx-shield):not(#nx-shield) { grid-column: 3; position: relative; border-inline-start: 1px solid var(--nx-border-hairline); } #nxc-member .nxc-health__toggle:not(#nx-shield):not(#nx-shield) { position: sticky; inset-block-start: 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 1rem 0.25rem; list-style: none; cursor: pointer; color: var(--nx-text-primary); border-radius: var(--nx-radius, 5px); } #nxc-member .nxc-health__toggle:not(#nx-shield):not(#nx-shield)::-webkit-details-marker { display: none; } #nxc-member .nxc-health__toggle:hover:not(#nx-shield):not(#nx-shield) { background: var(--nx-bg-hover); } #nxc-member .nxc-health__toggle:focus-visible:not(#nx-shield):not(#nx-shield) { outline: 2px solid var(--nx-focus); outline-offset: -2px; } #nxc-member .nxc-health__ring svg:not(#nx-shield):not(#nx-shield) { display: block; } #nxc-member .nxc-health__track:not(#nx-shield):not(#nx-shield) { stroke: var(--nx-border-default); } #nxc-member .nxc-health__arc:not(#nx-shield):not(#nx-shield) { stroke: var(--nx-accent); } #nxc-member .nxc-health__pct:not(#nx-shield):not(#nx-shield) { font: 600 0.75rem/1 var(--nx-font-mono); font-variant-numeric: tabular-nums; } #nxc-member .nxc-health__chev:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-muted); transform: rotate(180deg); } [dir="rtl"] #nxc-member .nxc-health__chev:not(#nx-shield):not(#nx-shield) { transform: none; } #nxc-member .nxc-health[open] .nxc-health__chev:not(#nx-shield):not(#nx-shield) { transform: none; } [dir="rtl"] #nxc-member .nxc-health[open] .nxc-health__chev:not(#nx-shield):not(#nx-shield) { transform: rotate(180deg); } #nxc-member .nxc-health__panel:not(#nx-shield):not(#nx-shield) { position: absolute; z-index: 25; inset-block-start: 0; inset-inline-end: 100%; inline-size: 20rem; max-block-size: calc(100vh - 2rem); overflow: auto; display: grid; gap: 1rem; padding: 1rem; border: 1px solid var(--nx-border-default); border-radius: var(--nx-radius, 5px); background: var(--nx-bg-elevated); box-shadow: var(--nx-shadow-lg); overscroll-behavior: contain; } #nxc-member .nxc-health__title:not(#nx-shield):not(#nx-shield) { font-size: 0.9375rem; font-weight: 600; color: var(--nx-text-primary); } #nxc-member .nxc-health__sec:not(#nx-shield):not(#nx-shield) { display: grid; gap: 0.5rem; padding-block-start: 0.75rem; border-block-start: 1px solid var(--nx-border-hairline); } #nxc-member .nxc-health__h:not(#nx-shield):not(#nx-shield) { font: 500 0.75rem/1 var(--nx-font-mono) !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--nx-text-muted) !important; } #nxc-member .nxc-health__bar:not(#nx-shield):not(#nx-shield) { display: grid; gap: 0.375rem; font-size: 0.875rem; color: var(--nx-text-secondary); } #nxc-member .nxc-health .nxc-meter2:not(#nx-shield):not(#nx-shield) { display: block; block-size: 6px; border-radius: var(--nx-radius-sm, 2px); background: var(--nx-bg-muted); overflow: hidden; } #nxc-member .nxc-health .nxc-meter2 > span:not(#nx-shield):not(#nx-shield) { display: block; block-size: 100%; background: var(--nx-accent); } #nxc-member .nxc-health__list:not(#nx-shield):not(#nx-shield) { display: grid; gap: 0.375rem; font-size: 0.875rem; } #nxc-member .nxc-health__list a:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-primary); text-decoration: underline; text-decoration-color: var(--nx-border-strong); text-underline-offset: 3px; } #nxc-member .nxc-health__list a:hover:not(#nx-shield):not(#nx-shield) { text-decoration-color: var(--nx-accent); } #nxc-member .nxc-health__actions li:not(#nx-shield):not(#nx-shield) { display: grid; gap: 0.125rem; } #nxc-member .nxc-health__meta:not(#nx-shield):not(#nx-shield) { font-size: 0.75rem; color: var(--nx-text-muted); } #nxc-member .nxc-health__tools:not(#nx-shield):not(#nx-shield) { display: grid; grid-template-columns: 1fr 1fr; gap: 0.375rem; } #nxc-member .nxc-health__tool:not(#nx-shield):not(#nx-shield) { display: flex; align-items: center; gap: 0.5rem; min-block-size: 2.5rem; padding: 0.375rem 0.75rem; border: 1px solid var(--nx-border-hairline); border-radius: var(--nx-radius, 5px); font-size: 0.875rem; color: var(--nx-text-primary) !important; text-decoration: none !important; } #nxc-member .nxc-health__tool:hover:not(#nx-shield):not(#nx-shield) { border-color: var(--nx-accent); } #nxc-member .nxc-health__tool .nxc-icon:not(#nx-shield):not(#nx-shield) { color: var(--nx-accent); } #nxc-member .nxc-health__signals a:not(#nx-shield):not(#nx-shield) { display: flex; justify-content: space-between; gap: 0.75rem; text-decoration: none !important; } #nxc-member .nxc-health__val:not(#nx-shield):not(#nx-shield) { font: 600 0.875rem/1.4 var(--nx-font-mono); } #nxc-member .nxc-health__val[data-tone="caution"]:not(#nx-shield):not(#nx-shield) { color: var(--nx-caution); } #nxc-member .nxc-health__val[data-tone="critical"]:not(#nx-shield):not(#nx-shield) { color: var(--nx-critical); } #nxc-member .nxc-health__val[data-tone="positive"]:not(#nx-shield):not(#nx-shield) { color: var(--nx-positive); } @media (min-width: 90em) { #nxc-member .nxc-layout:has(> .nxc-health[open]):not(#nx-shield):not(#nx-shield) { grid-template-columns: var(--nxc-rail-w) minmax(0, 1fr) 21rem; } #nxc-member .nxc-health[open] .nxc-health__toggle:not(#nx-shield):not(#nx-shield) { flex-direction: row; justify-content: flex-start; gap: 0.75rem; padding: 1rem; position: static; background: transparent; } #nxc-member .nxc-health[open] .nxc-health__panel:not(#nx-shield):not(#nx-shield) { position: sticky; inset-block-start: 1rem; inline-size: auto; border: 0; border-radius: 0; box-shadow: none; background: transparent; padding-block-start: 0; } } @media (max-width: 47.99em) { #nxc-member .nxc-layout:has(> .nxc-health):not(#nx-shield):not(#nx-shield) { grid-template-columns: minmax(0, 1fr); } #nxc-member .nxc-health:not(#nx-shield):not(#nx-shield) { position: fixed; z-index: 60; inset-block-end: 1rem; inset-inline-end: 1rem; border: 0; } #nxc-member .nxc-health__toggle:not(#nx-shield):not(#nx-shield) { position: static; inset-block-start: auto; flex-direction: row; gap: 0.5rem; padding: 0.375rem 0.75rem 0.375rem 0.375rem; border: 1px solid var(--nx-border-default); border-radius: var(--nx-radius-sm, 2px); background: var(--nx-bg-elevated); box-shadow: var(--nx-shadow-md); } #nxc-member .nxc-health__chev:not(#nx-shield):not(#nx-shield) { transform: rotate(90deg); } #nxc-member .nxc-health[open] .nxc-health__chev:not(#nx-shield):not(#nx-shield) { transform: rotate(-90deg); } #nxc-member .nxc-health__panel:not(#nx-shield):not(#nx-shield) { position: fixed; inset: auto 0 0 0; inline-size: auto; max-block-size: 75vh; max-block-size: 75dvh; border-radius: var(--nx-radius, 5px) var(--nx-radius, 5px) 0 0; } #nxc-member .nxc-health[open] .nxc-health__toggle:not(#nx-shield):not(#nx-shield) { position: fixed; inset-block-start: auto; inset-block-end: calc(75dvh + 0.5rem); inset-inline-end: 1rem; z-index: 61; } } @media (forced-colors: active) { #nxc-member .nxc-health__arc:not(#nx-shield):not(#nx-shield) { stroke: Highlight; } #nxc-member .nxc-health .nxc-meter2 > span:not(#nx-shield):not(#nx-shield) { background: Highlight; forced-color-adjust: none; } } /* 1.25.0 Central account (R-092 G1): the scope switch, the stat tiles and the section 11 row grid. The nx-row and nx-stat rules repeat the theme's so the rows hold on any theme; the theme's own rules win where they load. */ #nxc-member .nxc-central:not(#nx-shield):not(#nx-shield) { display: grid; gap: var(--nx-space-4, 16px); } #nxc-member .nxc-central__head:not(#nx-shield):not(#nx-shield) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nx-space-3, 12px); } #nxc-member .nxc-central__lede:not(#nx-shield):not(#nx-shield) { margin: 0; max-inline-size: 72ch; color: var(--nx-text-secondary); font-size: var(--nx-t-body, 14px); } #nxc-member .nxc-central__scopes:not(#nx-shield):not(#nx-shield) { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--nx-radius, 5px); background: var(--nx-surface-2, var(--nx-bg-surface)); } #nxc-member .nxc-central__scope:not(#nx-shield):not(#nx-shield) { display: inline-flex; align-items: center; min-block-size: 32px; padding-inline: 12px; border-radius: var(--nx-radius-sm, 2px); color: var(--nx-text-secondary); font-size: var(--nx-t-body, 14px); text-decoration: none; } #nxc-member .nxc-central__scope:hover:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-primary); } #nxc-member .nxc-central__scope[aria-current]:not(#nx-shield):not(#nx-shield) { background: var(--nx-bg-canvas); color: var(--nx-text-primary); font-weight: 600; box-shadow: inset 0 -2px 0 var(--nx-accent); } #nxc-member .nxc-central__scope:focus-visible:not(#nx-shield):not(#nx-shield) { outline: 2px solid var(--nx-accent); outline-offset: 2px; } #nxc-member .nxc-central__filter:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-central__note:not(#nx-shield):not(#nx-shield) { margin: 0; } #nxc-member .nxc-central__stats:not(#nx-shield):not(#nx-shield) { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 160px)); gap: var(--nx-space-3, 12px); margin: 0; padding: 0; list-style: none; } #nxc-member .nxc-central__stats .nx-stat:not(#nx-shield):not(#nx-shield) { display: grid; gap: 4px; min-block-size: 0; padding: 12px 16px; border: 1px solid var(--nx-border-hairline); border-radius: var(--nx-radius, 5px); background: var(--nx-bg-surface); } #nxc-member .nxc-central__stats .nx-stat__value:not(#nx-shield):not(#nx-shield) { font: 600 24px/1.1 var(--nx-font-sans, inherit); font-variant-numeric: tabular-nums; color: var(--nx-text-primary); } #nxc-member .nxc-central__stats .nx-stat__label:not(#nx-shield):not(#nx-shield) { font-size: var(--nx-t-meta, 12px); color: var(--nx-text-muted); } #nxc-member .nxc-central__rows:not(#nx-shield):not(#nx-shield) { margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--nx-border-hairline); } #nxc-member .nxc-central__rows .nx-row:not(#nx-shield):not(#nx-shield) { display: grid; grid-template-columns: var(--nx-row-kind, 88px) minmax(0, 1fr) auto var(--nx-row-due, 96px) auto; align-items: center; column-gap: var(--nx-space-3, 12px); min-block-size: var(--nx-row-min, 44px); padding-block: 8px; border-block-end: 1px solid var(--nx-border-hairline); font-size: var(--nx-t-body, 14px); line-height: 1.4; color: var(--nx-text-primary); } #nxc-member .nxc-central__rows .nx-row__kind:not(#nx-shield):not(#nx-shield) { display: inline-flex; align-items: center; min-inline-size: 0; color: var(--nx-text-secondary); font-size: var(--nx-t-meta, 12px); } #nxc-member .nxc-central__rows .nx-row__title:not(#nx-shield):not(#nx-shield) { min-inline-size: 0; font-size: var(--nx-t-row, 15px); font-weight: 500; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } #nxc-member .nxc-central__rows .nx-row__title a:not(#nx-shield):not(#nx-shield) { color: inherit; text-decoration: none; } #nxc-member .nxc-central__rows .nx-row__title a:hover:not(#nx-shield):not(#nx-shield) { text-decoration: underline; } #nxc-member .nxc-central__rows .nx-row__context:not(#nx-shield):not(#nx-shield) { min-inline-size: 0; color: var(--nx-text-muted); font-size: var(--nx-t-meta, 12px); } #nxc-member .nxc-central__rows .nx-row__due:not(#nx-shield):not(#nx-shield) { text-align: end; font-variant-numeric: tabular-nums; color: var(--nx-text-secondary); font-size: var(--nx-t-meta, 12px); } #nxc-member .nxc-central__rows .nx-row__action:not(#nx-shield):not(#nx-shield) { justify-self: end; white-space: nowrap; } #nxc-member .nxc-central__rows .nx-chip:not(#nx-shield):not(#nx-shield) { display: inline-flex; align-items: center; gap: 6px; block-size: 20px; padding: 0 6px; border: 0; border-radius: var(--nx-radius-sm, 2px); background: var(--nx-surface-2, var(--nx-bg-surface)); color: var(--nx-text-secondary); font-size: 11px; font-weight: 500; } #nxc-member .nxc-central__rows .nx-chip[data-mark]:not(#nx-shield):not(#nx-shield)::before { content: ""; inline-size: 6px; block-size: 6px; flex: none; border-radius: 2px; background: var(--nx-mark-attention, var(--nx-accent)); } #nxc-member .nxc-central__empty:not(#nx-shield):not(#nx-shield) { display: grid; justify-items: center; gap: 6px; padding: 48px 16px; border: 1px dashed var(--nx-border-hairline); border-radius: var(--nx-radius, 5px); text-align: center; color: var(--nx-text-secondary); } #nxc-member .nxc-central__empty p:not(#nx-shield):not(#nx-shield) { margin: 0; max-inline-size: 56ch; } #nxc-member .nxc-central__et:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-primary); font-size: var(--nx-t-card, 18px); font-weight: 600; } @media (max-width: 40rem) { #nxc-member .nxc-central__rows .nx-row:not(#nx-shield):not(#nx-shield) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kind due" "title title" "context action"; row-gap: 4px; } #nxc-member .nxc-central__rows .nx-row__kind:not(#nx-shield):not(#nx-shield) { grid-area: kind; } #nxc-member .nxc-central__rows .nx-row__title:not(#nx-shield):not(#nx-shield) { grid-area: title; } #nxc-member .nxc-central__rows .nx-row__context:not(#nx-shield):not(#nx-shield) { grid-area: context; } #nxc-member .nxc-central__rows .nx-row__due:not(#nx-shield):not(#nx-shield) { grid-area: due; } #nxc-member .nxc-central__rows .nx-row__action:not(#nx-shield):not(#nx-shield) { grid-area: action; } } @media (forced-colors: active) { #nxc-member .nxc-central__scope[aria-current]:not(#nx-shield):not(#nx-shield) { outline: 1px solid CanvasText; } } /* 1.25.0 Account rows (Needs you, portfolio lists) on the section 11 grid: kind 88 / title / context / due 96 / action. */ #nxc-member .nxc-row.nx-row:not(#nx-shield):not(#nx-shield) { display: grid; grid-template-columns: var(--nx-row-kind, 88px) minmax(0, 1fr) auto var(--nx-row-due, 96px) auto; align-items: center; column-gap: var(--nx-space-3, 12px); min-block-size: var(--nx-row-min, 44px); padding: 8px 18px; } #nxc-member .nxc-row.nx-row .nx-row__kind:not(#nx-shield):not(#nx-shield) { display: inline-flex; align-items: center; gap: 6px; min-inline-size: 0; color: var(--nx-text-secondary); font-size: var(--nx-t-meta, 12px); } #nxc-member .nxc-row.nx-row .nxc-row__icon:not(#nx-shield):not(#nx-shield) { inline-size: 24px; block-size: 24px; border: 0; } #nxc-member .nxc-row.nx-row .nxc-row__icon svg:not(#nx-shield):not(#nx-shield) { inline-size: 12px; block-size: 12px; } #nxc-member .nxc-row.nx-row .nxc-row__k:not(#nx-shield):not(#nx-shield) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #nxc-member .nxc-row.nx-row .nx-row__title:not(#nx-shield):not(#nx-shield) { display: grid; gap: 2px; overflow: visible; -webkit-line-clamp: unset; line-clamp: none; } #nxc-member .nxc-row.nx-row .nxc-row__t:not(#nx-shield):not(#nx-shield) { font-size: var(--nx-t-row, 15px); white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } #nxc-member .nxc-row.nx-row .nx-row__due:not(#nx-shield):not(#nx-shield) { text-align: end; font-variant-numeric: tabular-nums; } #nxc-member .nxc-row.nx-row .nxc-badge:not(#nx-shield):not(#nx-shield) { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--nx-text-secondary); font-size: var(--nx-t-meta, 12px); } #nxc-member .nxc-row.nx-row .nxc-badge[data-mark]:not(#nx-shield):not(#nx-shield)::before { content: ""; inline-size: 6px; block-size: 6px; flex: none; border-radius: 2px; background: var(--nx-mark-attention, var(--nx-accent)); } #nxc-member .nxc-row.nx-row .nx-row__action:not(#nx-shield):not(#nx-shield) { justify-self: end; white-space: nowrap; } #nxc-member .nxc-row.nx-row .nx-row__action:empty:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-row.nx-row .nx-row__context:empty:not(#nx-shield):not(#nx-shield) { min-inline-size: 0; } @media (max-width: 40rem) { #nxc-member .nxc-row.nx-row:not(#nx-shield):not(#nx-shield) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kind due" "title title" "context action"; row-gap: 4px; } #nxc-member .nxc-row.nx-row .nx-row__kind:not(#nx-shield):not(#nx-shield) { grid-area: kind; } #nxc-member .nxc-row.nx-row .nx-row__title:not(#nx-shield):not(#nx-shield) { grid-area: title; } #nxc-member .nxc-row.nx-row .nx-row__context:not(#nx-shield):not(#nx-shield) { grid-area: context; } #nxc-member .nxc-row.nx-row .nx-row__due:not(#nx-shield):not(#nx-shield) { grid-area: due; } #nxc-member .nxc-row.nx-row .nx-row__action:not(#nx-shield):not(#nx-shield) { grid-area: action; } #nxc-member .nxc-row.nx-row .nxc-badge:not(#nx-shield):not(#nx-shield) { margin: 0; } }