/* ==========================================================================
   NACDS Member Intelligence Hub
   Premium association aesthetic: restrained, data-rich, highly scannable.
   Scoped under .nhub so it cannot leak into the surrounding theme.
   ========================================================================== */

.nhub {
	--nhub-navy:      #0b2c4d;
	--nhub-navy-soft: #14406c;
	--nhub-blue:      #1a6fb5;
	--nhub-blue-weak: #e8f1fa;
	--nhub-accent:    #b8842b;
	--nhub-ink:       #16202b;
	--nhub-ink-2:     #45566a;
	--nhub-ink-3:     #6b7c91;
	--nhub-line:      #dfe5ec;
	--nhub-line-2:    #eef2f6;
	--nhub-surface:   #ffffff;
	--nhub-canvas:    #f6f8fb;
	--nhub-good:      #1d6f42;
	--nhub-warn:      #9a5b00;
	--nhub-bad:       #b32d2e;
	--nhub-radius:    10px;
	--nhub-radius-sm: 8px;

	/* Interactive surfaces — textboxes, selects, the search box, secondary
	   buttons and chips — share one fill, one border and one radius, so the
	   page reads as one set of controls rather than several. Fixed values
	   rather than theme-adopted ones: these are the association's, and a host
	   theme has no say in them. */
	--nhub-field-bg:      rgba(1, 39, 76, .2);
	--nhub-field-border:  rgba(1, 39, 76, .4);
	--nhub-field-radius:  8px;
	--nhub-field-ink:     #01274c;

	/* The discovery icons. Fixed, like the control colours: a set of icons that
	   changed colour with the host theme would stop being a set. */
	--nhub-icon:          #064f99;
	--nhub-shadow:    0 1px 2px rgba(16, 32, 48, .06), 0 8px 24px rgba(16, 32, 48, .05);

	/* Typography travels through tokens so the hub can adopt the surrounding
	   theme's fonts and sizes at runtime instead of imposing its own. The values
	   here are only the fallback for a page with no theme to inherit from. */
	--nhub-font:           "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--nhub-font-heading:   var(--nhub-font);
	--nhub-font-size:      16px;
	--nhub-line-height:    1.55;
	--nhub-heading-weight: 650;
	--nhub-heading-spacing: -.015em;

	box-sizing: border-box;
	max-width: 1280px;
	margin: 0 auto;
	padding-block: 8px;
	padding-inline: 20px;
	color: var(--nhub-ink);
	font-family: var(--nhub-font);
	font-size: var(--nhub-font-size);
	line-height: var(--nhub-line-height);
	-webkit-font-smoothing: antialiased;
}

/* Inside a theme's content area the theme already supplies the column width and
   the side padding. Keeping our own on top of it indents the hub out of
   alignment with everything else on the page. */
.nhub.is-theme-matched {
	max-width: none;
	padding-inline: 0;
}

/* One exception: at phone width a theme's content area is often flush to the
   screen edge, and text that touches the bezel is unreadable whoever's fault
   it is. */
@media (max-width: 600px) {
	.nhub.is-theme-matched { padding-inline: 16px; }
}

.nhub *,
.nhub *::before,
.nhub *::after { box-sizing: inherit; }

.nhub :focus-visible {
	outline: 3px solid var(--nhub-blue);
	outline-offset: 2px;
	border-radius: 4px;
}

.nhub h1, .nhub h2, .nhub h3, .nhub h4 {
	margin: 0;
	color: var(--nhub-navy);
	font-family: var(--nhub-font-heading);
	font-weight: var(--nhub-heading-weight);
	letter-spacing: var(--nhub-heading-spacing);
	line-height: 1.2;
}

.nhub p { margin: 0; }

.nhub .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

/*
 * One gap, used twice. The space between this label and the heading under it is
 * the masthead's unit of rhythm, named here so the distance between the search
 * box and the tab row below it can be set to the same number rather than to
 * something that merely looks close.
 */
:root, .nhub {
	--nhub-masthead-gap: 12px;
	--nhub-masthead-column-gap: 28px;

}

.nhub-eyebrow {
	margin: 0 0 var(--nhub-masthead-gap);
	color: var(--nhub-ink-3);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* The masthead's three labels — Member Intelligence Hub, Recently joined,
   Discovery — in a neutral grey rather than the blue-grey the rest of the hub
   uses. Scoped to the masthead on purpose: the same class labels a spotlight,
   a profile heading and a section title elsewhere, and recolouring those too
   would be answering a question nobody asked. */
.nhub-masthead .nhub-eyebrow { color: #666666; }

/* ---------------------------------------------------------------- buttons */

.nhub-btn {
	font-family: var(--nhub-font);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 18px;
	border: 1px solid transparent;
	border-radius: var(--nhub-field-radius);
	background: none;
	color: inherit;
	font: inherit;
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* `display: inline-flex` above outranks the browser's own rule for [hidden], so
   a button hidden from script would otherwise stay on screen. */
.nhub-btn[hidden] { display: none; }

.nhub-btn--primary { background: var(--nhub-navy); color: #fff; }
.nhub-btn--primary:hover { background: var(--nhub-navy-soft); }
.nhub-btn--primary[disabled] { opacity: .6; cursor: not-allowed; }

/* Secondary actions take the shared control fill. The primary button keeps
   its solid navy: if every button looked the same, the one the member is
   meant to press would stop announcing itself. */
.nhub-btn--quiet { border-color: var(--nhub-field-border); background: var(--nhub-field-bg); color: var(--nhub-field-ink); }
.nhub-btn--quiet:hover { border-color: var(--nhub-field-ink); background: #fff; }

.nhub-btn--ghost { border-color: var(--nhub-field-border); background: var(--nhub-field-bg); color: var(--nhub-field-ink); }
.nhub-btn--ghost:hover { border-color: var(--nhub-field-ink); background: #fff; }

.nhub-btn--link {
	min-height: 0; padding: 0;
	color: var(--nhub-blue);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ------------------------------------------------------------------- gate */

.nhub-gate {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60vh;
	padding-block: 48px;
}

.nhub-gate__panel {
	width: 100%;
	max-width: 460px;
	padding: 40px;
	border: 1px solid var(--nhub-line);
	border-radius: var(--nhub-radius);
	background: var(--nhub-surface);
	box-shadow: var(--nhub-shadow);
}

.nhub-gate__title { margin-bottom: 10px; font-size: 30px; }
.nhub-gate__lede { margin-bottom: 28px; color: var(--nhub-ink-2); font-size: 15px; }

.nhub-gate__foot {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--nhub-line-2);
	color: var(--nhub-ink-3);
	font-size: 13px;
}

.nhub-field { margin-bottom: 18px; }

.nhub-field label {
	display: block;
	margin-bottom: 6px;
	color: var(--nhub-ink);
	font-size: 13.5px;
	font-weight: 600;
}

.nhub-field input {
	width: 100%;
	min-height: 46px;
	padding: 11px 14px;
	border: 1px solid var(--nhub-field-border);
	border-radius: var(--nhub-field-radius);
	background: var(--nhub-field-bg);
	color: var(--nhub-field-ink);
	font: inherit;
	font-size: 15px;
}

.nhub-field input::placeholder { color: var(--nhub-ink-2); }
.nhub-field input:focus { border-color: var(--nhub-field-ink); background: #fff; }

.nhub-form .nhub-btn--primary { width: 100%; }

.nhub-alert {
	margin: 0 0 16px;
	padding: 11px 14px;
	border: 1px solid #f0c9c9;
	border-left: 3px solid var(--nhub-bad);
	border-radius: var(--nhub-radius-sm);
	background: #fdf3f3;
	color: #7f2223;
	font-size: 14px;
}

/* ----------------------------------------------------------------- topbar */

.nhub-topbar {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 10px 0 12px;
	border-bottom: 1px solid var(--nhub-line);
}

.nhub-brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }

.nhub-brandmark {
	display: grid;
	place-items: center;
	width: 38px; height: 38px;
	border-radius: 9px;
	background: var(--nhub-navy);
	color: #fff;
	font-size: 17px;
	font-weight: 700;
}

/*
 * With an uploaded icon the navy tile would be a second badge behind the first,
 * so the ground drops away and the picture is the mark.
 */
.nhub-brandmark--image {
	background: none;
	border-radius: 0;
	overflow: hidden;
	/* A letter reads at 38px; a logo with a wordmark inside it does not. The
	   image mark gets what the header can spare without the row growing. */
	width: 46px;
	height: 46px;
}

.nhub-brandmark--image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Centred above the panel. The form beneath it stays left-aligned: labels and
   fields read down a single edge, and centring those would cost legibility to
   match the mark. */
.nhub-gate__icon {
	display: block;
	width: 96px;
	height: 96px;
	object-fit: contain;
	margin: 0 auto 20px;
}

.nhub-brand__text { display: flex; flex-direction: column; line-height: 1.25; }
.nhub-brand__text strong { color: var(--nhub-navy); font-size: 15.5px; letter-spacing: .01em; }
.nhub-brand__text small { color: var(--nhub-ink-3); font-size: 12px; }

.nhub-nav { display: flex; gap: 4px; }

.nhub-nav__btn {
	min-height: 40px;
	padding: 8px 16px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--nhub-ink-2);
	font: inherit;
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
}

.nhub-nav__btn:hover { background: var(--nhub-line-2); color: var(--nhub-navy); }
.nhub-nav__btn.is-active { background: var(--nhub-navy); color: #fff; }

.nhub-notice {
	margin: 14px 0 0;
	padding: 10px 14px;
	border-left: 3px solid var(--nhub-warn);
	border-radius: var(--nhub-radius-sm);
	background: #fff8ec;
	color: #6b4400;
	font-size: 13.5px;
}

/* ------------------------------------------------------------------- hero */

/* ---------------------------------------------------------------- masthead

   Everything a member can act on — the search box, the headline figures, the
   discovery shortcuts, the membership-type pills and the filter bar — sits
   above the fold on an ordinary laptop, and the list of companies begins
   exactly at it. The page still scrolls; what scrolls is the results, which
   is the only part that should.

   At narrower widths the three columns fall back to one, in reading order:
   what this is, then the numbers, then the shortcuts.
   ------------------------------------------------------------------------ */

.nhub-masthead {
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;
	padding: 18px 0 4px;
}

/* The two-column masthead the other shortcodes use. It stays above the rules
   below on purpose: .nhub-masthead and .nhub-masthead--rail are both a single
   class, so they carry the same weight and the later one wins. Put this after
   them and every three-column arrangement below is silently overruled — which
   is what happened, and what the measurements caught. */
@media (min-width: 900px) {
	.nhub-masthead { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 28px; }
}

.nhub-band { container-type: inline-size; container-name: nhub-band; }

/* ---------------------------------------------------------------------------
 * The masthead's columns, decided by the band's width and not the window's.
 *
 * The hub caps itself at 1280px unless the theme is matched, so the window and
 * the masthead are routinely two different sizes — a 1200px band inside a
 * 1920px window. Asking the window gives that band the layout meant for a wide
 * one: Recently joined and Discovery take 631px of 1200, the heading column is
 * left with 529px, and the membership tabs below it break into three lines.
 *
 * Every step below is one question asked of one element, in order, so there is
 * no arrangement that two rules can both claim. The previous version mixed the
 * two kinds of query and a page at 820px got the three-column layout with a
 * 208px heading column, which is how a masthead ends up with nothing in it.
 * ------------------------------------------------------------------------ */

/* Wide: everything at full size. Recently joined gets 360px because 250px was
   enough to list five companies and not enough to read them, with every second
   name clipped mid-word; at 360px the name, the industry, the city and the
   join date each have the room they need. */
@container nhub-band (min-width: 1400px) {
	.nhub-masthead--rail {
		grid-template-columns: minmax(0, 1fr) minmax(0, 360px) 215px;
		column-gap: var(--nhub-masthead-column-gap);
	}
}

/* Middling — the default 1280px hub in a wide window lands here. The two side
   columns give way to the heading column, because the tab row beneath it is a
   control, and a control that wraps three times is harder to use than a column
   of names is to read. */
@container nhub-band (min-width: 1000px) and (max-width: 1399px) {
	.nhub-masthead--rail {
		grid-template-columns: minmax(0, 1fr) minmax(0, 300px) 196px;
		column-gap: var(--nhub-masthead-column-gap);
	}
}

/* Narrow: no room for three. Recently joined folds under the heading and lays
   its five companies out across the full width; the discovery rail keeps its
   place beside the heading, where it is still only three short links. */
@container nhub-band (min-width: 760px) and (max-width: 999px) {
	.nhub-masthead--rail {
		grid-template-columns: minmax(0, 1fr) 200px;
		column-gap: var(--nhub-masthead-column-gap);
	}
	.nhub-masthead__joined { grid-column: 1 / -1; border-left: 0; padding-left: 0; }
	.nhub-joined { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
}

/* Below that the base rule stands: one column, in reading order. */
@container nhub-band (max-width: 759px) {
	.nhub-masthead__joined { border-left: 0; padding-left: 0; }
}


/* The heading's size is decided by this column, not by the window.
 *
 * A window query is a guess about the column: a site with a 1200px content
 * area inside a 1900px window would take the widest heading and overrun the
 * figures beside it, while a full-width site at the same window size has room
 * to spare. The column knows its own width, so it is the one asked. */
.nhub-masthead__intro { min-width: 0; container-type: inline-size; container-name: nhub-intro; }

.nhub-masthead__rail {
	align-self: start;
	border-left: 1px solid var(--nhub-line);
	padding-left: 20px;
}

@media (max-width: 899px) {
	.nhub-masthead__rail { border-left: 0; padding-left: 0; border-top: 1px solid var(--nhub-line); padding-top: 16px; }
}

.nhub-masthead__joined {
	min-width: 0;
	align-self: start;
}

.nhub-joined {
	display: grid;
	gap: 2px;
	margin-top: 8px;
}

.nhub-joined__item {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	width: 100%;
	/* Five rows sit beside three figures. Tight enough that the pair of them
	   do not push the directory below the fold, which is the whole point of the
	   masthead being one band. */
	padding: 5px 8px;
	border: 1px solid transparent;
	border-radius: var(--nhub-field-radius);
	background: none;
	text-align: left;
	font: inherit;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}

.nhub-joined__item:hover { border-color: var(--nhub-line); background: var(--nhub-canvas); }

/* 1.3, not the page's 1.5: three short lines in a narrow column read as one
   block at this spacing, and the five rows then sit level with the figures
   beside them instead of running past them. */
.nhub-joined__text { display: flex; flex-direction: column; min-width: 0; gap: 0; line-height: 1.3; }
.nhub-joined__text strong {
	color: var(--nhub-navy);
	font-size: 13.5px;
	/* A member name is as long as it is; one line and an ellipsis keeps five
	   rows the same height whatever the data does. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.nhub-joined__text span { color: var(--nhub-ink-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nhub-joined__text time { color: var(--nhub-ink-3); font-size: 11px; font-weight: 600; letter-spacing: .01em; }

.nhub-joined__item .nhub-card__avatar { flex: 0 0 auto; width: 30px; height: 30px; font-size: 11px; }

.nhub-hero { padding: 0; }

/* One line on a laptop and up. The cap is what keeps "Explore the member
   network." from wrapping: it is sized to the longest line the hub ships, and
   max-width is gone because a width limit is what forced the wrap. Below the
   breakpoint it is free to wrap rather than shrink to nothing.

   Raised at 1.12.0 — 31px to 35px at the top end, 24px to 26px at the bottom
   — and stepped rather than scaled.

   The size used to be clamp(24px, 2.1vw, 31px), which lands on a fractional
   font size at almost every window width: 29.4px here, 33.07px there. A
   fraction of a pixel of font size becomes a fraction of a pixel of leading
   above the capital letters, and the browser rounds that to whole device
   pixels however it likes — so the visible gap between this heading and the
   label above it wandered between 11px and 13px as the window moved, while
   every number in the stylesheet stayed put. Three whole sizes at two
   breakpoints give the same growth with a leading that is constant inside each
   step, which is what makes the gap below the search box measurably equal to
   the gap above this heading rather than approximately equal. */
.nhub-hero__title { font-size: 26px; }

/* The widths are the text's own, re-measured for "Explore your network.":
   334px set at 31px, 378px at 35px. The thresholds sit about 8% above those,
   which is the room a fallback font needs on a machine where Inter does not
   load — the step is taken only once the column can hold the line it asks for,
   in whatever face the line arrives in. Above that the heading is held to one
   line; below it, it is free to wrap rather than shrink to nothing. */
@container nhub-intro (min-width: 370px) {
	.nhub-hero__title { font-size: 31px; white-space: nowrap; }
}

@container nhub-intro (min-width: 420px) {
	.nhub-hero__title { font-size: 35px; }
}

/* One line.
 *
 * 46ch was a reading measure, and a reading measure is right for a paragraph.
 * This is not a paragraph — it is the sentence under the heading, and broken
 * across two lines it made the top of the page look like the start of an
 * article. Measured at 640px on one line, so the cap is set above that with
 * room for a fallback font; below it the sentence wraps rather than being
 * squeezed. */
.nhub-hero__lede {
	max-width: 70ch;
	margin-top: var(--nhub-masthead-gap);
	color: var(--nhub-ink-2);
	font-size: 15.5px;
}

.nhub-search {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 720px;
	margin-top: var(--nhub-masthead-gap);
	padding: 4px 6px 4px 14px;
	border: 1px solid var(--nhub-field-border);
	border-radius: var(--nhub-field-radius);
	background: var(--nhub-field-bg);
}

.nhub-search:focus-within { border-color: var(--nhub-field-ink); background: #fff; }
.nhub-search__icon { flex: none; width: 19px; height: 19px; color: var(--nhub-field-ink); opacity: .7; }

.nhub-search input {
	flex: 1;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--nhub-field-ink);
	font: inherit;
	font-size: 15.5px;
}

.nhub-search input::placeholder { color: var(--nhub-ink-2); }
.nhub-search input:focus { outline: none; }
.nhub-search input::-webkit-search-cancel-button { display: none; }

.nhub-search__clear {
	flex: none;
	min-height: 34px;
	padding: 6px 12px;
	border: 1px solid var(--nhub-field-border);
	border-radius: var(--nhub-field-radius);
	background: #fff;
	color: var(--nhub-field-ink);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.nhub-hero__actions { margin-top: 12px; }

/* --------------------------------------------------------- suggestions */

.nhub-suggest {
	max-width: 720px;
	margin-top: 14px;
	border: 1px solid var(--nhub-line);
	border-radius: var(--nhub-radius);
	background: var(--nhub-surface);
	box-shadow: var(--nhub-shadow);
	overflow: hidden;
}

.nhub-suggest__group { padding: 10px 0; border-top: 1px solid var(--nhub-line-2); }
.nhub-suggest__group:first-child { border-top: 0; }

.nhub-suggest__label {
	padding: 4px 16px 8px;
	color: var(--nhub-ink-3);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.nhub-suggest__item {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 9px 16px;
	border: 0;
	background: none;
	color: var(--nhub-ink);
	font: inherit;
	font-size: 14.5px;
	text-align: left;
	cursor: pointer;
}

.nhub-suggest__item:hover,
.nhub-suggest__item:focus { background: var(--nhub-blue-weak); }
.nhub-suggest__item span { color: var(--nhub-ink-3); font-size: 13px; }
.nhub-suggest__empty { padding: 18px 16px; color: var(--nhub-ink-3); font-size: 14.5px; }

/* ---------------------------------------------------------------- metrics */

.nhub-metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
	gap: 10px;
	margin-top: 0;
}

/* Outside the masthead — on a page that puts the figures below the heading —
   they keep a little air above them. */
.nhub-view .nhub-metrics,
.nhub-dir__body > .nhub-metrics { margin-top: 20px; }

.nhub-metric {
	min-height: 76px;
	padding: 12px 14px;
	border: 1px solid var(--nhub-field-border);
	border-radius: var(--nhub-field-radius);
	background: var(--nhub-surface);
	text-align: left;
	font: inherit;
	cursor: pointer;
	transition: border-color .15s ease, transform .15s ease;
}

.nhub-metric:hover { border-color: var(--nhub-blue); transform: translateY(-1px); }
.nhub-metric[disabled] { cursor: default; }
.nhub-metric[disabled]:hover { border-color: var(--nhub-line); transform: none; }

.nhub-metric b {
	display: block;
	color: var(--nhub-navy);
	font-size: 25px;
	font-weight: 680;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.02em;
	line-height: 1.1;
}

.nhub-metric span {
	display: block;
	margin-top: 2px;
	color: var(--nhub-ink-3);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	line-height: 1.3;
}

/* --------------------------------------------------------------- sections */

.nhub-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin: 26px 0 14px;
}

.nhub-section-head h2 { font-size: 20px; }
.nhub-section-head--results { margin: 16px 0 12px; }

.nhub-count {
	color: var(--nhub-ink-2);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ------------------------------------------------------------------- tabs */

/* Tabs and the lucky dip on one row. The dip is set apart by more than the
   gap between tabs — it is a different kind of choice, and reading as a fifth
   tab would be a lie about what it does. */
.nhub-typebar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	/* One rhythm unit below the search box — the same measure that sets the
	   space under "Recently joined" and "Discovery", so the masthead's three
	   columns breathe alike.

	   This used to carry a one-pixel correction, because the gap it had to
	   match sat under an eyebrow whose line box contributed leading a margin
	   could not see. That eyebrow is gone, so the correction is gone with it
	   rather than left behind as a number nobody can explain. */
	margin: var(--nhub-masthead-gap) 0 0;
}

/*
 * The tabs and the lucky dip are one row, not a row inside a row. Nested, the
 * tab list is a flex item that shrinks and wraps inside itself, which put the
 * dip on a line of its own and the tabs on two. `display: contents` dissolves
 * the box and leaves the buttons as direct children, so they all wrap together
 * — and the list keeps its role, which is what it is there for.
 */
.nhub-typebar > .nhub-tabs { display: contents; }
.nhub-typebar__lucky { margin-left: 18px; }

/*
 * The row used to overhang the column beside it, because the figures that sat
 * there were three short tiles that had finished by the time the row reached
 * them. Recently joined has not finished — it is five rows of names going down
 * past the fold — so there is nothing to lean into any more and the rule is
 * gone. The heading column is wider than it was by most of what the figures
 * gave up, which is where the width came back from.
 */

/* The tabs choose what the directory lists, so they belong to the directory.
   They sit in the masthead for the sake of the rhythm, and step out of sight
   when the view they govern is not the one on screen. */
.nhub-app[data-view="people"] .nhub-typebar,
.nhub-app[data-view="insights"] .nhub-typebar { display: none; }

.nhub-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* The same box as a tab, so the row sits on one line rather than on two
   that differ by a pixel. */
.nhub-typebar__lucky { min-height: 40px; height: 40px; padding: 8px 16px; font-size: 14px; }

.nhub-tab {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	min-height: 40px;
	/* 14px, not 16: five membership types, two of them beginning with
	   "International", and a lucky dip have to share one line. */
	padding: 8px 14px;
	border: 1px solid var(--nhub-field-border);
	border-radius: var(--nhub-field-radius);
	background: var(--nhub-field-bg);
	color: var(--nhub-field-ink);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.nhub-tab:hover { border-color: var(--nhub-field-ink); background: #fff; }

/* The two international tabs, tinted so the domestic and international halves
   of the membership separate at a glance. :not(.is-active) so the selected tab
   still reads as selected — a tinted tab and a chosen tab are different things
   and must not look alike. */
.nhub-tab.is-international:not(.is-active) {
	background: rgba(78, 155, 229, .4);
	border-color: rgba(78, 155, 229, .55);
}

.nhub-tab.is-international:not(.is-active):hover {
	background: rgba(78, 155, 229, .55);
	border-color: var(--nhub-field-ink);
}

.nhub-tab.is-active {
	border-color: var(--nhub-navy);
	background: var(--nhub-navy);
	color: #fff;
}

.nhub-tab small { color: inherit; font-size: 12.5px; font-weight: 600; opacity: .7; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------- quick discovery */

/* A rail of shortcuts rather than a grid of cards. The cards took a whole band
   of the screen to say four short things; as a list beside the figures they
   cost one column and no vertical space at all. */
.nhub-quick {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

@media (max-width: 899px) {
	.nhub-quick { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); column-gap: 20px; }
}

.nhub-quick__item {
	display: grid;
	grid-template-columns: 26px 1fr;
	align-items: start;
	column-gap: 10px;
	row-gap: 0;
	padding: 11px 2px;
	border: 0;
	border-top: 1px solid var(--nhub-line-2);
	border-radius: 0;
	background: none;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.nhub-quick__item:first-child { border-top: 0; }
.nhub-quick__item:not(:disabled):hover strong { text-decoration: underline; text-underline-offset: 3px; }

/* A shortcut that cannot do anything from this tab.
 *
 * Dimmed rather than removed, so the rail keeps its shape as a member moves
 * between tabs — a row that disappears makes the page jump and slides the next
 * row under the cursor mid-click. The icon fades further than the words
 * because it is the part carrying no information. */
.nhub-quick__item:disabled {
	cursor: default;
	opacity: .42;
}

.nhub-quick__item:disabled .nhub-quick__icon { opacity: .6; }
.nhub-quick__item:disabled strong { text-decoration: none; }

/* The icon spans both rows so it sits beside the pair of lines rather than
   hanging off the first one. */
.nhub-quick__icon {
	grid-column: 1;
	grid-row: 1 / span 2;
	display: block;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	color: var(--nhub-icon);
}

.nhub-quick__icon svg { display: block; width: 100%; height: 100%; }

.nhub-quick__item strong { grid-column: 2; color: var(--nhub-blue); font-size: 15.5px; line-height: 1.3; }
.nhub-quick__item small { grid-column: 2; margin-top: 1px; color: var(--nhub-ink-3); font-size: 13px; line-height: 1.35; }

/* ------------------------------------------------------------ browse panel */

.nhub-panel-target {
	margin-top: 18px;
	padding: 22px;
	border: 1px solid var(--nhub-line);
	border-radius: var(--nhub-radius);
	background: var(--nhub-canvas);
}

.nhub-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.nhub-pill {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	min-height: 40px;
	padding: 8px 14px;
	border: 1px solid var(--nhub-line);
	border-radius: 999px;
	background: var(--nhub-surface);
	color: var(--nhub-ink);
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}

.nhub-pill:hover { border-color: var(--nhub-blue); background: var(--nhub-blue-weak); }
.nhub-pill b { color: var(--nhub-ink-3); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- spotlight */

.nhub-spotlight[hidden] { display: none; }

.nhub-spotlight {
	position: relative;
	margin-top: 18px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px;
	margin-top: 34px;
	padding: 30px;
	border: 1px solid var(--nhub-navy);
	border-radius: var(--nhub-radius);
	background: linear-gradient(180deg, #0b2c4d 0%, #123f68 100%);
	color: #fff;
}

.nhub-spotlight__main { padding-right: 44px; flex: 1 1 340px; }
.nhub-spotlight .nhub-eyebrow { color: rgba(255, 255, 255, .66); }
.nhub-spotlight h2 { color: #fff; font-size: 27px; }

.nhub-spotlight p {
	max-width: 68ch;
	margin-top: 10px;
	color: rgba(255, 255, 255, .82);
	font-size: 15px;
}

.nhub-spotlight .nhub-tags span {
	border-color: rgba(255, 255, 255, .28);
	background: rgba(255, 255, 255, .1);
	color: #fff;
}

.nhub-spotlight__close {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--nhub-field-border);
	border-radius: var(--nhub-field-radius);
	background: var(--nhub-field-bg);
	color: var(--nhub-field-ink);
	font: inherit;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.nhub-spotlight__close:hover { border-color: var(--nhub-field-ink); background: #fff; }

/* The spotlight is a dark panel, and the shared control fill is a pale tint
   meant for white backgrounds — on navy it renders as dark-on-dark and the
   button all but disappears. Inside the spotlight the same button inverts. */
.nhub-spotlight .nhub-spotlight__close {
	border-color: rgba(255, 255, 255, .45);
	background: rgba(255, 255, 255, .14);
	color: #fff;
}

.nhub-spotlight .nhub-spotlight__close:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, .28);
	color: #fff;
}

.nhub-spotlight__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.nhub-spotlight .nhub-btn--primary { background: #fff; color: var(--nhub-navy); }
.nhub-spotlight .nhub-btn--primary:hover { background: #e9eff5; }

.nhub-spotlight .nhub-btn--quiet {
	border-color: rgba(255, 255, 255, .4);
	background: transparent;
	color: #fff;
}

.nhub-spotlight .nhub-btn--quiet:hover { background: rgba(255, 255, 255, .12); }

/* ---------------------------------------------------------------- filters */

.nhub-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var(--nhub-line);
	border-radius: var(--nhub-radius);
	background: var(--nhub-canvas);
}

.nhub-select { display: flex; flex: 1 1 180px; flex-direction: column; gap: 4px; min-width: 150px; }

.nhub-select > span {
	color: var(--nhub-ink-2);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.nhub-select select {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--nhub-field-border);
	border-radius: var(--nhub-field-radius);
	background: var(--nhub-field-bg);
	color: var(--nhub-field-ink);
	font: inherit;
	font-size: 14.5px;
	font-weight: 600;
}

.nhub-select select:focus { border-color: var(--nhub-field-ink); }

.nhub-filters .nhub-btn { flex: 0 0 auto; }

/* ------------------------------------------------------------------ chips */

/* The filter bars, now in the heading column under the membership buttons.
 *
 * One per tab. A bar whose tab is not showing is not merely invisible — it is
 * display:none, so it is out of the keyboard tab order too, which a hidden-but-
 * focusable row of dropdowns would not be. */
.nhub-filters--view { display: none; }
.nhub-app[data-view="directory"] .nhub-filters--view[data-for="directory"],
.nhub-app[data-view="people"] .nhub-filters--view[data-for="people"] { display: flex; }

/* The same step as every other gap in this column. */
.nhub-masthead__intro .nhub-filters { margin-top: var(--nhub-masthead-gap); }
.nhub-masthead__intro .nhub-chips { margin-top: 10px; }
.nhub-masthead__intro .nhub-chips:empty { margin-top: 0; }

.nhub-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.nhub-chips:empty { margin-top: 0; }

.nhub-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 34px;
	padding: 6px 8px 6px 14px;
	border: 1px solid var(--nhub-field-border);
	border-radius: var(--nhub-field-radius);
	background: var(--nhub-field-bg);
	color: var(--nhub-field-ink);
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
}

.nhub-chip::after {
	content: "×";
	display: grid;
	place-items: center;
	width: 20px; height: 20px;
	border-radius: 50%;
	background: rgba(11, 44, 77, .1);
	font-size: 15px;
	line-height: 1;
}

.nhub-chip:hover::after { background: rgba(11, 44, 77, .22); }

/* ------------------------------------------------------------------ cards */

.nhub-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
	gap: 14px;
	margin-top: 18px;
	min-height: 80px;
}

.nhub-card {
	display: flex;
	flex-direction: column;
	padding: 20px;
	border: 1px solid var(--nhub-line);
	border-radius: var(--nhub-radius);
	background: var(--nhub-surface);
	text-align: left;
	font: inherit;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.nhub-card:hover { border-color: var(--nhub-blue); box-shadow: var(--nhub-shadow); }

.nhub-card__top { display: flex; align-items: flex-start; gap: 12px; }

.nhub-card__avatar {
	display: grid;
	place-items: center;
	flex: none;
	width: 44px; height: 44px;
	border-radius: 9px;
	background: var(--nhub-blue-weak);
	color: var(--nhub-navy);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .01em;
}

.nhub-cards--people .nhub-card__avatar { border-radius: 50%; }

.nhub-card__name {
	margin: 0;
	color: var(--nhub-navy);
	font-size: 16.5px;
	font-weight: 650;
	line-height: 1.3;
}

.nhub-card__role { margin-top: 3px; color: var(--nhub-ink-2); font-size: 13.5px; line-height: 1.4; }

.nhub-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin-top: 14px;
	margin-bottom: 16px;
	color: var(--nhub-ink-3);
	font-size: 13px;
}

.nhub-card__meta b { color: var(--nhub-ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }

/* The badge and the call to action sit on the floor of the card.
 *
 * The grid already makes every card in a row the same height; what it does not
 * do is stop the content ending wherever it happens to end. So one company
 * whose name runs to two lines pushed its badge 25px below its neighbours' and
 * the row read as a mistake — measured on the international chain grid, where
 * "Farmacia Guadalajara S.A. de C.V." wraps and "Chemist Warehouse" does not.
 *
 * margin-top: auto takes up the slack inside the card instead, so the footers
 * line up across the row whatever the names above them do. */
.nhub-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--nhub-line-2);
	font-size: 13.5px;
}

/* With the membership badge gone the footer has one child, and
   space-between leaves it on the left under a rule that runs the full width.
   Pushed right, it reads as the end of the card rather than a stray link. */
.nhub-card__foot--cta { justify-content: flex-end; }

.nhub-card__cta { color: var(--nhub-blue); font-weight: 600; }

.nhub-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--nhub-line-2);
	color: var(--nhub-ink-2);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.nhub-badge--chain     { background: #e4eefa; color: #10426f; }
.nhub-badge--associate { background: #eaf3ec; color: #1d6f42; }
.nhub-badge--intl      { background: #f6eede; color: #7a5312; }

.nhub-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

.nhub-tags span {
	padding: 4px 10px;
	border: 1px solid var(--nhub-line);
	border-radius: 999px;
	color: var(--nhub-ink-2);
	font-size: 12.5px;
}

/* ------------------------------------------------------- states & paging */

.nhub-empty {
	grid-column: 1 / -1;
	padding: 44px 24px;
	border: 1px dashed var(--nhub-line);
	border-radius: var(--nhub-radius);
	background: var(--nhub-canvas);
	color: var(--nhub-ink-2);
	text-align: center;
}

.nhub-empty strong { display: block; margin-bottom: 6px; color: var(--nhub-navy); font-size: 17px; }

.nhub-skeleton {
	min-height: 150px;
	border: 1px solid var(--nhub-line-2);
	border-radius: var(--nhub-radius);
	background: linear-gradient(100deg, #f2f5f9 30%, #e9eef4 50%, #f2f5f9 70%);
	background-size: 260% 100%;
	animation: nhub-shimmer 1.3s linear infinite;
}

@keyframes nhub-shimmer {
	from { background-position: 140% 0; }
	to   { background-position: -40% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.nhub-skeleton { animation: none; }
	.nhub * { transition: none !important; }
}

.nhub-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 22px;
}

.nhub-pager button {
	min-width: 44px;
	min-height: 40px;
	padding: 8px 12px;
	border: 1px solid var(--nhub-line);
	border-radius: var(--nhub-radius-sm);
	background: var(--nhub-surface);
	color: var(--nhub-ink-2);
	font: inherit;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
}

.nhub-pager button:hover:not([disabled]) { border-color: var(--nhub-blue); color: var(--nhub-navy); }
.nhub-pager button[aria-current="true"] { border-color: var(--nhub-navy); background: var(--nhub-navy); color: #fff; }
.nhub-pager button[disabled] { opacity: .45; cursor: not-allowed; }
.nhub-pager .nhub-pager__info { margin-left: auto; color: var(--nhub-ink-3); font-size: 13.5px; }

/* ----------------------------------------------------------------- modal */

.nhub-modal {
	position: fixed;
	inset: 0;
	/* Above anything a theme is likely to give its sticky header. The dialog is
	   also re-parented to <body> on open, because a z-index means nothing from
	   inside a stacking context the theme created. */
	z-index: 2147483000;
	display: grid;
	place-items: center;
	padding: 20px;
}
.nhub-modal[hidden] { display: none; }
.nhub-modal__backdrop { position: absolute; inset: 0; background: rgba(11, 27, 43, .55); }

/*
 * The card itself does not scroll; its body does. Scrolling the whole card took
 * the company name and the close button up out of sight with the content, so a
 * profile read halfway down the people list had no heading and no way out.
 */
.nhub-modal__card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(860px, 100%);
	max-height: 88vh;
	border-radius: 14px;
	background: var(--nhub-surface);
	box-shadow: 0 24px 60px rgba(11, 27, 43, .3);
	overflow: hidden;
}

.nhub-modal__body {
	padding: 0 34px 34px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* The name stays put while everything under it scrolls. */
.nhub-modal__body .nhub-profile__head {
	position: sticky;
	top: 0;
	z-index: 2;
	margin: 0 -34px 0;
	padding: 28px 78px 16px 34px;
	background: var(--nhub-surface);
	border-bottom: 1px solid var(--nhub-line-2);
}

.nhub-modal__close {
	position: absolute;
	top: 18px; right: 18px;
	z-index: 3;
	width: 40px; height: 40px;
	border: 0;
	border-radius: 50%;
	background: var(--nhub-line-2);
	color: var(--nhub-ink-2);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.nhub-modal__close:hover { background: var(--nhub-line); color: var(--nhub-navy); }

/* The heading row of a person's profile: name on the left, the one action on
   the right, clear of the close button. */
.nhub-profile__head--action {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.nhub-profile__heading { min-width: 0; }

.nhub-profile__action {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	/* Clear of the close button, which is absolutely positioned over this row. */
	margin-right: 34px;
}

.nhub-send {
	padding: 0;
	border: 0;
	background: none;
	color: var(--nhub-blue);
	font: inherit;
	font-size: 14.5px;
	font-weight: 700;
	cursor: pointer;
}

.nhub-send:hover { text-decoration: underline; }
.nhub-send[disabled] { color: var(--nhub-ink-3); cursor: default; text-decoration: none; }

.nhub-send__status {
	max-width: 28ch;
	color: var(--nhub-ink-3);
	font-size: 12.5px;
	text-align: right;
}

/* A failure is the one message here with more than a few words in it, so it
   reads from the left like any other sentence while the block itself stays
   under the button. Right-ragged prose is hard work for something a person is
   already annoyed to be reading. */
.nhub-send__status.is-error { max-width: 38ch; color: #96331f; text-align: left; }

/* The road-by-road detail: for the administrator, not the member. Quieter than
   the sentence above it, but not small — this line exists to survive being
   photographed and sent on, and a version number has to stay legible when it
   does. */
.nhub-send__detail {
	display: block;
	margin-top: 5px;
	color: var(--nhub-ink-2);
	font-size: 12px;
	line-height: 1.55;
	word-break: break-word;
}

@media (max-width: 600px) {
	.nhub-profile__head--action { flex-direction: column; gap: 10px; }
	.nhub-profile__action { align-items: flex-start; margin-right: 0; }
	.nhub-send__status { text-align: left; }
}

.nhub-profile__head { padding-right: 44px; }
.nhub-profile__head h2 { font-size: 27px; }
.nhub-profile__sub { margin-top: 6px; color: var(--nhub-ink-2); font-size: 15.5px; }

.nhub-profile__desc { margin-top: 18px; color: var(--nhub-ink-2); font-size: 15px; line-height: 1.65; }

/* Three across, and a fixed three rather than as many as happen to fit.
 *
 * auto-fit packed in four or five narrow columns, which read as a row of
 * fragments and left an email address 160px to live in — the address then
 * broke mid-word, which is how you get "yoursterlin / gpharmacy.com" on a
 * member's profile. Three columns is a column wide enough for the longest
 * thing a profile holds, and it puts six facts in two tidy rows of three. */
.nhub-facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px 18px;
	margin-top: 22px;
	padding: 18px;
	border: 1px solid var(--nhub-line);
	border-radius: var(--nhub-radius);
	background: var(--nhub-canvas);
}

/* An email address is two to three times the length of everything else in
   here, so it takes two columns and sits last, where the row it spills onto is
   its own. */
.nhub-fact--wide { grid-column: span 2; }

@media (max-width: 720px) {
	.nhub-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 460px) {
	.nhub-facts { grid-template-columns: minmax(0, 1fr); }
	.nhub-fact--wide { grid-column: auto; }
}

.nhub-fact dt { color: var(--nhub-ink-3); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.nhub-fact dd { margin: 4px 0 0; color: var(--nhub-ink); font-size: 15px; font-variant-numeric: tabular-nums; }
.nhub-fact a { color: var(--nhub-blue); overflow-wrap: anywhere; }

.nhub-subhead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 28px 0 12px;
}

.nhub-subhead h3 { font-size: 17px; }

/* The count and the LinkedIn link share the right-hand end of the subhead. */
.nhub-subhead__aside { display: flex; align-items: baseline; gap: 14px; }

/* Set like a link rather than a button: a button would promise an action, and
   what this does is take you somewhere else. */
.nhub-linkedin {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--nhub-blue);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

/* Only the words underline. Dragging a line under the logo as well makes it
   look like part of the sentence rather than the brand it is. */
.nhub-linkedin:hover span:first-child,
.nhub-linkedin:focus-visible span:first-child { text-decoration: underline; }

/* The mark comes from the stylesheet, so the script never has to be told where
   the plugin lives — the path is relative to this file and correct wherever
   WordPress is installed. */
.nhub-linkedin__mark {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	background: url(../img/linkedin.png) center / contain no-repeat;
}

.nhub-people-list { display: flex; flex-direction: column; border: 1px solid var(--nhub-line); border-radius: var(--nhub-radius); overflow: hidden; }

.nhub-people-list button {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	min-height: 56px;
	padding: 14px 18px;
	border: 0;
	border-top: 1px solid var(--nhub-line-2);
	background: var(--nhub-surface);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.nhub-people-list button:first-child { border-top: 0; }
.nhub-people-list button:hover { background: var(--nhub-blue-weak); }
.nhub-people-list strong { color: var(--nhub-navy); font-size: 15px; font-weight: 640; }
.nhub-people-list span { color: var(--nhub-ink-2); font-size: 13.5px; }
.nhub-people-list em { margin-left: auto; color: var(--nhub-blue); font-size: 13px; font-style: normal; font-weight: 600; }

/* -------------------------------------------------------------- insights */

.nhub-grid-2 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 14px;
	margin-top: 18px;
}

.nhub-panel {
	padding: 22px;
	border: 1px solid var(--nhub-line);
	border-radius: var(--nhub-radius);
	background: var(--nhub-surface);
}

.nhub-panel h3 { font-size: 16px; }
.nhub-panel__note { margin-top: 4px; color: var(--nhub-ink-3); font-size: 12.5px; }

.nhub-bars { display: flex; align-items: flex-end; gap: 10px; height: 200px; margin-top: 20px; }

.nhub-bars__col { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; height: 100%; }
.nhub-bars__fill { width: 100%; max-width: 56px; border-radius: 5px 5px 0 0; background: var(--nhub-navy); }
.nhub-bars__col:last-child .nhub-bars__fill { background: var(--nhub-accent); }
.nhub-bars__value { color: var(--nhub-ink); font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }
.nhub-bars__label { color: var(--nhub-ink-3); font-size: 12px; }

.nhub-meters { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }

.nhub-meter__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; }
.nhub-meter__head b { color: var(--nhub-ink-2); font-weight: 650; font-variant-numeric: tabular-nums; }

.nhub-meter__track { height: 10px; margin-top: 6px; border-radius: 999px; background: var(--nhub-line-2); overflow: hidden; }
.nhub-meter__fill { height: 100%; border-radius: 999px; background: var(--nhub-blue); }
.nhub-meter__fill--2 { background: var(--nhub-navy); }
.nhub-meter__fill--3 { background: var(--nhub-accent); }
.nhub-meter__fill--4 { background: #4e8fa8; }

.nhub-meter { border: 0; padding: 0; background: none; font: inherit; text-align: left; width: 100%; cursor: pointer; }
.nhub-meter:hover .nhub-meter__head { color: var(--nhub-navy); }

.nhub-list { margin: 16px 0 0; padding: 0; list-style: none; }

.nhub-list li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-top: 1px solid var(--nhub-line-2);
	font-size: 14.5px;
}

.nhub-list li:first-child { border-top: 0; }
.nhub-list b { color: var(--nhub-ink-2); font-weight: 650; font-variant-numeric: tabular-nums; }

.nhub-list button {
	border: 0;
	background: none;
	color: var(--nhub-navy);
	font: inherit;
	font-size: 14.5px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
}

.nhub-list button:hover { text-decoration-color: currentColor; }

.nhub-table-alt { margin-top: 14px; font-size: 13.5px; }
.nhub-table-alt summary { color: var(--nhub-ink-3); cursor: pointer; }
.nhub-table-alt table { width: 100%; margin-top: 10px; border-collapse: collapse; }
.nhub-table-alt th, .nhub-table-alt td { padding: 6px 8px; border-bottom: 1px solid var(--nhub-line-2); text-align: left; }
.nhub-table-alt th { color: var(--nhub-ink-3); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }

.nhub-foot {
	margin: 44px 0 20px;
	padding-top: 18px;
	border-top: 1px solid var(--nhub-line);
	color: var(--nhub-ink-3);
	font-size: 12.5px;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 860px) {
	.nhub { padding-inline: 16px; }
	.nhub-topbar { flex-wrap: wrap; }
	.nhub-brand { flex: 1 1 100%; }
	.nhub-nav { flex: 1 1 auto; overflow-x: auto; }
	.nhub-hero { padding-top: 30px; }
	.nhub-section-head { flex-direction: column; align-items: flex-start; gap: 8px; }
	.nhub-spotlight { padding: 24px; }
	.nhub-modal__card { max-height: 92vh; }
	.nhub-modal__body { padding: 0 20px 24px; }
	.nhub-modal__body .nhub-profile__head { margin: 0 -20px 0; padding: 22px 62px 14px 20px; }
	.nhub-bars { height: 170px; }
}

@media (max-width: 520px) {
	.nhub-metrics { grid-template-columns: repeat(2, 1fr); }
	.nhub-metric b { font-size: 25px; }
	.nhub-cards { grid-template-columns: 1fr; }
	.nhub-select { flex-basis: 100%; }
}

@media print {
	.nhub-topbar, .nhub-quick, .nhub-filters, .nhub-pager, .nhub-hero__actions { display: none; }
}

/* ==========================================================================
   Membership-type directories  [nacds_member_directory] and its aliases
   Built on the same tokens as the hub, so a directory page and the hub page
   next to it are recognisably the same piece of software.
   ========================================================================== */

.nhub-dir { padding-block: 4px; }

.nhub-dir__gate {
	display: flex;
	justify-content: center;
	padding-block: 24px;
}

.nhub-dir__head { margin-bottom: 20px; }

.nhub-dir__title {
	margin-top: 4px;
	font-size: clamp(24px, 3vw, 34px);
}

.nhub-dir__lede {
	margin-top: 8px;
	max-width: 62ch;
	color: var(--nhub-ink-2);
}

.nhub-dir__head .nhub-search { margin-top: 18px; }

.nhub-dir__metrics { margin-bottom: 20px; }

.nhub-dir__tabs {
	display: flex;
	gap: 4px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--nhub-line);
}

.nhub-dir__tab {
	appearance: none;
	border: 0;
	background: none;
	padding: 10px 16px;
	margin-bottom: -1px;
	border-bottom: 2px solid transparent;
	color: var(--nhub-ink-2);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.nhub-dir__tab:hover { color: var(--nhub-navy); }

.nhub-dir__tab.is-active {
	color: var(--nhub-navy);
	border-bottom-color: var(--nhub-blue);
}

/* The table layout, for pages that want the dense list rather than cards.
   Tables do not wrap, so this one scrolls inside its own box instead of
   pushing the whole page sideways on a phone. */
.nhub-dir__tablewrap {
	overflow-x: auto;
	border: 1px solid var(--nhub-line);
	border-radius: var(--nhub-radius);
	background: var(--nhub-surface);
	-webkit-overflow-scrolling: touch;
}

.nhub-dir__table {
	width: 100%;
	border-collapse: collapse;
	font-size: .94em;
}

.nhub-dir__table th,
.nhub-dir__table td {
	padding: 12px 14px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--nhub-line-2);
}

.nhub-dir__table th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--nhub-canvas);
	color: var(--nhub-navy);
	font-weight: 650;
	white-space: nowrap;
}

.nhub-dir__table tbody tr:last-child td { border-bottom: 0; }
.nhub-dir__table tbody tr:hover { background: var(--nhub-blue-weak); }
.nhub-dir__table td a { color: var(--nhub-blue); }

.nhub-dir__insights { margin-top: 40px; }
.nhub-dir__insights .nhub-section-head { margin-bottom: 16px; }

/* ==========================================================================
   Standalone sign-in  [nacds_member_login]
   ========================================================================== */

.nhub-signin {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding-block: 24px;
}

.nhub-signin--left { align-items: flex-start; }

.nhub-signin .nhub-gate__panel {
	width: 100%;
	max-width: 420px;
}

.nhub-signin__done {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	border: 1px solid var(--nhub-line);
	border-radius: var(--nhub-radius);
	background: var(--nhub-surface);
	box-shadow: var(--nhub-shadow);
}

.nhub-signin__status {
	margin: 0;
	color: var(--nhub-ink-2);
	font-weight: 600;
}

.nhub-alert--standalone {
	max-width: 62ch;
	margin: 16px auto;
}

@media (max-width: 640px) {
	.nhub-dir__tabs { overflow-x: auto; }
	.nhub-signin { align-items: stretch; }
}

/* ---------------------------------------------------------- footprint map */

/* Every state the same size square, in roughly its real place. A geographic map
   gives Montana eight times the ink of New Jersey, which is backwards when the
   subject is how many pharmacies sit in each. */

.nhub-footprint { margin-top: 20px; }

.nhub-metrics--tight { margin-top: 12px; gap: 10px; }
.nhub-metrics--tight .nhub-metric b { font-size: 21px; }

.nhub-tilemap {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-template-rows: repeat(8, auto);
	gap: 5px;
	max-width: 660px;
	margin: 16px 0 12px;
}

.nhub-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	padding: 2px;
	border-radius: 7px;
	background: var(--nhub-line-2);
	color: var(--nhub-ink-3);
	line-height: 1.1;
}

.nhub-tile b { font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.nhub-tile i { font-style: normal; font-size: 10.5px; font-variant-numeric: tabular-nums; }

/* One hue, five steps. The ink flips at the point the ground gets dark. */
.nhub-tile--s1 { background: #d3e2f1; color: var(--nhub-navy); }
.nhub-tile--s2 { background: #a3c6e4; color: var(--nhub-navy); }
.nhub-tile--s3 { background: #5f97c9; color: #fff; }
.nhub-tile--s4 { background: #2b6ca8; color: #fff; }
.nhub-tile--s5 { background: var(--nhub-navy); color: #fff; }

.nhub-tilekey {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	color: var(--nhub-ink-2);
	font-size: 12.5px;
}

.nhub-tilekey span { display: inline-flex; align-items: center; gap: 6px; }

.nhub-tile--key {
	width: 15px;
	height: 15px;
	aspect-ratio: auto;
	border-radius: 4px;
	padding: 0;
}

.nhub-panel--wide { margin-top: 18px; }

/*
 * The 660px cap suits a map inside a profile dialog or a half-width panel. On
 * the Insights page the map is the panel, so it takes the full width and the
 * labels grow with the tiles — a state square 100px across with 11px type in it
 * reads as an empty box.
 */
.nhub-panel--wide .nhub-tilemap { max-width: none; gap: 7px; }
/* Width comes from the panel; height is held back. Squares at full width would
   make the map a thousand pixels tall and push the rest of the page under it.
   Every tile is still the same size as every other, which is the whole point. */
/* :not(--key) throughout: the legend's swatches are tiles too, and a 66px-tall
   swatch beside a line of text is a stripe, not a key. */
.nhub-panel--wide .nhub-tile:not(.nhub-tile--key) { aspect-ratio: auto; height: 66px; border-radius: 10px; }
.nhub-panel--wide .nhub-tile:not(.nhub-tile--key) b { font-size: 14px; }
.nhub-panel--wide .nhub-tile:not(.nhub-tile--key) i { font-size: 12.5px; }

@media (max-width: 600px) {
	.nhub-tilemap { gap: 3px; }
	.nhub-tile { border-radius: 5px; }
	.nhub-tile b { font-size: 9px; }
	.nhub-tile i { display: none; }
}


/* ------------------------------------------------------ card statistics */

.nhub-card__place {
	margin-top: 10px;
	color: var(--nhub-ink-3);
	font-size: 13.5px;
}

/* Labelled figures: "156" next to "8" tells nobody which is which. The two sit
   side by side while the card is wide enough and stack when it is not. */
.nhub-card__meta .nhub-card__stat {
	color: var(--nhub-ink-2);
	font-size: 13.5px;
	white-space: nowrap;
}

.nhub-card__meta { gap: 6px 22px; }

.nhub-card__meta .nhub-card__stat b {
	color: var(--nhub-ink);
	font-weight: 600;
}


/* --------------------------------------------------- the dialog's host */

/* The dialog is moved here on open so no theme header can paint over it. The
   host keeps the .nhub class — every colour and radius in the plugin is a
   custom property declared there — but none of its page layout. */
.nhub-dialog-host {
	max-width: none;
	margin: 0;
	padding: 0;
}