/* nexus-community account shell (1.7.0): the approved design (owner 2026-10-29, docs/integrations/wordpress/app/ approved-design: Main, Decide, Calendar, Kit) for every member tab. Loaded after member-app.css, scoped under #nxc-member. Neutral surfaces from the kit tokens (--nx-*); the one accent is the pastel gradient (lavender, sky, mint, peach: --nxc-g1..g4, the board's values, light and dark) and it is used ONLY on lines, icons, sparklines, chart strokes, progress and the active rule, never behind text. Logical properties, no round shapes. */ /* ---- tokens -------------------------------------------------------------------------------------------------------- */ #nxc-member:not(#nx-shield):not(#nx-shield) { --nxc-g1: #c4b5fd; --nxc-g2: #93c5fd; --nxc-g3: #86efac; --nxc-g4: #fdba74; --nxc-grad: linear-gradient(90deg, var(--nxc-g1), var(--nxc-g2), var(--nxc-g3)); --nxc-grad-v: linear-gradient(180deg, var(--nxc-g1), var(--nxc-g2) 60%, var(--nxc-g3)); --nxc-rail-w: 18rem; /* the board's 248px rail plus the dock column at its start */ --nxc-dock-zone: 4.75rem; /* the bottom-start dock collapsed to its handle (50px) at 12px from the edge, and a gap */ --nxc-r: var(--nx-radius, 5px); --nxc-r-sm: var(--nx-radius-sm, 2px); /* 1.24.1 bar section 9: 5px or 2px corners, from the estate tokens */ } :root[data-theme="light"] #nxc-member[data-theme="auto"]:not(#nx-shield):not(#nx-shield), #nxc-member[data-theme="light"]:not(#nx-shield):not(#nx-shield) { --nxc-g1: #8b5cf6; --nxc-g2: #3b82f6; --nxc-g3: #10b981; --nxc-g4: #f97316; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) #nxc-member[data-theme="auto"]:not(#nx-shield):not(#nx-shield) { --nxc-g1: #8b5cf6; --nxc-g2: #3b82f6; --nxc-g3: #10b981; --nxc-g4: #f97316; } } #nxc-member .nxc-defs:not(#nx-shield):not(#nx-shield) { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; } #nxc-member .nxc-gi--p:not(#nx-shield):not(#nx-shield) { stroke: url(#nxc-gp); } #nxc-member .nxc-gi--w:not(#nx-shield):not(#nx-shield) { stroke: url(#nxc-gw); } /* ---- type ---------------------------------------------------------------------------------------------------------- */ #nxc-member .nxc-eb:not(#nx-shield):not(#nx-shield) { margin: 0; font: 500 0.6875rem/1.3 var(--nx-font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--nx-text-muted); } #nxc-member .nf-ui-meta:not(#nx-shield):not(#nx-shield) { font-family: var(--nx-font-mono); font-size: 0.75rem; color: var(--nx-text-muted); } #nxc-member :is(h1, h2, h3, h4):focus:not(#nx-shield):not(#nx-shield) { outline: none; } #nxc-member .nxc-main:focus:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-main:focus-visible:not(#nx-shield):not(#nx-shield) { outline: none; } #nxc-member :focus:not(:focus-visible):not(#nx-shield):not(#nx-shield) { outline: none; } #nxc-member :focus-visible:not(#nx-shield):not(#nx-shield) { outline: 2px solid var(--nx-focus); outline-offset: 2px; } /* ---- layout: one grouped rail and the content to the edge -------------------------------------------------------- */ #nxc-member:not(#nx-shield):not(#nx-shield) { padding-block-end: var(--nxc-dock-zone); } #nxc-member .nxc-layout:not(#nx-shield):not(#nx-shield) { display: grid; grid-template-columns: var(--nxc-rail-w) minmax(0, 1fr); gap: 0; margin: 0 calc(-1 * var(--nxc-gut)); border: 0; } #nxc-member .nxc-main:not(#nx-shield):not(#nx-shield) { min-inline-size: 0; display: block; padding: 1.75rem var(--nxc-gut) 2rem clamp(1rem, 2.5vw, 2.5rem); } #nxc-member .nxc-main > * + *:not(#nx-shield):not(#nx-shield) { margin-block-start: 1.5rem; } /* ---- the account menu (approved board "Main", rail) ---------------------------------------------------------------- */ #nxc-member .nxc-nav:not(#nx-shield):not(#nx-shield) { position: sticky; inset-block-start: 0; align-self: start; box-sizing: border-box; max-block-size: calc(100dvh - var(--nxc-dock-zone)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; /* The bottom-start dock (50px at 12px) has its own column at the rail's start, so no item is ever under it. */ padding: 1.25rem 0.75rem 1.5rem max(4.5rem, calc(var(--nxc-gut) - 0.75rem)); border-inline-end: 1px solid var(--nx-border-hairline); } #nxc-member .nxc-nav ul:not(#nx-shield):not(#nx-shield) { margin: 0; padding: 0; list-style: none; } #nxc-member .nxc-nav__find:not(#nx-shield):not(#nx-shield) { position: relative; display: block; margin: 0 0 0.75rem; } #nxc-member .nxc-nav__find .nxc-icon:not(#nx-shield):not(#nx-shield) { position: absolute; inset-inline-start: 0.625rem; inset-block-start: 50%; transform: translateY(-50%); color: var(--nx-text-muted); pointer-events: none; } #nxc-member .nxc-nav__find input:not(#nx-shield):not(#nx-shield) { box-sizing: border-box; inline-size: 100%; block-size: 2rem; padding: 0 0.625rem 0 2rem; border: 1px solid var(--nx-border-hairline); border-radius: var(--nxc-r-sm); background: var(--nx-bg-muted); color: var(--nx-text-primary); font: 0.8125rem/1 var(--nx-font-sans); } #nxc-member .nxc-nav__find input:not(#nx-shield):not(#nx-shield)::placeholder { color: var(--nx-text-muted); } #nxc-member .nxc-nav__group + .nxc-nav__group:not(#nx-shield):not(#nx-shield) { margin-block-start: 0.875rem; } #nxc-member .nxc-nav__cat:not(#nx-shield):not(#nx-shield) { margin: 0; font: inherit; } #nxc-member .nxc-nav__cat button:not(#nx-shield):not(#nx-shield) { display: flex; align-items: center; gap: 0.5rem; inline-size: 100%; min-block-size: 1.75rem; padding: 0 0.75rem; margin: 0; border: 0; border-radius: var(--nxc-r-sm); background: transparent; cursor: pointer; text-align: start; font: 500 0.6875rem/1.3 var(--nx-font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--nx-text-muted); } #nxc-member .nxc-nav__cat button:hover:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-primary); } #nxc-member .nxc-nav__catlabel:not(#nx-shield):not(#nx-shield) { flex: 1; min-inline-size: 0; } #nxc-member .nxc-nav__catcount:not(#nx-shield):not(#nx-shield) { font-variant-numeric: tabular-nums; letter-spacing: 0; } #nxc-member .nxc-nav__cat .nxc-icon:not(#nx-shield):not(#nx-shield) { flex: none; transition: transform var(--nx-motion-fast) var(--nx-ease-standard); } #nxc-member .nxc-nav__cat button[aria-expanded="false"] .nxc-icon:not(#nx-shield):not(#nx-shield) { transform: rotate(-90deg); } #nxc-member .nxc-nav__item:not(#nx-shield):not(#nx-shield) { position: relative; display: flex; align-items: center; gap: 0.625rem; min-block-size: 2.125rem; padding: 0 0.75rem; margin-block: 1px; border-radius: var(--nxc-r-sm); color: var(--nx-text-secondary) !important; text-decoration: none !important; font-size: 0.875rem; line-height: 1.25; } #nxc-member .nxc-nav__item:hover:not(#nx-shield):not(#nx-shield) { background: var(--nx-bg-hover); color: var(--nx-text-primary) !important; } #nxc-member .nxc-nav__item .nxc-icon:not(#nx-shield):not(#nx-shield) { flex: none; inline-size: 1rem; block-size: 1rem; color: var(--nx-text-muted); } #nxc-member .nxc-nav__item[aria-current="page"]:not(#nx-shield):not(#nx-shield) { background: var(--nx-bg-muted); color: var(--nx-text-primary) !important; font-weight: 500; } #nxc-member .nxc-nav__item[aria-current="page"]:not(#nx-shield):not(#nx-shield)::before { content: ""; position: absolute; inset-block: 0.375rem; inset-inline-start: 0; inline-size: 2px; border-radius: var(--nx-radius-sm, 2px); background: var(--nxc-grad-v); } #nxc-member .nxc-nav__label:not(#nx-shield):not(#nx-shield) { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #nxc-member .nxc-nav__count:not(#nx-shield):not(#nx-shield) { flex: none; font: 0.75rem/1 var(--nx-font-mono); font-variant-numeric: tabular-nums; color: var(--nx-text-muted); } #nxc-member .nxc-nav__toggle:not(#nx-shield):not(#nx-shield) { display: none; } #nxc-member .nxc-nav__none:not(#nx-shield):not(#nx-shield) { padding: 0.5rem 0.75rem; } /* ---- page header: eyebrow, title, one-line purpose, ONE primary action; sub-sections as underline tabs ------------ */ #nxc-member .nxc-page:not(#nx-shield):not(#nx-shield) { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.5rem; margin: 0; } #nxc-member .nxc-page__text:not(#nx-shield):not(#nx-shield) { flex: 1 1 22rem; min-inline-size: 0; } #nxc-member .nxc-page__title:not(#nx-shield):not(#nx-shield) { margin: 0.375rem 0 0.25rem; font-size: 1.75rem; line-height: 1.2; font-weight: 500; letter-spacing: -0.01em; color: var(--nx-text-primary); } #nxc-member .nxc-page__lede:not(#nx-shield):not(#nx-shield) { margin: 0; max-inline-size: 70ch; color: var(--nx-text-secondary); font-size: 0.875rem; line-height: 1.5; } #nxc-member .nxc-page__actions:not(#nx-shield):not(#nx-shield) { display: flex; flex-wrap: wrap; gap: 0.5rem; } #nxc-member .nxc-page__actions .nf-ui-btn:not(#nx-shield):not(#nx-shield) { min-block-size: 2.25rem; gap: 0.5rem; border-radius: var(--nxc-r-sm); text-decoration: none !important; } #nxc-member .nxc-tabs:not(#nx-shield):not(#nx-shield) { flex-basis: 100%; border-block-end: 1px solid var(--nx-border-hairline); } #nxc-member .nxc-tabs ul:not(#nx-shield):not(#nx-shield) { display: flex; gap: 1.375rem; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; } #nxc-member .nxc-tabs ul:not(#nx-shield):not(#nx-shield)::-webkit-scrollbar { display: none; } #nxc-member .nxc-tabs__item:not(#nx-shield):not(#nx-shield) { display: inline-flex; align-items: center; gap: 0.375rem; min-block-size: 2.5rem; border-block-end: 2px solid transparent; margin-block-end: -1px; color: var(--nx-text-secondary) !important; white-space: nowrap; text-decoration: none !important; font-size: 0.875rem; } #nxc-member .nxc-tabs__item:hover:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-primary) !important; } #nxc-member .nxc-tabs__item[aria-current="page"]:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-primary) !important; border-block-end-color: var(--nx-text-primary); font-weight: 500; } #nxc-member .nxc-tabs__n:not(#nx-shield):not(#nx-shield) { font: 0.75rem/1 var(--nx-font-mono); color: var(--nx-text-muted); } #nxc-member .nxc-tabs--sub ul:not(#nx-shield):not(#nx-shield) { gap: 1.125rem; } #nxc-member .nxc-tabs--sub .nxc-tabs__item:not(#nx-shield):not(#nx-shield) { min-block-size: 2.25rem; font-size: 0.8125rem; } /* ---- the identity band: actions are secondary (the view's one primary is in the page header) -------------------- */ #nxc-member .nxc-namerow:not(#nx-shield):not(#nx-shield) { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; } #nxc-member .nxc-verify:not(#nx-shield):not(#nx-shield) { position: relative; display: inline-flex; } #nxc-member .nxc-verify__mark:not(#nx-shield):not(#nx-shield) { display: inline-flex; align-items: center; gap: 0.375rem; min-block-size: 1.75rem; padding: 0 0.5rem; border: 1px solid var(--nx-border-hairline-strong); border-radius: var(--nxc-r-sm); background: color-mix(in srgb, var(--nx-bg-surface) 80%, transparent); font: 500 0.75rem/1 var(--nx-font-sans); color: var(--nx-text-primary); cursor: help; } #nxc-member .nxc-verify[data-level="0"] .nxc-verify__mark:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-muted); } #nxc-member .nxc-verify__pips:not(#nx-shield):not(#nx-shield) { display: inline-flex; gap: 2px; margin-inline-start: 0.125rem; } #nxc-member .nxc-verify__pips i:not(#nx-shield):not(#nx-shield) { inline-size: 0.375rem; block-size: 0.5rem; border-radius: var(--nx-radius-sm, 2px); background: var(--nx-border-hairline-strong); } #nxc-member .nxc-verify__pips i.on:not(#nx-shield):not(#nx-shield) { background: var(--nxc-grad-v); } #nxc-member .nxc-verify .nxc-tip__bubble:not(#nx-shield):not(#nx-shield) { inset-block-start: calc(100% + 0.5rem); } #nxc-member .nxc-verify:hover .nxc-tip__bubble:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-verify:focus-within .nxc-tip__bubble:not(#nx-shield):not(#nx-shield) { opacity: 1; visibility: visible; } /* ---- stat tiles (approved board "Kit"): one band of tiles divided by hairlines ----------------------------------- */ #nxc-member .nxc-kpis:not(#nx-shield):not(#nx-shield) { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1px; background: var(--nx-border-hairline); border-block: 1px solid var(--nx-border-hairline); } #nxc-member .nxc-kpi:not(#nx-shield):not(#nx-shield) { position: relative; display: block; padding: 0; background: var(--nx-bg-surface); min-inline-size: 0; } #nxc-member .nxc-kpi__link:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-kpi:not([data-interactive]):not(#nx-shield):not(#nx-shield) { display: flex; flex-direction: column; gap: 0.375rem; padding: 1rem 1.125rem; color: var(--nx-text-primary) !important; text-decoration: none !important; } #nxc-member .nxc-kpi[data-interactive]:not(#nx-shield):not(#nx-shield) { display: block; } #nxc-member .nxc-kpi__link:hover:not(#nx-shield):not(#nx-shield) { background: var(--nx-bg-hover); } #nxc-member .nxc-kpi__top:not(#nx-shield):not(#nx-shield) { display: flex; align-items: center; gap: 0.375rem; padding-inline-end: 1.5rem; } #nxc-member .nxc-kpi > .nxc-tip:not(#nx-shield):not(#nx-shield) { position: absolute; inset-block-start: 0.875rem; inset-inline-end: 0.875rem; } #nxc-member .nxc-kpi__mid:not(#nx-shield):not(#nx-shield) { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem; } #nxc-member .nxc-kpi__value:not(#nx-shield):not(#nx-shield) { font: 500 1.875rem/1 var(--nx-font-mono); font-variant-numeric: tabular-nums; color: var(--nx-text-primary); overflow-wrap: normal; white-space: nowrap; flex: none; } /* 1.10.0: a number never wraps; six tiles sit three by two so each keeps room for its value, line and meta. */ #nxc-member .nxc-kpi__meta:not(#nx-shield):not(#nx-shield) { min-inline-size: 0; white-space: normal; overflow-wrap: anywhere; } /* a note never truncates (INFORMATION_ARCHITECTURE 3) */ @media (min-width: 64em) { #nxc-member .nxc-kpis:has(> .nxc-kpi:nth-child(6)):not(#nx-shield):not(#nx-shield) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } #nxc-member .nxc-kpi__value.is-empty:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-muted); } #nxc-member .nxc-kpi__spark:not(#nx-shield):not(#nx-shield) { flex: none; display: block; } #nxc-member .nxc-spark2:not(#nx-shield):not(#nx-shield) { display: block; inline-size: 6.875rem; max-inline-size: none; block-size: 2rem; overflow: visible; } #nxc-member .nxc-spark2__line:not(#nx-shield):not(#nx-shield) { stroke: url(#nxc-gp); stroke-width: 1.6; } #nxc-member .nxc-spark2__end:not(#nx-shield):not(#nx-shield) { fill: var(--nxc-g3); } #nxc-member .nxc-kpi__foot:not(#nx-shield):not(#nx-shield) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; } #nxc-member .nxc-kpi__meta:not(#nx-shield):not(#nx-shield) { flex: 1 1 10rem; min-inline-size: 0; color: var(--nx-text-secondary); white-space: normal; overflow-wrap: anywhere; } #nxc-member .nxc-kpi__cta:not(#nx-shield):not(#nx-shield) { flex: none; font: 0.75rem/1 var(--nx-font-mono); color: var(--nx-text-primary); } #nxc-member .nxc-head > .nxc-kpis .nxc-kpi:first-child .nxc-kpi__link:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-head > .nxc-kpis .nxc-kpi:first-child:not([data-interactive]):not(#nx-shield):not(#nx-shield) { padding-inline-start: max(var(--nxc-gut), var(--nxc-dock-inline)); } #nxc-member .nxc-head > .nxc-kpis .nxc-kpi:first-child:not(#nx-shield):not(#nx-shield) { padding-inline-start: 0 !important; } /* ---- tooltip: a small mark; the help shows on hover and keyboard focus; Escape hides it (community-ui.js) --------- */ #nxc-member .nxc-tip:not(#nx-shield):not(#nx-shield) { position: relative; display: inline-flex; vertical-align: middle; margin-inline-start: 0.25rem; } /* a real button with a 24px target (WCAG 2.5.8; the native themes gate, 2026-11-02): the box itself, not a pseudo-element */ #nxc-member .nxc-tip__mark:not(#nx-shield):not(#nx-shield) { display: inline-grid; place-items: center; box-sizing: border-box; inline-size: 1.5rem; block-size: 1.5rem; min-inline-size: 24px; min-block-size: 24px; margin: 0; padding: 0; border: 0; border-radius: var(--nxc-r-sm); background: transparent; color: var(--nx-text-muted); font: inherit; line-height: 1; cursor: pointer; } #nxc-member .nxc-tip__mark:focus-visible:not(#nx-shield):not(#nx-shield) { outline: 2px solid var(--nx-focus, currentColor); outline-offset: 2px; } #nxc-member .nxc-tip__mark:hover:not(#nx-shield):not(#nx-shield) { background: var(--nx-bg-hover); color: var(--nx-text-primary); } #nxc-member .nxc-tip__bubble:not(#nx-shield):not(#nx-shield) { position: absolute; z-index: 30; inset-block-end: calc(100% + 0.5rem); inset-inline-start: 50%; transform: translateX(-50%); inline-size: max-content; max-inline-size: min(18rem, 80vw); padding: 0.5rem 0.625rem; border: 1px solid var(--nx-border-hairline-strong); border-radius: var(--nxc-r-sm); background: var(--nx-bg-elevated); box-shadow: var(--nx-shadow-md); font: 400 0.8125rem/1.4 var(--nx-font-sans); letter-spacing: normal; text-transform: none; color: var(--nx-text-primary); text-align: start; white-space: normal; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--nx-motion-fast) var(--nx-ease-standard); } #nxc-member .nxc-tip:hover .nxc-tip__bubble:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-tip:focus-within .nxc-tip__bubble:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-tip.is-open .nxc-tip__bubble:not(#nx-shield):not(#nx-shield) { opacity: 1; visibility: visible; } #nxc-member .nxc-tip.is-hushed .nxc-tip__bubble:not(#nx-shield):not(#nx-shield) { opacity: 0; visibility: hidden; } #nxc-member .nxc-kpi .nxc-tip__bubble:not(#nx-shield):not(#nx-shield) { inset-inline: auto 0; transform: none; } /* ---- cards and panels ---------------------------------------------------------------------------------------------- */ #nxc-member .nxc-dash:not(#nx-shield):not(#nx-shield) { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem; } #nxc-member .nxc-panel:not(#nx-shield):not(#nx-shield) { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 0; padding: 0; min-inline-size: 0; border: 1px solid var(--nx-border-hairline); border-radius: var(--nxc-r); background: var(--nx-bg-surface); box-shadow: none; overflow: hidden; } @media (min-width: 1100px) { #nxc-member .nxc-panel[data-span="4"]:not(#nx-shield):not(#nx-shield) { grid-column: span 4; } #nxc-member .nxc-panel[data-span="6"]:not(#nx-shield):not(#nx-shield) { grid-column: span 6; } #nxc-member .nxc-panel[data-span="8"]:not(#nx-shield):not(#nx-shield) { grid-column: span 8; } } #nxc-member .nxc-panel__head:not(#nx-shield):not(#nx-shield) { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.125rem 0.75rem; } #nxc-member .nxc-panel__icon:not(#nx-shield):not(#nx-shield) { inline-size: 2rem; block-size: 2rem; border: 1px solid var(--nx-border-hairline); border-radius: var(--nxc-r); color: var(--nx-text-secondary); } #nxc-member .nxc-panel__icon .nxc-icon:not(#nx-shield):not(#nx-shield) { stroke: url(#nxc-gp); } #nxc-member .nxc-panel__titles .nf-ui-eyebrow:not(#nx-shield):not(#nx-shield) { margin: 0; } #nxc-member .nxc-panel__titles .nf-ui-title:not(#nx-shield):not(#nx-shield) { margin: 0.25rem 0 0; font-size: 1.0625rem; font-weight: 500; line-height: 1.3; } #nxc-member .nxc-panel__link:not(#nx-shield):not(#nx-shield) { min-block-size: 2rem; padding: 0 0.625rem; border-radius: var(--nxc-r-sm); font-size: 0.8125rem; color: var(--nx-text-primary) !important; text-decoration: none !important; } #nxc-member .nxc-panel__link:hover:not(#nx-shield):not(#nx-shield) { background: var(--nx-bg-hover); } #nxc-member .nxc-panel__body:not(#nx-shield):not(#nx-shield) { padding: 0 1.125rem 1.125rem; gap: 0.875rem; } #nxc-member .nxc-panel__body > .nxc-rows2:not(#nx-shield):not(#nx-shield) { margin-inline: -1.125rem; margin-block-end: -1.125rem; } /* rows (approved board "Main", Needs you): hairline divider, hover background, the action on the row */ #nxc-member .nxc-rows2:not(#nx-shield):not(#nx-shield) { margin: 0; padding: 0; list-style: none; } #nxc-member .nxc-row:not(#nx-shield):not(#nx-shield) { display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem 1.125rem; border-block-start: 1px solid var(--nx-border-hairline); } #nxc-member .nxc-row:hover:not(#nx-shield):not(#nx-shield) { background: var(--nx-bg-hover); } #nxc-member .nxc-row__icon:not(#nx-shield):not(#nx-shield) { flex: none; display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border: 1px solid var(--nx-border-hairline); border-radius: var(--nxc-r); } #nxc-member .nxc-row__main:not(#nx-shield):not(#nx-shield) { flex: 1; min-inline-size: 0; display: grid; gap: 0.125rem; } #nxc-member .nxc-row__t:not(#nx-shield):not(#nx-shield) { font-weight: 500; color: var(--nx-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #nxc-member .nxc-row__m:not(#nx-shield):not(#nx-shield) { font: 0.75rem/1.4 var(--nx-font-mono); color: var(--nx-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #nxc-member .nxc-row .nf-ui-btn:not(#nx-shield):not(#nx-shield) { flex: none; min-block-size: 2rem; text-decoration: none !important; } #nxc-member .nxc-badge:not(#nx-shield):not(#nx-shield), #nxc-member .nf-ui-badge:not(#nx-shield):not(#nx-shield) { display: inline-flex; align-items: center; gap: 0.375rem; block-size: 1.25rem; min-block-size: 1.25rem; padding: 0 0.4375rem; border: 1px solid var(--nx-border-hairline-strong); border-radius: var(--nxc-r-sm); font: 500 0.65625rem/1 var(--nx-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--nx-text-secondary); white-space: nowrap; flex: none; } #nxc-member .nf-ui-badge[data-tone]:not(#nx-shield):not(#nx-shield)::before { inline-size: 0.375rem; block-size: 0.375rem; border-radius: var(--nx-radius-sm, 2px); } #nxc-member .nf-ui-badge[data-tone]:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-secondary); } #nxc-member .nf-ui-badge[data-tone="positive"]:not(#nx-shield):not(#nx-shield)::before { background: var(--nx-positive); } #nxc-member .nf-ui-badge[data-tone="caution"]:not(#nx-shield):not(#nx-shield)::before { background: var(--nx-caution); } #nxc-member .nf-ui-badge[data-tone="critical"]:not(#nx-shield):not(#nx-shield)::before { background: var(--nx-critical); } #nxc-member .nf-ui-badge[data-tone="info"]:not(#nx-shield):not(#nx-shield)::before { background: var(--nxc-g2); } #nxc-member .nf-ui-badge[data-tone="neutral"]:not(#nx-shield):not(#nx-shield)::before { background: var(--nx-text-muted); } #nxc-member .nxc-dot:not(#nx-shield):not(#nx-shield) { display: inline-block; flex: none; inline-size: 0.375rem; block-size: 0.375rem; border-radius: var(--nx-radius-sm, 2px); background: var(--nx-text-muted); } #nxc-member .nxc-dot[data-tone="positive"]:not(#nx-shield):not(#nx-shield) { background: var(--nx-positive); } #nxc-member .nxc-dot[data-tone="caution"]:not(#nx-shield):not(#nx-shield) { background: var(--nx-caution); } #nxc-member .nxc-dot[data-tone="critical"]:not(#nx-shield):not(#nx-shield) { background: var(--nx-critical); } #nxc-member .nxc-dot[data-tone="info"]:not(#nx-shield):not(#nx-shield) { background: var(--nxc-g2); } /* this week: a day tile, then the title on a timeline with a coloured mark */ #nxc-member .nxc-week:not(#nx-shield):not(#nx-shield) { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.25rem; } #nxc-member .nxc-week li:not(#nx-shield):not(#nx-shield) { display: flex; gap: 0.875rem; padding-block: 0.5rem; } #nxc-member .nxc-week__day:not(#nx-shield):not(#nx-shield) { flex: none; inline-size: 2.75rem; display: grid; justify-items: center; padding-block: 0.25rem; border: 1px solid var(--nx-border-hairline); border-radius: var(--nxc-r); } #nxc-member .nxc-week__day .nxc-eb:not(#nx-shield):not(#nx-shield) { font-size: 0.625rem; letter-spacing: 0.1em; } #nxc-member .nxc-week__n:not(#nx-shield):not(#nx-shield) { font: 500 1.125rem/1.2 var(--nx-font-mono); } #nxc-member .nxc-week__main:not(#nx-shield):not(#nx-shield) { position: relative; display: grid; align-content: start; gap: 0.125rem; min-inline-size: 0; padding-inline-start: 0.875rem; border-inline-start: 1px solid var(--nx-border-hairline); } #nxc-member .nxc-week__main:not(#nx-shield):not(#nx-shield)::before { content: ""; position: absolute; inset-inline-start: -4px; inset-block-start: 0.375rem; inline-size: 7px; block-size: 7px; border-radius: var(--nx-radius-sm, 2px); background: var(--nxc-g2); } #nxc-member .nxc-week__main[data-tone="g1"]:not(#nx-shield):not(#nx-shield)::before { background: var(--nxc-g1); } #nxc-member .nxc-week__main[data-tone="g3"]:not(#nx-shield):not(#nx-shield)::before { background: var(--nxc-g3); } #nxc-member .nxc-week__main[data-tone="g4"]:not(#nx-shield):not(#nx-shield)::before { background: var(--nxc-g4); } #nxc-member .nxc-week .nxc-row__t:not(#nx-shield):not(#nx-shield) { white-space: normal; } /* stats inside a card: label over value, no boxes (boxes are for inputs) */ #nxc-member .nxc-mini:not(#nx-shield):not(#nx-shield) { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; margin: 0; } #nxc-member .nxc-mini > div:not(#nx-shield):not(#nx-shield) { padding: 0; border: 0; display: flex; flex-direction: column-reverse; gap: 0.125rem; } #nxc-member .nxc-mini dd:not(#nx-shield):not(#nx-shield) { font: 500 1.375rem/1.1 var(--nx-font-mono); } /* progress and charts in the gradient */ #nxc-member .nxc-meter2:not(#nx-shield):not(#nx-shield) { block-size: 4px; border-radius: var(--nx-radius-sm, 2px); background: var(--nx-bg-muted); } #nxc-member .nxc-meter2 > span:not(#nx-shield):not(#nx-shield) { background: var(--nxc-grad); } #nxc-member .nxc-meter:not(#nx-shield):not(#nx-shield) { block-size: 4px; border-radius: var(--nx-radius-sm, 2px); background: var(--nx-bg-muted); overflow: hidden; } #nxc-member .nxc-meter > span:not(#nx-shield):not(#nx-shield) { display: block; block-size: 100%; background: var(--nxc-grad); } #nxc-member .nxc-chart__bar:not(#nx-shield):not(#nx-shield) { fill: url(#nxc-gv); opacity: 0.55; } #nxc-member .nxc-chart__bar.is-last:not(#nx-shield):not(#nx-shield) { fill: url(#nxc-gv); opacity: 1; } #nxc-member .nxc-chart__bar.is-zero:not(#nx-shield):not(#nx-shield) { fill: var(--nx-border-hairline-strong); opacity: 1; } #nxc-member .nxc-stack__seg[data-k="1"]:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-stack__mark[data-k="1"]:not(#nx-shield):not(#nx-shield) { background: var(--nxc-g1); } #nxc-member .nxc-stack__seg[data-k="2"]:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-stack__mark[data-k="2"]:not(#nx-shield):not(#nx-shield) { background: var(--nxc-g2); } #nxc-member .nxc-stack__seg[data-k="3"]:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-stack__mark[data-k="3"]:not(#nx-shield):not(#nx-shield) { background: var(--nxc-g3); } #nxc-member .nxc-stack__seg[data-k="4"]:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-stack__mark[data-k="4"]:not(#nx-shield):not(#nx-shield) { background: var(--nxc-g4); } #nxc-member .nxc-stack__bar:not(#nx-shield):not(#nx-shield) { block-size: 4px; border-radius: var(--nx-radius-sm, 2px); } #nxc-member .nxc-next:not(#nx-shield):not(#nx-shield) { padding: 0; background: transparent; border-radius: 0; } /* empty state (approved board "Kit"): a gradient mark, what is missing, one sentence, the action. No dashed box. */ #nxc-member .nxc-empty:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-main > .nxc-empty:not(#nx-shield):not(#nx-shield) { display: grid; justify-items: start; gap: 0.25rem; padding: 0.5rem 0 0.25rem; border: 0; text-align: start; background: transparent; } #nxc-member .nxc-body > .nxc-empty:not(#nx-shield):not(#nx-shield) { padding: 1.5rem 1.375rem; border: 1px solid var(--nx-border-hairline); border-radius: var(--nxc-r); } #nxc-member .nxc-empty > .nxc-icon:not(#nx-shield):not(#nx-shield) { margin-block-end: 0.375rem; } #nxc-member .nxc-empty p:not(#nx-shield):not(#nx-shield) { margin: 0; } #nxc-member .nxc-empty__t:not(#nx-shield):not(#nx-shield) { font-weight: 500; color: var(--nx-text-primary); } #nxc-member .nxc-empty__x:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-secondary); font-size: 0.8125rem; max-inline-size: 60ch; } #nxc-member .nxc-empty p:last-child:not(.nxc-empty__x):not(#nx-shield):not(#nx-shield) { margin-block-start: 0.625rem; } /* "How this works" (approved board "Main"): folded, one line closed, a grid of three points open */ #nxc-member .nxc-how:not(#nx-shield):not(#nx-shield) { border: 1px solid var(--nx-border-hairline); border-radius: var(--nxc-r); background: var(--nx-bg-surface); } #nxc-member .nxc-how > summary:not(#nx-shield):not(#nx-shield) { display: flex; align-items: center; gap: 0.625rem; min-block-size: 2.75rem; padding: 0 1.125rem; cursor: pointer; list-style: none; } #nxc-member .nxc-how > summary:not(#nx-shield):not(#nx-shield)::-webkit-details-marker { display: none; } #nxc-member .nxc-how__t:not(#nx-shield):not(#nx-shield) { font-weight: 500; } #nxc-member .nxc-how__m:not(#nx-shield):not(#nx-shield) { margin-inline-start: auto; } #nxc-member .nxc-how > summary > .nxc-icon:last-child:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-muted); transition: transform var(--nx-motion-fast) var(--nx-ease-standard); } #nxc-member .nxc-how[open] > summary > .nxc-icon:last-child:not(#nx-shield):not(#nx-shield) { transform: rotate(90deg); } #nxc-member .nxc-how__body:not(#nx-shield):not(#nx-shield) { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.125rem; padding: 0.25rem 1.125rem 1.125rem; color: var(--nx-text-secondary); font-size: 0.8125rem; line-height: 1.5; } #nxc-member .nxc-how__body p:not(#nx-shield):not(#nx-shield) { margin: 0; } #nxc-member .nxc-how__body strong:not(#nx-shield):not(#nx-shield) { display: block; margin-block-end: 0.125rem; color: var(--nx-text-primary); font-weight: 500; } /* 1.15.0: the guide at the end of every account page (Ui\PageGuide). Open on a first visit, foldable, remembered. */ #nxc-member .nxc-pg:not(#nx-shield):not(#nx-shield) { margin-block-start: 2.5rem; } #nxc-member .nxc-pg__d:not(#nx-shield):not(#nx-shield) { border: 1px solid var(--nx-border-hairline); border-radius: var(--nxc-r); background: var(--nx-bg-surface); } #nxc-member .nxc-pg__s:not(#nx-shield):not(#nx-shield) { display: flex; align-items: center; gap: 0.625rem; min-block-size: 2.75rem; padding: 0.5rem 1rem; cursor: pointer; list-style: none; } #nxc-member .nxc-pg__s:not(#nx-shield):not(#nx-shield)::-webkit-details-marker { display: none; } #nxc-member .nxc-pg__s:focus-visible:not(#nx-shield):not(#nx-shield) { outline: 2px solid var(--nx-focus, currentColor); outline-offset: 2px; } #nxc-member .nxc-pg__eb:not(#nx-shield):not(#nx-shield) { font: 0.6875rem/1.4 var(--nx-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--nx-text-muted); } #nxc-member .nxc-pg__t:not(#nx-shield):not(#nx-shield) { margin: 0; min-inline-size: 0; font-size: 0.9375rem; line-height: 1.35; font-weight: 500; color: var(--nx-text-primary); } #nxc-member .nxc-pg__m:not(#nx-shield):not(#nx-shield) { margin-inline-start: auto; white-space: nowrap; } #nxc-member .nxc-pg__s > .nxc-icon:last-child:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-muted); transition: transform var(--nx-motion-fast) var(--nx-ease-standard); } #nxc-member .nxc-pg__d[open] > .nxc-pg__s > .nxc-icon:last-child:not(#nx-shield):not(#nx-shield) { transform: rotate(90deg); } #nxc-member .nxc-pg__body:not(#nx-shield):not(#nx-shield) { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.5rem 2rem; padding: 0.5rem 1.25rem 1.25rem; border-block-start: 1px solid var(--nx-border-hairline); color: var(--nx-text-secondary); font-size: 0.875rem; line-height: 1.6; } #nxc-member .nxc-pg__part:not(#nx-shield):not(#nx-shield) { min-inline-size: 0; } #nxc-member .nxc-pg__over:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-pg__walk:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-pg__foot:not(#nx-shield):not(#nx-shield) { grid-column: 1 / -1; } #nxc-member .nxc-pg__over p:not(#nx-shield):not(#nx-shield) { margin: 0 0 0.5rem; max-inline-size: 72ch; } #nxc-member .nxc-pg__h:not(#nx-shield):not(#nx-shield) { margin: 0.75rem 0 0.625rem; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.01em; color: var(--nx-text-primary); } #nxc-member .nxc-pg__steps:not(#nx-shield):not(#nx-shield) { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; counter-reset: nxc-pg; } #nxc-member .nxc-pg__steps > li:not(#nx-shield):not(#nx-shield) { position: relative; display: grid; gap: 0.25rem; align-content: start; padding-block: 0.875rem; padding-inline: 3rem 1rem; border: 1px solid var(--nx-border-hairline); border-radius: var(--nxc-r); counter-increment: nxc-pg; } #nxc-member .nxc-pg__steps > li:not(#nx-shield):not(#nx-shield)::before { content: counter(nxc-pg); position: absolute; inset-inline-start: 1rem; inset-block-start: 0.875rem; display: grid; place-items: center; inline-size: 1.375rem; block-size: 1.375rem; border: 1px solid var(--nx-border-hairline); border-radius: var(--nxc-r-sm); font: 0.6875rem/1 var(--nx-font-mono); color: var(--nx-text-primary); } #nxc-member .nxc-pg__st:not(#nx-shield):not(#nx-shield) { font-weight: 500; color: var(--nx-text-primary); } #nxc-member .nxc-pg__ctl:not(#nx-shield):not(#nx-shield) { margin-block-start: 0.25rem; font-size: 0.75rem; color: var(--nx-text-muted); } #nxc-member .nxc-pg__btn:not(#nx-shield):not(#nx-shield) { display: inline-block; margin-inline-start: 0.25rem; padding: 0.0625rem 0.5rem; border: 1px solid var(--nx-border-hairline); border-radius: var(--nxc-r-sm); font: 0.75rem/1.5 var(--nx-font-mono); color: var(--nx-text-primary); } #nxc-member .nxc-pg__qs:not(#nx-shield):not(#nx-shield) { display: grid; gap: 0.375rem; } #nxc-member .nxc-pg__q:not(#nx-shield):not(#nx-shield) { border: 1px solid var(--nx-border-hairline); border-radius: var(--nxc-r-sm); } #nxc-member .nxc-pg__q > summary:not(#nx-shield):not(#nx-shield) { padding: 0.5rem 0.75rem; cursor: pointer; font-weight: 500; color: var(--nx-text-primary); } #nxc-member .nxc-pg__q > summary:focus-visible:not(#nx-shield):not(#nx-shield) { outline: 2px solid var(--nx-focus, currentColor); outline-offset: 2px; } #nxc-member .nxc-pg__q > p:not(#nx-shield):not(#nx-shield) { margin: 0; padding: 0 0.75rem 0.625rem; } #nxc-member .nxc-pg__priv ul:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-pg__learn ul:not(#nx-shield):not(#nx-shield) { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; } #nxc-member .nxc-pg__priv li:not(#nx-shield):not(#nx-shield) { padding-inline-start: 0.875rem; border-inline-start: 2px solid var(--nx-border-hairline); } #nxc-member .nxc-pg__learn li:not(#nx-shield):not(#nx-shield) { display: grid; gap: 0.125rem; } #nxc-member .nxc-pg__foot:not(#nx-shield):not(#nx-shield) { margin: 0.25rem 0 0; padding-block-start: 0.75rem; border-block-start: 1px solid var(--nx-border-hairline); } @media (max-width: 40em) { #nxc-member .nxc-pg__s:not(#nx-shield):not(#nx-shield) { flex-wrap: wrap; } #nxc-member .nxc-pg__t:not(#nx-shield):not(#nx-shield) { flex: 1 1 0; } #nxc-member .nxc-pg__s > .nxc-icon:last-child:not(#nx-shield):not(#nx-shield) { order: 2; margin-inline-start: auto; } #nxc-member .nxc-pg__m:not(#nx-shield):not(#nx-shield) { margin-inline-start: 0; flex-basis: 100%; order: 3; } #nxc-member .nxc-pg__body:not(#nx-shield):not(#nx-shield) { padding-inline: 1rem; } } @media (prefers-reduced-motion: reduce) { #nxc-member .nxc-pg__s > .nxc-icon:last-child:not(#nx-shield):not(#nx-shield) { transition: none; } } /* the status line (mono) */ #nxc-member .nxc-status:not(#nx-shield):not(#nx-shield) { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin: 1.75rem 0 0; padding-block-start: 0.75rem; border-block-start: 1px solid var(--nx-border-hairline); font: 0.6875rem/1.4 var(--nx-font-mono); color: var(--nx-text-muted); } #nxc-member .nxc-status > span:not(#nx-shield):not(#nx-shield) { display: inline-flex; align-items: center; gap: 0.375rem; } #nxc-member .nxc-status__end:not(#nx-shield):not(#nx-shield) { margin-inline-start: auto; } /* buttons: primary solid, secondary hairline, quiet; square corners from the kit */ #nxc-member .nf-ui-btn:not(#nx-shield):not(#nx-shield) { border-radius: var(--nxc-r-sm); } #nxc-member .nf-ui-btn[data-size="sm"]:not(#nx-shield):not(#nx-shield) { min-block-size: 2rem; padding-inline: 0.75rem; font-size: 0.8125rem; } /* ---- BuddyPress's own screens (notifications, messages, settings, invitations) in the approved look -------------- */ #nxc-member .bp-screen-reader-text:not(#nx-shield):not(#nx-shield), #nxc-member .screen-reader-text:not(#nx-shield):not(#nx-shield) { position: absolute !important; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } #nxc-member .nxc-bp:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-secondary); font-size: 0.875rem; } #nxc-member :is(.nxc-bp, .nxc-bp .nxd-panel__body, .nxc-bp .nxd-panel__body > section) > * + *:not(#nx-shield):not(#nx-shield) { margin-block-start: 1rem; } #nxc-member .nxc-bp p:not(#nx-shield):not(#nx-shield) { margin-block: 0; line-height: 1.55; } #nxc-member .nxc-bp p:has(> .nf-ui-btn):not(#nx-shield):not(#nx-shield) { display: flex; flex-wrap: wrap; gap: 0.5rem; } #nxc-member .nxc-bp .bp-navs.user-subnav:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-bp #subnav:empty:not(#nx-shield):not(#nx-shield) { display: none; } #nxc-member .nxc-bp table:not(#nx-shield):not(#nx-shield) { inline-size: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--nx-border-hairline); border-radius: var(--nxc-r); overflow: hidden; background: var(--nx-bg-surface); } #nxc-member .nxc-bp th:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-bp td:not(#nx-shield):not(#nx-shield) { padding: 0.75rem 1.125rem; border: 0; border-block-end: 1px solid var(--nx-border-hairline); vertical-align: middle; background: transparent; } #nxc-member .nxc-bp thead th:not(#nx-shield):not(#nx-shield) { padding-block: 0.625rem; background: var(--nx-bg-muted); font: 500 0.6875rem/1.3 var(--nx-font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--nx-text-muted); } #nxc-member .nxc-bp tbody tr:last-child > *:not(#nx-shield):not(#nx-shield) { border-block-end: 0; } #nxc-member .nxc-bp tbody tr:hover > *:not(#nx-shield):not(#nx-shield) { background: var(--nx-bg-hover); } #nxc-member .nxc-bp td:not(#nx-shield):not(#nx-shield) { font-size: 0.875rem; } /* the theme shrinks table text on phones; our rows keep their size */ #nxc-member .nxc-bp td a:not(.button):not(#nx-shield):not(#nx-shield) { color: var(--nx-text-primary); text-decoration: none; } #nxc-member .nxc-bp td a:not(.button):hover:not(#nx-shield):not(#nx-shield) { text-decoration: underline; text-underline-offset: 3px; } #nxc-member .nxc-bp :is(th, td).icon:not(#nx-shield):not(#nx-shield) { inline-size: 0; padding: 0; } #nxc-member .nxc-bp :is(th, td):is(.bulk-select-all, .bulk-select-check):not(#nx-shield):not(#nx-shield) { inline-size: 2.5rem; padding-inline-end: 0; } #nxc-member .nxc-bp :is(.notification-since, .date, .thread-date):not(#nx-shield):not(#nx-shield) { font: 0.75rem/1.4 var(--nx-font-mono); color: var(--nx-text-muted); white-space: nowrap; } #nxc-member .nxc-bp .notification-actions:not(#nx-shield):not(#nx-shield) { white-space: nowrap; text-align: end; } #nxc-member .nxc-bp .notification-actions a:not(#nx-shield):not(#nx-shield) { display: inline-flex; align-items: center; min-block-size: 2rem; padding: 0 0.625rem; border-radius: var(--nxc-r-sm); color: var(--nx-text-primary) !important; font-size: 0.8125rem; text-decoration: none !important; } #nxc-member .nxc-bp .notification-actions a:hover:not(#nx-shield):not(#nx-shield) { background: var(--nx-bg-hover); } #nxc-member .nxc-bp .notification-actions a.delete:not(#nx-shield):not(#nx-shield) { color: var(--nx-critical) !important; } #nxc-member .nxc-bp :is(.notifications-options-nav, .bulk-actions-wrap, .messages-options-nav):not(#nx-shield):not(#nx-shield) { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-block-start: 0.75rem; } #nxc-member .nxc-bp :is(input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="search"], input[type="number"], select, textarea):not(#nx-shield):not(#nx-shield) { box-sizing: border-box; min-block-size: 2.25rem; max-inline-size: 100%; padding: 0 0.625rem; border: 1px solid var(--nx-border-hairline); border-radius: var(--nxc-r-sm); background: var(--nx-bg-muted); color: var(--nx-text-primary); font: 0.875rem/1.4 var(--nx-font-sans); box-shadow: none; } #nxc-member .nxc-bp textarea:not(#nx-shield):not(#nx-shield) { padding-block: 0.5rem; min-block-size: 6rem; inline-size: 100%; } #nxc-member .nxc-bp select:not(#nx-shield):not(#nx-shield) { inline-size: auto; min-inline-size: 12rem; } #nxc-member .nxc-bp :is(input, select, textarea):focus-visible:not(#nx-shield):not(#nx-shield) { outline: 2px solid var(--nx-focus); outline-offset: 1px; } #nxc-member .nxc-bp label:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-primary); font-size: 0.8125rem; font-weight: 500; } #nxc-member .nxc-bp .standard-form :is(p, .wp-pwd, .field-visibility-settings, .editfield):not(#nx-shield):not(#nx-shield) { margin-block: 0 1rem; } #nxc-member .nxc-bp .standard-form label:not(#nx-shield):not(#nx-shield) { display: inline-flex; align-items: center; gap: 0.25rem; margin-block-end: 0.375rem; } #nxc-member .nxc-bp .standard-form label:has(> .nx-check, > .nx-radio):not(#nx-shield):not(#nx-shield) { gap: 0.625rem; margin: 0; } #nxc-member .nxc-bp .standard-form :is(input[type="text"], input[type="email"], input[type="password"], input[type="url"]):not(#nx-shield):not(#nx-shield) { display: block; inline-size: min(100%, 28rem); } #nxc-member .nxc-bp fieldset:not(#nx-shield):not(#nx-shield) { margin: 0 0 1rem; padding: 0; border: 0; min-inline-size: 0; } #nxc-member .nxc-bp legend:not(#nx-shield):not(#nx-shield) { padding: 0; margin-block-end: 0.5rem; font-weight: 500; color: var(--nx-text-primary); } #nxc-member .nxc-bp .description:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-bp .info-text:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-bp p.description:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-muted); font-size: 0.8125rem; } #nxc-member .nxc-bp :is(button:not(.nx-switch), input[type="submit"], input[type="button"], .button, a.button):not(#nx-shield):not(#nx-shield) { min-block-size: 2.25rem; border-radius: var(--nxc-r-sm); } #nxc-member .nxc-bp :is(input[type="submit"].action, #notification-bulk-manage, .bulk-apply):not(#nx-shield):not(#nx-shield) { color: var(--nx-text-primary); background: transparent; border-color: var(--nx-border-hairline-strong); } #nxc-member .nxc-bp ul.item-list:not(#nx-shield):not(#nx-shield) { gap: 0; border: 1px solid var(--nx-border-hairline); border-radius: var(--nxc-r); overflow: hidden; } #nxc-member .nxc-bp ul.item-list > li:not(#nx-shield):not(#nx-shield) { margin: 0; padding: 0.875rem 1.125rem; border: 0; border-block-start: 1px solid var(--nx-border-hairline); border-radius: 0; } #nxc-member .nxc-bp ul.item-list > li:first-child:not(#nx-shield):not(#nx-shield) { border-block-start: 0; } #nxc-member .nxc-bp ul.item-list > li:hover:not(#nx-shield):not(#nx-shield) { background: var(--nx-bg-hover); } #nxc-member .nxc-bp .bp-feedback:not(#nx-shield):not(#nx-shield) { border-radius: var(--nxc-r); } /* Settings, Email: BuddyPress's yes / no table of notices, as rows with two radios. */ #nxc-member .nxc-bp table.notification-settings td.yes:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-bp table.notification-settings td.no:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-bp table.notification-settings th.yes:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-bp table.notification-settings th.no:not(#nx-shield):not(#nx-shield) { inline-size: 4.5rem; text-align: center; } /* ---- portfolio (1.8.0): sections in the member's order; the gradient only on rules, marks, cells and chart strokes -- */ @media (min-width: 1100px) { #nxc-member .nxc-panel[data-span="5"]:not(#nx-shield):not(#nx-shield) { grid-column: span 5; } #nxc-member .nxc-panel[data-span="7"]:not(#nx-shield):not(#nx-shield) { grid-column: span 7; } } #nxc-member .nxc-pf:not(#nx-shield):not(#nx-shield) { grid-auto-flow: row dense; } /* a narrow section fills the gap beside the one before it */ #nxc-member .nxc-pf__notice:not(#nx-shield):not(#nx-shield) { margin-block-end: 1rem; } #nxc-member .nxc-pf__sec.is-off:not(#nx-shield):not(#nx-shield) { border-style: dashed; } #nxc-member .nxc-pf__headline:not(#nx-shield):not(#nx-shield) { margin: 0; font-size: 1.125rem; line-height: 1.45; color: var(--nx-text-primary); } #nxc-member .nxc-pf__bio p:not(#nx-shield):not(#nx-shield) { margin: 0 0 0.625rem; color: var(--nx-text-secondary); line-height: 1.6; } #nxc-member .nxc-pf__avail:not(#nx-shield):not(#nx-shield) { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; } #nxc-member .nxc-pf__tags:not(#nx-shield):not(#nx-shield) { margin: 0; color: var(--nx-text-secondary); } #nxc-member .nxc-pf__tags .nf-ui-eyebrow:not(#nx-shield):not(#nx-shield) { margin-inline-end: 0.5rem; } #nxc-member .nxc-pf__links:not(#nx-shield):not(#nx-shield) { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; } #nxc-member .nxc-pf__links a:not(#nx-shield):not(#nx-shield) { display: inline-flex; align-items: center; gap: 0.375rem; min-block-size: 2rem; padding: 0 0.625rem; border: 1px solid var(--nx-border-hairline-strong); border-radius: var(--nxc-r-sm); font-size: 0.8125rem; color: var(--nx-text-primary); text-decoration: none; } #nxc-member .nxc-pf__links a:hover:not(#nx-shield):not(#nx-shield) { background: var(--nx-bg-hover); } /* impact numbers: a row of figures, each over a gradient rule */ #nxc-member .nxc-pf__impact:not(#nx-shield):not(#nx-shield) { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0; margin-inline: -1.125rem; margin-block-end: -1.125rem; border-block-start: 1px solid var(--nx-border-hairline); } #nxc-member .nxc-pf__num:not(#nx-shield):not(#nx-shield) { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 0.375rem; padding: 1rem 1.125rem 1.125rem; border-inline-start: 1px solid var(--nx-border-hairline); } #nxc-member .nxc-pf__num:first-child:not(#nx-shield):not(#nx-shield) { border-inline-start: 0; } #nxc-member .nxc-pf__num:not(#nx-shield):not(#nx-shield)::before { content: ""; position: absolute; inset-inline: 1.125rem; inset-block-start: -1px; block-size: 2px; background: var(--nxc-grad); } #nxc-member .nxc-pf__v:not(#nx-shield):not(#nx-shield) { grid-column: 1 / -1; font: 500 1.75rem/1.1 var(--nx-font-mono); color: var(--nx-text-primary); } /* featured: cards with a gradient rule on top */ #nxc-member .nxc-pf__featured:not(#nx-shield):not(#nx-shield) { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; } #nxc-member .nxc-pf__featured li:not(#nx-shield):not(#nx-shield) { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.25rem 0.625rem; padding: 0.875rem 1rem; border: 1px solid var(--nx-border-hairline); border-radius: var(--nxc-r); overflow: hidden; } #nxc-member .nxc-pf__frule:not(#nx-shield):not(#nx-shield) { position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 2px; background: var(--nxc-grad); } #nxc-member .nxc-pf__ft:not(#nx-shield):not(#nx-shield) { grid-column: 1 / -1; font-weight: 500; color: var(--nx-text-primary); text-decoration: none; overflow-wrap: anywhere; } #nxc-member a.nxc-pf__ft:hover:not(#nx-shield):not(#nx-shield) { text-decoration: underline; } #nxc-member .nxc-pf__featured .nf-ui-meta:not(#nx-shield):not(#nx-shield) { grid-column: 1 / -1; } /* credential wall */ #nxc-member .nxc-pf__wall:not(#nx-shield):not(#nx-shield) { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; } #nxc-member .nxc-pf__cred:not(#nx-shield):not(#nx-shield) { position: relative; display: grid; align-content: start; gap: 0.375rem; padding: 1rem; border: 1px solid var(--nx-border-hairline); border-radius: var(--nxc-r); overflow: hidden; } #nxc-member .nxc-pf__crule:not(#nx-shield):not(#nx-shield) { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 2px; background: var(--nxc-grad-v); } #nxc-member .nxc-pf__cicon:not(#nx-shield):not(#nx-shield) { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border: 1px solid var(--nx-border-hairline); border-radius: var(--nxc-r); } #nxc-member .nxc-pf__ct:not(#nx-shield):not(#nx-shield) { font-weight: 500; color: var(--nx-text-primary); overflow-wrap: anywhere; } #nxc-member .nxc-pf__cfoot:not(#nx-shield):not(#nx-shield) { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-block-start: 0.25rem; } #nxc-member .nxc-pf__did code:not(#nx-shield):not(#nx-shield) { font-size: 0.6875rem; overflow-wrap: anywhere; } /* skills: the radar beside the list, each skill with five level marks and its endorsements */ #nxc-member .nxc-pf__skills:not(#nx-shield):not(#nx-shield) { display: grid; gap: 1rem; } #nxc-member .nxc-radar:not(#nx-shield):not(#nx-shield) { justify-self: center; inline-size: 100%; max-inline-size: 21rem; } #nxc-member .nxc-radar:not(#nx-shield):not(#nx-shield) { margin: 0; } #nxc-member .nxc-radar__svg:not(#nx-shield):not(#nx-shield) { display: block; inline-size: 100%; block-size: auto; overflow: visible; } #nxc-member .nxc-radar__ring:not(#nx-shield):not(#nx-shield) { fill: none; stroke: var(--nx-border-hairline); stroke-width: 1; } #nxc-member .nxc-radar__axis:not(#nx-shield):not(#nx-shield) { stroke: var(--nx-border-hairline); stroke-width: 1; } #nxc-member .nxc-radar__shape:not(#nx-shield):not(#nx-shield) { fill: var(--nxc-g2); fill-opacity: 0.12; stroke: url(#nxc-gp); stroke-width: 1.75; stroke-linejoin: round; } #nxc-member .nxc-radar__dot:not(#nx-shield):not(#nx-shield) { fill: var(--nxc-g1); } #nxc-member .nxc-radar__label:not(#nx-shield):not(#nx-shield) { font: 500 10.5px/1 var(--nx-font-mono); fill: var(--nx-text-secondary); letter-spacing: 0.04em; } #nxc-member .nxc-radar figcaption:not(#nx-shield):not(#nx-shield) { margin-block-start: 0.5rem; } #nxc-member .nxc-pf__sklist:not(#nx-shield):not(#nx-shield) { margin: 0; padding: 0; list-style: none; } #nxc-member .nxc-pf__sklist li:not(#nx-shield):not(#nx-shield) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.25rem 0.75rem; padding-block: 0.625rem; border-block-start: 1px solid var(--nx-border-hairline); } #nxc-member .nxc-pf__sklist li:first-child:not(#nx-shield):not(#nx-shield) { border-block-start: 0; padding-block-start: 0; } #nxc-member .nxc-pf__skn:not(#nx-shield):not(#nx-shield) { font-weight: 500; color: var(--nx-text-primary); } #nxc-member .nxc-pf__lvl:not(#nx-shield):not(#nx-shield) { display: inline-flex; gap: 3px; } #nxc-member .nxc-pf__lvl i:not(#nx-shield):not(#nx-shield) { inline-size: 0.875rem; block-size: 4px; border-radius: var(--nx-radius-sm, 2px); background: var(--nx-border-hairline-strong); } #nxc-member .nxc-pf__lvl i.on:not(#nx-shield):not(#nx-shield) { background: var(--nxc-grad); } #nxc-member .nxc-pf__end:not(#nx-shield):not(#nx-shield) { grid-column: 1; } #nxc-member .nxc-pf__endorse:not(#nx-shield):not(#nx-shield) { grid-column: 2; grid-row: 2; margin: 0; } /* lists, contributions, timeline */ #nxc-member .nxc-pf__list:not(#nx-shield):not(#nx-shield) { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; } #nxc-member .nxc-pf__list li:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-pf__item:not(#nx-shield):not(#nx-shield) { display: flex; align-items: center; gap: 0.5rem; margin: 0; } #nxc-member .nxc-pf__list li .nf-ui-meta:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-pf__item .nf-ui-meta:not(#nx-shield):not(#nx-shield) { margin-inline-start: auto; white-space: nowrap; } #nxc-member .nxc-heat:not(#nx-shield):not(#nx-shield) { margin: 0; display: grid; gap: 0.5rem; } #nxc-member .nxc-heat__scroll:not(#nx-shield):not(#nx-shield) { overflow-x: auto; padding-block-end: 0.25rem; } #nxc-member .nxc-heat__svg:not(#nx-shield):not(#nx-shield) { display: block; inline-size: 100%; min-inline-size: 40rem; block-size: auto; } #nxc-member .nxc-heat__c:not(#nx-shield):not(#nx-shield) { fill: transparent; stroke: var(--nx-border-hairline); stroke-width: 1; } #nxc-member .nxc-heat__c[data-s="1"]:not(#nx-shield):not(#nx-shield) { fill: var(--nxc-g2); fill-opacity: 0.25; stroke: none; } #nxc-member .nxc-heat__c[data-s="2"]:not(#nx-shield):not(#nx-shield) { fill: var(--nxc-g2); fill-opacity: 0.5; stroke: none; } #nxc-member .nxc-heat__c[data-s="3"]:not(#nx-shield):not(#nx-shield) { fill: var(--nxc-g2); fill-opacity: 0.75; stroke: none; } #nxc-member .nxc-heat__c[data-s="4"]:not(#nx-shield):not(#nx-shield) { fill: var(--nxc-g2); stroke: none; } #nxc-member .nxc-heat__m:not(#nx-shield):not(#nx-shield) { font: 500 9px/1 var(--nx-font-mono); fill: var(--nx-text-muted); } #nxc-member .nxc-heat__legend:not(#nx-shield):not(#nx-shield) { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; } #nxc-member .nxc-pf__tl:not(#nx-shield):not(#nx-shield) { position: relative; display: grid; gap: 0; margin: 0; padding: 0 0 0 1rem; list-style: none; border-inline-start: 1px solid var(--nx-border-hairline); } #nxc-member .nxc-pf__tl li:not(#nx-shield):not(#nx-shield) { position: relative; display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.75rem; padding-block: 0.5rem; } #nxc-member .nxc-pf__tld:not(#nx-shield):not(#nx-shield) { position: absolute; inset-inline-start: calc(-1rem - 4px); inset-block-start: 0.875rem; inline-size: 7px; block-size: 7px; border-radius: var(--nx-radius-sm, 2px); background: var(--nxc-g2); } #nxc-member .nxc-pf__tl li[data-kind="credential"] .nxc-pf__tld:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-pf__tl li[data-kind="award"] .nxc-pf__tld:not(#nx-shield):not(#nx-shield) { background: var(--nxc-g1); } #nxc-member .nxc-pf__tl li[data-kind="course"] .nxc-pf__tld:not(#nx-shield):not(#nx-shield) { background: var(--nxc-g3); } #nxc-member .nxc-pf__tl li[data-kind="joined"] .nxc-pf__tld:not(#nx-shield):not(#nx-shield) { background: var(--nxc-g4); } #nxc-member .nxc-pf__tl a:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-primary); } /* the editor: one row per section (name, switch, who sees it, position), then the member's own fields */ #nxc-member .nxc-pf-edit:not(#nx-shield):not(#nx-shield) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } #nxc-member .nxc-pfe__secs:not(#nx-shield):not(#nx-shield) { margin: 0 -1.125rem -1.125rem; padding: 0; list-style: none; } #nxc-member .nxc-pfe__sec:not(#nx-shield):not(#nx-shield) { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 4.5rem; align-items: center; gap: 0.75rem 1rem; padding: 0.75rem 1.125rem; border-block-start: 1px solid var(--nx-border-hairline); } #nxc-member .nxc-pfe__name:not(#nx-shield):not(#nx-shield) { display: grid; gap: 0.125rem; min-inline-size: 0; } #nxc-member .nxc-pfe__name label:not(#nx-shield):not(#nx-shield) { font-weight: 500; color: var(--nx-text-primary); } #nxc-member .nxc-pfe__radio:not(#nx-shield):not(#nx-shield) { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; white-space: nowrap; } #nxc-member .nxc-pfe__vis .nx-seg__btn:first-of-type:not(#nx-shield):not(#nx-shield) { border-inline-start: 0; } #nxc-member .nxc-pfe__vis .nxc-pfe__radio:checked + .nx-seg__btn:not(#nx-shield):not(#nx-shield) { background: var(--nx-text-primary); color: var(--nx-bg-surface); } #nxc-member .nxc-pfe__vis .nxc-pfe__radio:focus-visible + .nx-seg__btn:not(#nx-shield):not(#nx-shield) { outline: 2px solid var(--nx-focus); outline-offset: -3px; } #nxc-member .nxc-pfe__pos input:not(#nx-shield):not(#nx-shield) { inline-size: 100%; min-block-size: 2.25rem; text-align: center; box-sizing: border-box; } #nxc-member .nxc-pfe__grid:not(#nx-shield):not(#nx-shield) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 1.125rem 1.5rem; } #nxc-member .nxc-pfe__field:not(#nx-shield):not(#nx-shield) { display: flex; flex-wrap: wrap; align-items: center; align-content: start; gap: 0.375rem 0.25rem; min-inline-size: 0; margin: 0; padding: 0; border: 0; } #nxc-member .nxc-pfe__field > label:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-pfe__field > legend:not(#nx-shield):not(#nx-shield) { float: inline-start; font-weight: 500; color: var(--nx-text-primary); padding: 0; } #nxc-member .nxc-pfe__field > .nf-ui-field:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-pfe__field > .nxc-pfe__checks:not(#nx-shield):not(#nx-shield) { flex-basis: 100%; inline-size: 100%; box-sizing: border-box; } #nxc-member .nxc-pfe__field textarea:not(#nxc-pfe-bio):not(#nx-shield):not(#nx-shield) { font-family: var(--nx-font-mono); font-size: 0.8125rem; } #nxc-member .nxc-pfe__wide:not(#nx-shield):not(#nx-shield) { grid-column: 1 / -1; } #nxc-member .nxc-pfe__checks:not(#nx-shield):not(#nx-shield) { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; } #nxc-member .nxc-pfe__checks .nx-ctl:not(#nx-shield):not(#nx-shield) { display: inline-flex; align-items: center; gap: 0.5rem; min-block-size: 2rem; } #nxc-member .nxc-pfe__actions:not(#nx-shield):not(#nx-shield) { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; } #nxc-member .nxc-pfe__actions .nf-ui-meta:not(#nx-shield):not(#nx-shield) { flex: 1 1 18rem; } @media (max-width: 40em) { #nxc-member .nxc-pfe__grid:not(#nx-shield):not(#nx-shield) { grid-template-columns: minmax(0, 1fr); } #nxc-member .nxc-pfe__sec:not(#nx-shield):not(#nx-shield) { grid-template-columns: minmax(0, 1fr) auto; } #nxc-member .nxc-pfe__vis:not(#nx-shield):not(#nx-shield) { grid-column: 1 / -1; display: grid; } #nxc-member .nxc-pfe__vis .nx-seg__btn:not(#nx-shield):not(#nx-shield) { min-block-size: 2.75rem; } #nxc-member .nxc-pfe__pos:not(#nx-shield):not(#nx-shield) { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.5rem; } #nxc-member .nxc-pfe__pos input:not(#nx-shield):not(#nx-shield) { inline-size: 4.5rem; min-block-size: 2.75rem; } #nxc-member .nxc-pf__tl li:not(#nx-shield):not(#nx-shield) { grid-template-columns: minmax(0, 1fr); gap: 0.125rem; } #nxc-member .nxc-pf__impact:not(#nx-shield):not(#nx-shield) { grid-template-columns: repeat(2, minmax(0, 1fr)); } #nxc-member .nxc-pf__num:nth-child(odd):not(#nx-shield):not(#nx-shield) { border-inline-start: 0; } #nxc-member .nxc-pf__num:nth-child(n+3):not(#nx-shield):not(#nx-shield) { border-block-start: 1px solid var(--nx-border-hairline); } } @media (forced-colors: active) { #nxc-member .nxc-heat__c:not([data-s="0"]):not(#nx-shield):not(#nx-shield), #nxc-member .nxc-pf__lvl i.on:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-radar__dot:not(#nx-shield):not(#nx-shield) { fill: CanvasText; background: CanvasText; forced-color-adjust: none; } #nxc-member .nxc-pfe__vis .nxc-pfe__radio:checked + .nx-seg__btn:not(#nx-shield):not(#nx-shield) { background: Highlight; color: HighlightText; forced-color-adjust: none; } } /* ---- domain bands and the panels other plugins print (1.9.0) ---------------------------------------------------- */ /* A summary band over a domain tab: the overview's stat tiles, boxed in the content column. */ #nxc-member .nxc-main > .nxc-band:not(#nx-shield):not(#nx-shield) { border: 1px solid var(--nx-border-hairline); border-radius: var(--nxc-r); overflow: hidden; } #nxc-member .nxc-band .nxc-kpi:first-child:not(#nx-shield):not(#nx-shield) { padding-inline-start: 0; } #nxc-member .nxc-band .nxc-kpi:first-child .nxc-kpi__link:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-band .nxc-kpi:first-child:not([data-interactive]):not(#nx-shield):not(#nx-shield) { padding-inline-start: 1.125rem; } #nxc-member .nxc-band .nxc-kpi__spark .nxc-meter2:not(#nx-shield):not(#nx-shield) { inline-size: 5.5rem; } /* Learning panels (nexus-academy): one row per course, lab or deck, the progress as a gradient bar with its number. */ #nxc-member .nxa-panel__list:not(#nx-shield):not(#nx-shield) { margin: 0; padding: 0; list-style: none; border: 1px solid var(--nx-border-hairline); border-radius: var(--nxc-r); background: var(--nx-bg-surface); overflow: hidden; } #nxc-member .nxa-panel__row:not(#nx-shield):not(#nx-shield) { display: grid; grid-template-columns: minmax(0, 1fr) auto 9rem auto; align-items: center; gap: 0.25rem 1rem; min-block-size: 3.5rem; padding: 0.75rem 1.125rem; border-block-start: 1px solid var(--nx-border-hairline); } #nxc-member .nxa-panel__row:first-child:not(#nx-shield):not(#nx-shield) { border-block-start: 0; } #nxc-member .nxa-panel__row:hover:not(#nx-shield):not(#nx-shield) { background: var(--nx-bg-hover); } #nxc-member .nxa-panel__row > a:first-child:not(#nx-shield):not(#nx-shield), #nxc-member .nxa-panel__row > span:first-child:not(#nx-shield):not(#nx-shield) { grid-column: 1; font-weight: 500; color: var(--nx-text-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #nxc-member .nxa-panel__row > a:first-child:hover:not(#nx-shield):not(#nx-shield) { text-decoration: underline; } #nxc-member .nxa-panel__row:not(:has(progress)):not(#nx-shield):not(#nx-shield) { grid-template-columns: minmax(0, 1fr) auto; } #nxc-member .nxa-panel__meta:not(#nx-shield):not(#nx-shield) { font: 0.75rem/1.4 var(--nx-font-mono); color: var(--nx-text-muted); white-space: nowrap; } #nxc-member .nxa-panel__progress:not(#nx-shield):not(#nx-shield) { inline-size: 100%; block-size: 4px; border: 0; border-radius: var(--nx-radius-sm, 2px); background: var(--nx-border-hairline-strong); appearance: none; overflow: hidden; } #nxc-member .nxa-panel__progress:not(#nx-shield):not(#nx-shield)::-webkit-progress-bar { background: var(--nx-border-hairline-strong); } #nxc-member .nxa-panel__progress:not(#nx-shield):not(#nx-shield)::-webkit-progress-value { background: var(--nxc-grad); } #nxc-member .nxa-panel__progress:not(#nx-shield):not(#nx-shield)::-moz-progress-bar { background: var(--nxc-grad); } #nxc-member .nxa-panel__row > a:not(:first-child):not(#nx-shield):not(#nx-shield) { grid-column: 4; justify-self: end; display: inline-flex; align-items: center; min-block-size: 2rem; padding: 0 0.625rem; border: 1px solid transparent; border-radius: var(--nxc-r-sm); font-size: 0.8125rem; color: var(--nx-text-primary); text-decoration: none; white-space: nowrap; } #nxc-member .nxa-panel__row > .nxa-panel__meta + .nxa-panel__meta:not(#nx-shield):not(#nx-shield) { grid-column: 2; } #nxc-member .nxa-panel__empty:not(#nx-shield):not(#nx-shield) { margin: 0; padding: 2rem 1.25rem; border: 1px solid var(--nx-border-hairline); border-radius: var(--nxc-r); text-align: center; color: var(--nx-text-secondary); } #nxc-member .nxa-panel__empty a:not(#nx-shield):not(#nx-shield) { margin-inline-start: 0.5rem; font-weight: 500; color: var(--nx-text-primary); } #nxc-member .nxa-panel__note:not(#nx-shield):not(#nx-shield) { margin: 0.75rem 0 0; font-size: 0.8125rem; color: var(--nx-text-muted); } #nxc-member .nxa-panel__facts:not(#nx-shield):not(#nx-shield) { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0; margin: 0; border: 1px solid var(--nx-border-hairline); border-radius: var(--nxc-r); overflow: hidden; } #nxc-member .nxa-panel__facts > div:not(#nx-shield):not(#nx-shield) { display: grid; gap: 0.375rem; padding: 1rem 1.125rem; border-inline-start: 1px solid var(--nx-border-hairline); } #nxc-member .nxa-panel__facts > div:first-child:not(#nx-shield):not(#nx-shield) { border-inline-start: 0; } #nxc-member .nxa-panel__facts dt:not(#nx-shield):not(#nx-shield) { font: 500 0.6875rem/1.3 var(--nx-font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--nx-text-muted); } #nxc-member .nxa-panel__facts dd:not(#nx-shield):not(#nx-shield) { margin: 0; color: var(--nx-text-primary); } #nxc-member .nxa-panel__action:not(#nx-shield):not(#nx-shield) { display: inline-flex; align-items: center; min-block-size: 2.25rem; padding: 0 0.875rem; border: 1px solid var(--nx-border-hairline-strong); border-radius: var(--nxc-r-sm); font-weight: 500; color: var(--nx-text-primary) !important; text-decoration: none !important; } /* Community panels (Kit): saved posts, muted and blocked. */ #nxc-member .nxc-hub .nx-dp:not(#nx-shield):not(#nx-shield) { display: grid; gap: 1rem; } #nxc-member .nxc-hub .nx-dp__section:not(#nx-shield):not(#nx-shield) { border: 1px solid var(--nx-border-hairline); border-radius: var(--nxc-r); background: var(--nx-bg-surface); overflow: hidden; } #nxc-member .nxc-hub .nx-dp__head:not(#nx-shield):not(#nx-shield) { padding: 1rem 1.125rem 0.75rem; } #nxc-member .nxc-hub .nx-dp__head .nf-ui-eyebrow:not(#nx-shield):not(#nx-shield) { margin: 0; } #nxc-member .nxc-hub .nx-dp__head .nf-ui-title:not(#nx-shield):not(#nx-shield) { margin: 0.25rem 0 0; font-size: 1.0625rem; font-weight: 500; } #nxc-member .nxc-hub .nx-dp__note:not(#nx-shield):not(#nx-shield) { margin: 0; padding: 0 1.125rem 0.875rem; font-size: 0.8125rem; color: var(--nx-text-secondary); } #nxc-member .nxc-hub .nx-dp__list:not(#nx-shield):not(#nx-shield) { margin: 0; padding: 0; list-style: none; } #nxc-member .nxc-hub .nx-dp__item:not(#nx-shield):not(#nx-shield) { display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem 1.125rem; border-block-start: 1px solid var(--nx-border-hairline); } #nxc-member .nxc-hub .nx-dp__item:hover:not(#nx-shield):not(#nx-shield) { background: var(--nx-bg-hover); } #nxc-member .nxc-hub .nx-dp__main:not(#nx-shield):not(#nx-shield) { flex: 1; min-inline-size: 0; display: grid; gap: 0.125rem; } #nxc-member .nxc-hub .nx-dp__main > a:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-hub .nx-dp__title:not(#nx-shield):not(#nx-shield) { font-weight: 500; color: var(--nx-text-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #nxc-member .nxc-hub .nx-dp__item form:not(#nx-shield):not(#nx-shield) { margin: 0; flex: none; } #nxc-member .nxc-hub .nx-dp__status:not(#nx-shield):not(#nx-shield) { display: inline-flex; align-items: center; gap: 0.375rem; font: 500 0.6875rem/1 var(--nx-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--nx-text-secondary); } #nxc-member .nxc-hub .nx-dp__empty:not(#nx-shield):not(#nx-shield) { display: grid; justify-items: center; gap: 0.5rem; padding: 2.5rem 1.25rem; border: 1px solid var(--nx-border-hairline); border-radius: var(--nxc-r); text-align: center; } #nxc-member .nxc-hub .nx-dp__empty p:not(#nx-shield):not(#nx-shield) { margin: 0; color: var(--nx-text-secondary); } #nxc-member .nxc-hub .nx-dp__empty + .nx-dp__note:not(#nx-shield):not(#nx-shield) { padding: 0; } #nxc-member .nxc-hub .nx-dp__sr:not(#nx-shield):not(#nx-shield) { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Sign-in security (nexus-sso) and other summaries: a lede, then a two-column facts table as rows. */ #nxc-member .nxc-bp .nxd-lede:not(#nx-shield):not(#nx-shield) { margin: 0 0 1rem; color: var(--nx-text-secondary); } #nxc-member .nxc-bp .nxd-table:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-bp .nexus-forms-mine:not(#nx-shield):not(#nx-shield) { inline-size: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--nx-border-hairline); border-radius: var(--nxc-r); background: var(--nx-bg-surface); overflow: hidden; } #nxc-member .nxc-bp .nxd-table th:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-bp .nxd-table td:not(#nx-shield):not(#nx-shield) { padding: 0.875rem 1.125rem; border: 0; border-block-start: 1px solid var(--nx-border-hairline); text-align: start; vertical-align: middle; } #nxc-member .nxc-bp .nxd-table tr:first-child > *:not(#nx-shield):not(#nx-shield) { border-block-start: 0; } #nxc-member .nxc-bp .nxd-table th:not(#nx-shield):not(#nx-shield) { inline-size: 40%; font-weight: 500; color: var(--nx-text-primary); } #nxc-member .nxc-bp .nxd-table td:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-secondary); } #nxc-member .nxc-bp .nexus-forms-mine th:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-bp .nexus-forms-mine td:not(#nx-shield):not(#nx-shield) { padding: 0.75rem 1rem; border: 0; border-block-start: 1px solid var(--nx-border-hairline); text-align: start; vertical-align: middle; } #nxc-member .nxc-bp .nexus-forms-mine thead th:not(#nx-shield):not(#nx-shield) { border-block-start: 0; font: 500 0.6875rem/1.2 var(--nx-font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--nx-text-muted); } #nxc-member .nxc-bp .nexus-forms-mine tbody tr:hover > *:not(#nx-shield):not(#nx-shield) { background: var(--nx-bg-hover); } #nxc-member .nxc-bp .nexus-forms-mine td:first-child:not(#nx-shield):not(#nx-shield) { font-weight: 500; color: var(--nx-text-primary); } #nxc-member .nxc-bp .nexus-forms-mine time:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-bp .nexus-forms-until:not(#nx-shield):not(#nx-shield) { font: 0.75rem/1.4 var(--nx-font-mono); color: var(--nx-text-muted); white-space: nowrap; } #nxc-member .nxc-bp .nexus-forms-inline:not(#nx-shield):not(#nx-shield) { display: inline; margin: 0; } #nxc-member .nxc-bp .nexus-forms-mine td a:not(.button):not(#nx-shield):not(#nx-shield) { color: var(--nx-text-primary); text-decoration: underline; text-underline-offset: 2px; } #nxc-member .nxc-bp .nexus-forms-inline button:not(#nx-shield):not(#nx-shield) { min-block-size: 2rem; margin: 0.125rem 0.25rem 0.125rem 0; padding: 0 0.625rem; border: 1px solid transparent; border-radius: var(--nxc-r-sm); background: transparent; color: var(--nx-text-primary); font: 500 0.75rem/1 var(--nx-font-sans); cursor: pointer; } #nxc-member .nxc-bp .nexus-forms-inline button:hover:not(#nx-shield):not(#nx-shield) { background: var(--nx-bg-hover); } @media (max-width: 40em) { #nxc-member .nxa-panel__row:not(#nx-shield):not(#nx-shield) { grid-template-columns: minmax(0, 1fr) auto; } #nxc-member .nxa-panel__row > .nxa-panel__progress:not(#nx-shield):not(#nx-shield) { grid-column: 1 / -1; grid-row: 2; } #nxc-member .nxa-panel__row > a:not(:first-child):not(#nx-shield):not(#nx-shield) { grid-column: 2; min-block-size: 2.75rem; } #nxc-member .nxc-hub .nx-dp__item:not(#nx-shield):not(#nx-shield) { flex-wrap: wrap; } #nxc-member .nxc-hub .nx-dp__item form .nf-ui-btn:not(#nx-shield):not(#nx-shield) { min-block-size: 2.75rem; } #nxc-member .nxc-bp .nexus-forms-mine thead:not(#nx-shield):not(#nx-shield) { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); } #nxc-member .nxc-bp .nexus-forms-mine:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-bp .nexus-forms-mine tbody:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-bp .nexus-forms-mine tr:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-bp .nexus-forms-mine td:not(#nx-shield):not(#nx-shield) { display: block; } #nxc-member .nxc-bp .nexus-forms-mine tr:not(#nx-shield):not(#nx-shield) { padding: 0.75rem 1rem; border-block-start: 1px solid var(--nx-border-hairline); } #nxc-member .nxc-bp .nexus-forms-mine tr:first-child:not(#nx-shield):not(#nx-shield) { border-block-start: 0; } #nxc-member .nxc-bp .nexus-forms-mine td:not(#nx-shield):not(#nx-shield) { padding: 0.125rem 0; border: 0; } #nxc-member .nxc-bp .nexus-forms-inline button:not(#nx-shield):not(#nx-shield) { min-block-size: 2.75rem; } #nxc-member .nxc-bp .nxd-table th:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-bp .nxd-table td:not(#nx-shield):not(#nx-shield) { display: block; inline-size: auto; } #nxc-member .nxc-bp .nxd-table td:not(#nx-shield):not(#nx-shield) { padding-block-start: 0; border-block-start: 0; } } /* The page header holds the view's one primary action: a skinned tab's own submit buttons step down to secondary. */ #nxc-member .nxc-body[data-primary="head"] .nxc-bp :is(input[type="submit"], button[type="submit"]:not(.nx-switch)):not(#nx-shield):not(#nx-shield) { color: var(--nx-text-primary); background: transparent; border-color: var(--nx-border-hairline-strong); } #nxc-member .nxc-body[data-primary="head"] .nxc-bp :is(input[type="submit"], button[type="submit"]:not(.nx-switch)):hover:not(#nx-shield):not(#nx-shield) { background: var(--nx-bg-hover); } /* ---- phone and tablet: the menu folds behind one button; 44px targets; nothing under the dock ------------------- */ @media (max-width: 63.99em) { #nxc-member .nxc-layout:not(#nx-shield):not(#nx-shield) { grid-template-columns: minmax(0, 1fr); margin-inline: calc(-1 * var(--nxc-gut)); } #nxc-member .nxc-nav:not(#nx-shield):not(#nx-shield) { position: static; max-block-size: none; overflow: visible; padding: 0.75rem var(--nxc-gut); border-inline-end: 0; border-block-end: 1px solid var(--nx-border-hairline); } #nxc-member .nxc-nav.is-folding .nxc-nav__toggle:not(#nx-shield):not(#nx-shield) { display: flex; align-items: center; gap: 0.625rem; inline-size: 100%; min-block-size: 2.75rem; padding: 0 0.75rem; border: 1px solid var(--nx-border-hairline-strong); border-radius: var(--nxc-r-sm); background: var(--nx-bg-surface); color: var(--nx-text-primary); font: 500 0.875rem/1 var(--nx-font-sans); cursor: pointer; } #nxc-member .nxc-nav__toggle-label:not(#nx-shield):not(#nx-shield) { flex: 1; text-align: start; } #nxc-member .nxc-nav.is-folding .nxc-nav__list:not(#nx-shield):not(#nx-shield) { display: none; padding-block-start: 0.75rem; } #nxc-member .nxc-nav.is-folding.is-open .nxc-nav__list:not(#nx-shield):not(#nx-shield) { display: block; } #nxc-member .nxc-nav__item:not(#nx-shield):not(#nx-shield) { min-block-size: 2.75rem; } #nxc-member .nxc-nav__cat button:not(#nx-shield):not(#nx-shield) { min-block-size: 2.75rem; } #nxc-member .nxc-main:not(#nx-shield):not(#nx-shield) { padding: 1.25rem var(--nxc-gut) 1.5rem; } #nxc-member .nxc-dash:not(#nx-shield):not(#nx-shield) { gap: 1rem; } } @media (max-width: 40em) { /* The side gutter holds the dock's slim tab (nexus-accessibility 1.3.2 on account screens): 28px, never content. */ #nxc-member:not(#nx-shield):not(#nx-shield) { --nxc-gut: 1.75rem; padding-inline: 1.75rem; } #nxc-member .nxc-kpi__cta:not(#nx-shield):not(#nx-shield) { display: none; } #nxc-member .nxc-kpi__meta:not(#nx-shield):not(#nx-shield) { white-space: normal; } #nxc-member .nxc-kpi:last-child:nth-child(odd):not(#nx-shield):not(#nx-shield) { grid-column: 1 / -1; } /* The KPI row starts after the gutter that holds the dock tab, so no tile runs under it. */ #nxc-member .nxc-head > .nxc-kpis:not(#nx-shield):not(#nx-shield) { margin-inline-start: var(--nxc-gut); border-inline-start: 1px solid var(--nx-border-hairline); } #nxc-member .nxc-head > .nxc-kpis .nxc-kpi:first-child .nxc-kpi__link:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-head > .nxc-kpis .nxc-kpi:first-child:not([data-interactive]):not(#nx-shield):not(#nx-shield) { padding-inline-start: 1rem; } #nxc-member .nxc-head > .nxc-head__body:not(#nx-shield):not(#nx-shield) { padding-inline: var(--nxc-gut); } #nxc-member .nxc-page__title:not(#nx-shield):not(#nx-shield) { font-size: 1.5rem; } #nxc-member .nxc-page__actions:not(#nx-shield):not(#nx-shield) { inline-size: 100%; } #nxc-member .nxc-page__actions .nf-ui-btn:not(#nx-shield):not(#nx-shield) { min-block-size: 2.75rem; } #nxc-member .nxc-kpis:not(#nx-shield):not(#nx-shield) { grid-template-columns: repeat(2, minmax(0, 1fr)); } #nxc-member .nxc-kpi__value:not(#nx-shield):not(#nx-shield) { font-size: 1.5rem; } #nxc-member .nxc-spark2:not(#nx-shield):not(#nx-shield) { inline-size: 4.5rem; } #nxc-member .nxc-kpi__mid:not(#nx-shield):not(#nx-shield) { flex-wrap: wrap; } #nxc-member .nxc-row:not(#nx-shield):not(#nx-shield) { flex-wrap: wrap; } #nxc-member .nxc-row__main:not(#nx-shield):not(#nx-shield) { flex-basis: calc(100% - 3rem); } #nxc-member .nxc-row .nxc-badge:not(#nx-shield):not(#nx-shield) { margin-inline-start: 2.875rem; } #nxc-member .nxc-row .nf-ui-btn:not(#nx-shield):not(#nx-shield) { min-block-size: 2.75rem; margin-inline-start: auto; } #nxc-member .nf-ui-btn:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-tabs__item:not(#nx-shield):not(#nx-shield) { min-block-size: 2.75rem; } #nxc-member .nxc-status__end:not(#nx-shield):not(#nx-shield) { margin-inline-start: 0; } } @media (prefers-reduced-motion: reduce) { #nxc-member .nxc-nav__cat .nxc-icon:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-how > summary > .nxc-icon:last-child:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-tip__bubble:not(#nx-shield):not(#nx-shield) { transition: none; } } @media (forced-colors: active) { #nxc-member .nxc-nav__item[aria-current="page"]:not(#nx-shield):not(#nx-shield)::before { background: Highlight; forced-color-adjust: none; } #nxc-member .nxc-meter2 > span:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-meter > span:not(#nx-shield):not(#nx-shield), #nxc-member .nxc-verify__pips i.on:not(#nx-shield):not(#nx-shield) { background: CanvasText; forced-color-adjust: none; } } #nxc-member .nxc-verify.is-hushed .nxc-tip__bubble:not(#nx-shield):not(#nx-shield) { opacity: 0; visibility: hidden; } /* 1.10.0: the credits wallet (nexus-rewards) inside the hub. Its own stylesheet is not shielded, so the theme's field rules reach its toolbar; these restate its field metrics under the hub, where the served copy of this file wins. */ #nxc-member .nxr-hub :is(input.nxr-field, select.nxr-field):not(#nx-shield):not(#nx-shield) { box-sizing: border-box; min-block-size: 36px; margin: 0; padding: 0 12px; border: 1px solid var(--nx-border-hairline-strong); border-radius: var(--nx-radius, 5px); background: var(--nx-bg-surface); color: var(--nx-text-primary); font: 400 0.875rem/1.3 var(--nx-font-sans); box-shadow: none; text-transform: none; } #nxc-member .nxr-hub .nxr-tab:not(#nx-shield):not(#nx-shield) { margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; text-transform: none; } #nxc-member .nxr-hub .nxr-tab[aria-selected="true"]:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-primary); } #nxc-member .nxc-needs__profile:not(#nx-shield):not(#nx-shield) { margin: 0 -1.125rem -1.125rem; padding: 0.75rem 1.125rem; border-block-start: 1px solid var(--nx-border-hairline); } #nxc-member .nxc-needs__profile a:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-primary); text-decoration: underline; text-underline-offset: 2px; } #nxc-member .nxc-when:not(#nx-shield):not(#nx-shield) { white-space: nowrap; } #nxc-member .nxc-when__rel:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-muted); } /* 1.10.1: notifications bulk actions as a toolbar above the table (template notifications-loop.php). */ #nxc-member .nxc-bulk__bar:not(#nx-shield):not(#nx-shield) { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-block-end: 0.75rem; } #nxc-member .nxc-bulk__label:not(#nx-shield):not(#nx-shield) { margin-inline-end: 0.25rem; } @media (max-width: 40em) { #nxc-member .nxc-bulk__bar .nf-ui-btn:not(#nx-shield):not(#nx-shield) { min-block-size: 2.75rem; } } /* 1.13.0 the member's strip (owner 2026-11-03: a data visualization bar, every area at a glance, small type, pastel lines). Compact cells divided by hairlines, a gradient hairline on top, micro charts in the gradient; a phone scrolls it sideways with the cells at a fixed width. */ #nxc-member .nxc-strip:not(#nx-shield):not(#nx-shield) { position: relative; border-block: 1px solid var(--nx-border-hairline); background: var(--nx-bg-surface); } #nxc-member .nxc-strip:not(#nx-shield):not(#nx-shield)::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: -1px; block-size: 1px; background: var(--nxc-grad); opacity: 0.85; } #nxc-member .nxc-strip__cells:not(#nx-shield):not(#nx-shield) { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(7.25rem, 1fr); margin: 0; padding: 0 max(var(--nxc-gut), var(--nxc-dock-inline, 0px)); list-style: none; overflow-x: auto; scrollbar-width: thin; scroll-snap-type: x proximity; } #nxc-member .nxc-strip__cells:focus-visible:not(#nx-shield):not(#nx-shield) { outline: 2px solid var(--nx-focus); outline-offset: -2px; } #nxc-member .nxc-cell:not(#nx-shield):not(#nx-shield) { min-inline-size: 0; scroll-snap-align: start; } #nxc-member .nxc-cell + .nxc-cell:not(#nx-shield):not(#nx-shield) { border-inline-start: 1px solid var(--nx-border-hairline); } #nxc-member .nxc-cell__link:not(#nx-shield):not(#nx-shield) { position: relative; display: grid; gap: 0.25rem; block-size: 100%; padding: 0.625rem 0.875rem 0.6875rem; color: var(--nx-text-primary) !important; text-decoration: none !important; box-sizing: border-box; } #nxc-member a.nxc-cell__link:hover:not(#nx-shield):not(#nx-shield) { background: var(--nx-bg-hover); } #nxc-member a.nxc-cell__link:hover:not(#nx-shield):not(#nx-shield)::after, #nxc-member a.nxc-cell__link:focus-visible:not(#nx-shield):not(#nx-shield)::after { content: ""; position: absolute; inset-inline: 0.875rem; inset-block-end: 0; block-size: 1px; background: var(--nxc-grad); } #nxc-member a.nxc-cell__link:focus-visible:not(#nx-shield):not(#nx-shield) { outline: 2px solid var(--nx-focus); outline-offset: -2px; } #nxc-member .nxc-cell__label:not(#nx-shield):not(#nx-shield) { font: 500 0.625rem/1 var(--nx-font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--nx-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #nxc-member .nxc-cell__row:not(#nx-shield):not(#nx-shield) { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.5rem; min-block-size: 1.375rem; } #nxc-member .nxc-cell__value:not(#nx-shield):not(#nx-shield) { font: 500 1.125rem/1.1 var(--nx-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; } #nxc-member .nxc-cell__value.is-empty:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-muted); } #nxc-member .nxc-cell__viz:not(#nx-shield):not(#nx-shield) { display: flex; align-items: flex-end; flex: none; } #nxc-member .nxc-cell__viz .nxc-spark2:not(#nx-shield):not(#nx-shield) { inline-size: 3.5rem; block-size: 1.125rem; } #nxc-member .nxc-cell__viz .nxc-spark2__line:not(#nx-shield):not(#nx-shield) { stroke-width: 1.5; vector-effect: non-scaling-stroke; } #nxc-member .nxc-cell__viz .nxc-seg2:not(#nx-shield):not(#nx-shield) { inline-size: 3.0625rem; block-size: 0.25rem; margin-block-end: 0.3125rem; } #nxc-member .nxc-seg2__on:not(#nx-shield):not(#nx-shield) { fill: url(#nxc-gp); } #nxc-member .nxc-seg2__off:not(#nx-shield):not(#nx-shield) { fill: var(--nx-border-default); } #nxc-member .nxc-cell__cap:not(#nx-shield):not(#nx-shield) { font-size: 0.6875rem; line-height: 1.2; color: var(--nx-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 47.99em) { #nxc-member .nxc-strip__cells:not(#nx-shield):not(#nx-shield) { grid-auto-columns: 7.5rem; padding-inline: var(--nxc-gut); } } @media (forced-colors: active) { #nxc-member .nxc-strip:not(#nx-shield):not(#nx-shield)::before, #nxc-member a.nxc-cell__link:hover:not(#nx-shield):not(#nx-shield)::after { background: CanvasText; } #nxc-member .nxc-seg2__on:not(#nx-shield):not(#nx-shield) { fill: Highlight; } } #nxc-member .nxc-cell__link:not(#nx-shield):not(#nx-shield) { align-content: start; grid-template-rows: auto 1.375rem auto; } #nxc-member .nxc-strip__cells:not(#nx-shield):not(#nx-shield) { scroll-padding-inline: max(var(--nxc-gut), var(--nxc-dock-inline, 0px)); } @media (max-width: 47.99em) { #nxc-member .nxc-strip__cells:not(#nx-shield):not(#nx-shield) { scroll-padding-inline: var(--nxc-gut); } } #nxc-member .nxc-strip > ul.nxc-strip__cells[role="list"]:not(#nx-shield):not(#nx-shield) { margin: 0; padding-block: 0; padding-inline: max(var(--nxc-gut), var(--nxc-dock-inline, 0px)); } @media (max-width: 47.99em) { #nxc-member .nxc-strip > ul.nxc-strip__cells[role="list"]:not(#nx-shield):not(#nx-shield) { padding-inline: var(--nxc-gut); } }