/*
 * Tooltip, popover and semantic chips (themes lane, 2026-11-04; R-088). One accessible component for every icon-first control in
 * the estate. Markup contract (shared with the community lane, nexus-assets/js/nexus-tooltip.js):
 *   tooltip   any control with  data-nx-tip="Text"  [data-nx-tip-place="top|bottom|start|end"]
 *   popover   a button with  data-nx-pop="<id>"  (the script adds aria-expanded and aria-controls), and a panel
 *             <div class="nx-pop" id="<id>" hidden role="group" aria-label="...">...</div> anywhere on the page
 *   chip      <span class="nx-chip" data-tone="verified|identity|credential|role|warning|info">[icon] Word</span>
 * Tokens only. The tooltip is inverted (--nx-primary-bg on --nx-primary-ink), so it holds 4.5:1 in both modes and every accent.
 */

.nx-tip,
.nx-pop {
	position: fixed;
	inset-block-start: 0;
	inset-inline-start: 0;
	z-index: 100002; /* above the estate header, the dock and the admin bar */
	box-sizing: border-box;
	max-inline-size: min(20rem, calc(100vw - 1rem));
	margin: 0;
	border-radius: var(--nx-radius);
	font: 500 var(--nx-fs-xs, .75rem)/1.45 var(--nx-font-sans, inherit);
	overflow-wrap: anywhere;
	opacity: 0;
	transform: translateY(var(--nx-tip-shift, .25rem));
	transition: opacity var(--nx-motion-fast, 150ms) var(--nx-ease-out, ease-out), transform var(--nx-motion-fast, 150ms) var(--nx-ease-out, ease-out);
}
.nx-tip[hidden],
.nx-pop[hidden] { display: none; }
.nx-tip[data-open],
.nx-pop[data-open] { opacity: 1; transform: none; }

.nx-tip {
	padding: .375rem .625rem;
	background: var(--nx-primary-bg);
	color: var(--nx-primary-ink);
	pointer-events: none;
}
.nx-tip[data-place="bottom"] { --nx-tip-shift: -.25rem; }
.nx-tip[data-place="start"] { --nx-tip-shift: 0; }
.nx-tip[data-place="end"] { --nx-tip-shift: 0; }

.nx-pop {
	padding: var(--nx-space-3, .75rem) var(--nx-space-4, 1rem);
	border: 1px solid var(--nx-border-hairline-strong);
	background: var(--nx-bg-elevated);
	color: var(--nx-text-primary);
	max-inline-size: min(22rem, calc(100vw - 1rem));
	font-weight: 400;
}
.nx-pop a { color: var(--nx-accent); }
.nx-pop :is(h2, h3, h4, strong) { display: block; margin: 0 0 .25rem; font-size: var(--nx-fs-sm, .875rem); font-weight: 600; }

/* a trigger shows it is a trigger without a second colour */
[data-nx-pop][aria-expanded="true"] { border-color: var(--nx-text-primary); }

@media (prefers-reduced-motion: reduce) {
	.nx-tip, .nx-pop { transition-duration: .01ms; transform: none; }
}
@media (forced-colors: active) {
	.nx-tip, .nx-pop { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
}

/* Semantic chips: what a thing is, by colour, word and icon together. The network accent is for the primary action and the
   current location only. Each tone's ink holds 4.5:1 on its tint and on the page canvas, in both modes. */
.nx-chip {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	block-size: 1.25rem;
	box-sizing: border-box;
	padding: 0 .375rem;
	border: 0;
	border-radius: var(--nx-radius-chip, 2px);
	background: var(--nx-surface-2);
	color: var(--nx-text-strong-muted);
	font: 500 11px/16px var(--nx-font-sans, inherit);
	white-space: nowrap;
}
.nx-chip :is(svg, .nx-ic) { inline-size: 12px; block-size: 12px; flex: none; }
/* meaning is a 6px square before the label, never a coloured fill or coloured text */
.nx-chip[data-tone]::before { content: ""; inline-size: 6px; block-size: 6px; flex: none; border-radius: 2px; background: var(--nx-chip-mark, transparent); }
/* identity, credential, role and info are neutral types: the chip carries no mark */
.nx-chip:is([data-tone="identity"], [data-tone="credential"], [data-tone="role"], [data-tone="info"]) { --nx-chip-mark: transparent; }
.nx-chip[data-tone="verified"] { --nx-chip-mark: var(--nx-mark-positive); }
.nx-chip[data-tone="warning"] { --nx-chip-mark: var(--nx-mark-attention); }
.nx-chip[data-mark="attention"] { --nx-chip-mark: var(--nx-mark-attention); }
.nx-chip[data-mark="critical"] { --nx-chip-mark: var(--nx-mark-critical); }
.nx-chip[data-mark="positive"] { --nx-chip-mark: var(--nx-mark-positive); }
.nx-chip[data-mark="accent"] { --nx-chip-mark: var(--nx-mark-accent); }
.nx-chip[data-mark]::before { content: ""; inline-size: 6px; block-size: 6px; flex: none; border-radius: 2px; background: var(--nx-chip-mark); }

/* nx-icon (design bar section 11.1): a 12px mask icon over a two-stop category gradient. The category is chosen with
   data-cat (decide, record, declare, review, discuss, learn, people, data); without it the icon is neutral muted text colour;
   in forced colours it is CanvasText. Icons are the one place a category hue appears: the chip fill and the label stay neutral.
   The glyph is data-icon="<category>" (the category's own glyph, the default for data-cat) or a custom mask in --nx-icon. */
.nx-icon {
	--_from: var(--nx-text-muted);
	--_to: var(--nx-text-muted);
	display: inline-block;
	inline-size: 12px;
	block-size: 12px;
	flex: none;
	vertical-align: -1px;
	background: linear-gradient(135deg, var(--_from), var(--_to));
	-webkit-mask: var(--nx-icon) center / contain no-repeat;
	mask: var(--nx-icon) center / contain no-repeat;
}
.nx-icon[data-cat="decide"] { --_from: var(--nx-cat-decide-from); --_to: var(--nx-cat-decide-to); }
.nx-icon[data-cat="record"] { --_from: var(--nx-cat-record-from); --_to: var(--nx-cat-record-to); }
.nx-icon[data-cat="declare"] { --_from: var(--nx-cat-declare-from); --_to: var(--nx-cat-declare-to); }
.nx-icon[data-cat="review"] { --_from: var(--nx-cat-review-from); --_to: var(--nx-cat-review-to); }
.nx-icon[data-cat="discuss"] { --_from: var(--nx-cat-discuss-from); --_to: var(--nx-cat-discuss-to); }
.nx-icon[data-cat="learn"] { --_from: var(--nx-cat-learn-from); --_to: var(--nx-cat-learn-to); }
.nx-icon[data-cat="people"] { --_from: var(--nx-cat-people-from); --_to: var(--nx-cat-people-to); }
.nx-icon[data-cat="data"] { --_from: var(--nx-cat-data-from); --_to: var(--nx-cat-data-to); }

.nx-icon:is([data-icon="decide"], [data-cat="decide"]:not([data-icon])) { --nx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16v16H4z M8 12l3 3 5-6'/%3E%3C/svg%3E"); }
.nx-icon:is([data-icon="record"], [data-cat="record"]:not([data-icon])) { --nx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l4 4v14H6z M14 3v5h5 M9 13h7 M9 17h7'/%3E%3C/svg%3E"); }
.nx-icon:is([data-icon="declare"], [data-cat="declare"]:not([data-icon])) { --nx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4 M5 4h12l-2 4 2 4H5'/%3E%3C/svg%3E"); }
.nx-icon:is([data-icon="review"], [data-cat="review"]:not([data-icon])) { --nx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/%3E%3C/svg%3E"); }
.nx-icon:is([data-icon="discuss"], [data-cat="discuss"]:not([data-icon])) { --nx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E"); }
.nx-icon:is([data-icon="learn"], [data-cat="learn"]:not([data-icon])) { --nx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5c3-1 6-1 8 1 2-2 5-2 8-1v13c-3-1-6-1-8 1-2-2-5-2-8-1z M12 6v13'/%3E%3C/svg%3E"); }
.nx-icon:is([data-icon="people"], [data-cat="people"]:not([data-icon])) { --nx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6z M3 20c0-3 3-5 6-5s6 2 6 5 M17 11a2.5 2.5 0 1 0 0-5 M16 15c3 0 5 2 5 5'/%3E%3C/svg%3E"); }
.nx-icon:is([data-icon="data"], [data-cat="data"]:not([data-icon])) { --nx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20V10 M12 20V4 M19 20v-7'/%3E%3C/svg%3E"); }
.nx-chip > .nx-icon { margin-inline-end: 0; }
@media (forced-colors: active) { .nx-icon { background: CanvasText; } }

/* nx-row: the one list grid (kind, title, context, due, action), the same in cards and tables */
.nx-row { 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, .75rem); min-block-size: var(--nx-row-min, 44px); padding-block: .5rem; border-block-end: 1px solid color-mix(in srgb, var(--nx-text-primary) 8%, transparent); font: 400 var(--nx-t-body, 14px)/1.4 var(--nx-font-sans, inherit); color: var(--nx-text-primary); }
.nx-row__kind { display: inline-flex; align-items: center; gap: .375rem; color: var(--nx-text-secondary); font-size: var(--nx-t-meta, 12px); min-inline-size: 0; }
.nx-row__title { 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; }
.nx-row__context { color: var(--nx-text-muted); font-size: var(--nx-t-meta, 12px); min-inline-size: 0; }
.nx-row__due { text-align: end; font-variant-numeric: tabular-nums; color: var(--nx-text-secondary); }
.nx-row__action { white-space: nowrap; justify-self: end; }
.nx-row :where(.nx-chip[data-mark]) { margin-inline-start: .375rem; }
@media (max-width: 40rem) { .nx-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kind due" "title title" "context action"; row-gap: .25rem; } .nx-row__kind { grid-area: kind; } .nx-row__title { grid-area: title; } .nx-row__context { grid-area: context; } .nx-row__due { grid-area: due; } .nx-row__action { grid-area: action; } }

/* nx-stat: a 24/600 tabular number, a 12px muted label, an optional nx-pulse slot; the whole tile is the link */
.nx-stat { position: relative; display: grid; align-content: space-between; gap: .25rem; min-block-size: 5.5rem; padding: var(--nx-space-4, 1rem); border: 1px solid var(--nx-border-hairline); border-radius: var(--nx-radius, 5px); background: var(--nx-bg-surface); color: var(--nx-text-primary); text-decoration: none; }
.nx-stat__value { font: 600 24px/1.1 var(--nx-font-sans, inherit); font-variant-numeric: tabular-nums; }
.nx-stat__label { font-size: var(--nx-t-meta, 12px); color: var(--nx-text-muted); }
.nx-stat__pulse { justify-self: end; align-self: end; }
a.nx-stat::after { content: ""; position: absolute; inset: 0; }
a.nx-stat:is(:hover, :focus-visible) { border-color: var(--nx-border-hairline-strong); }
.nx-eyebrow { font: 500 var(--nx-t-eyebrow, 11px)/1.2 var(--nx-font-sans, inherit); letter-spacing: var(--nx-track-eyebrow, .06em); text-transform: uppercase; color: var(--nx-text-muted); }
@media (forced-colors: active) { .nx-chip { border: 1px solid CanvasText; background: Canvas; color: CanvasText; } }