/*
 * TMA Member Directory
 * Two tabs (Search / Results) with a sticky tab bar; sizes follow the container's width
 * (container queries). Sticky offset: set --tma-dir-sticky on .tma-dir for themes with a fixed header.
 */
.tma-dir {
	--tma-accent: #1f4e79;
	--tma-accent-soft: rgba(31, 78, 121, .08);
	--tma-line: #e3e5e8;
	--tma-muted: #6b7280;
	--tma-bg: #fff;
	--tma-soft: #f6f8fa;
	--tma-warn: #b45309;
	width: 100%;
	box-sizing: border-box;
	container-type: inline-size;
	container-name: tmadir;
	font-size: 15px;
	line-height: 1.45;
}
.tma-dir *, .tma-dir *::before, .tma-dir *::after { box-sizing: border-box; }
.tma-dir [hidden] { display: none !important; }
.tma-dir .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tma-dir button { font: inherit; cursor: pointer; }
.tma-dir select, .tma-dir input[type="search"] {
	font: inherit; width: 100%; padding: 9px 12px; border: 1px solid #c9ced4; border-radius: 8px; background: var(--tma-bg); color: inherit;
}
.tma-dir select:focus, .tma-dir input:focus, .tma-dir button:focus-visible { outline: 2px solid var(--tma-accent); outline-offset: 1px; }
.tma-dir-title { margin: 0 0 12px; }

/* Visitor note */
.tma-dir-login { margin: 0 0 12px; padding: 10px 14px; border-radius: 8px; background: var(--tma-accent-soft); color: #1f2937; font-size: 14px; }
.tma-dir-login a { color: var(--tma-accent); font-weight: 700; }
.tma-dir-d-more { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--tma-line); color: var(--tma-muted); }

/* Tabs */
.tma-dir-tabs {
	position: sticky; top: var(--tma-dir-sticky, 0px); z-index: 10;
	display: flex; gap: 4px; margin: 0 0 16px; padding: 4px; border-radius: 12px; background: var(--tma-soft); border: 1px solid var(--tma-line);
}
body.admin-bar .tma-dir-tabs { top: calc(var(--tma-dir-sticky, 0px) + 32px); }
@media (max-width: 782px) { body.admin-bar .tma-dir-tabs { top: calc(var(--tma-dir-sticky, 0px) + 46px); } }
@media (max-width: 600px) { body.admin-bar .tma-dir-tabs { top: var(--tma-dir-sticky, 0px); } } /* admin bar scrolls away */
.tma-dir-tab {
	flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	border: 0; border-radius: 9px; padding: 10px 14px; background: none; color: var(--tma-muted); font-weight: 700; font-size: 15px;
}
.tma-dir-tab:hover { color: #111827; }
.tma-dir-tab[aria-selected="true"] { background: var(--tma-bg); color: var(--tma-accent); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.tma-dir-tab-n:not(:empty) { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--tma-accent-soft); color: var(--tma-accent); font-size: 12px; font-variant-numeric: tabular-nums; }
.tma-dir-tab[aria-selected="true"] .tma-dir-tab-n:not(:empty) { background: var(--tma-accent); color: #fff; }

/* Search tab */
.tma-dir-search { display: grid; gap: 22px; }
.tma-dir-group h3 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--tma-muted); font-weight: 700; }
.tma-dir-group h3 label { font: inherit; color: inherit; }
.tma-dir-q { position: relative; }
.tma-dir-q svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--tma-muted); pointer-events: none; }
.tma-dir-q input[type="search"] { padding: 13px 14px 13px 42px; font-size: 16px; border-radius: 10px; }
.tma-dir-check { display: flex; gap: 8px; align-items: center; margin-top: 12px; font-size: 14px; }
.tma-dir-field { display: grid; gap: 4px; font-size: 14px; margin-bottom: 8px; }
.tma-dir-staff { padding: 12px; border-radius: 8px; background: #fff8e6; border: 1px solid #f0c36d; }
.tma-dir-staff h3 { color: #5c4400; }
.tma-dir-more-chips { margin-top: 10px; font-size: 14px; }
.tma-dir-subs:not(:empty) { display: grid; gap: 8px; margin-top: 12px; }
.tma-dir-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; background: var(--tma-accent-soft); }
.tma-dir-sub-h { font-size: 13px; font-weight: 700; color: var(--tma-accent); margin-right: 4px; }
.tma-dir-go {
	position: sticky; bottom: 0; z-index: 5;
	display: flex; align-items: center; justify-content: flex-end; gap: 16px;
	margin: 0 -4px; padding: 12px 4px; background: var(--tma-bg); border-top: 1px solid var(--tma-line);
}
.tma-dir-show { border: 0; border-radius: 10px; padding: 12px 22px; background: var(--tma-accent); color: #fff; font-weight: 700; font-size: 16px; }
.tma-dir-show:disabled { opacity: .6; cursor: default; }
.tma-dir-show.is-zero { background: #6b7280; }
.tma-dir-show:not(:disabled)::after { content: " \2192"; }

/* Chips */
.tma-dir-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tma-dir-chip { border: 1px solid #c9ced4; background: var(--tma-bg); color: inherit; border-radius: 999px; padding: 6px 12px; font-size: 14px; line-height: 1.3; }
.tma-dir-chip:hover { border-color: var(--tma-accent); }
.tma-dir-chip-sm { padding: 3px 10px; font-size: 13px; }
.tma-dir-chip[aria-pressed="true"] { background: var(--tma-accent); border-color: var(--tma-accent); color: #fff; }
.tma-dir-chip[aria-pressed="true"] .tma-dir-n { color: rgba(255,255,255,.8); }
.tma-dir-chip.is-zero { opacity: .45; }
.tma-dir-n { color: var(--tma-muted); font-size: 12px; font-variant-numeric: tabular-nums; }

/* Results */
.tma-dir-status { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; margin-bottom: 8px; }
.tma-dir-count { margin: 0; font-weight: 600; }
.tma-dir-sort { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--tma-muted); }
.tma-dir-sort select { width: auto; padding: 6px 10px; }
.tma-dir-active { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }
.tma-dir-active > span { display: contents; }
.tma-dir-active-chip { border: 0; background: var(--tma-accent-soft); color: var(--tma-accent); border-radius: 999px; padding: 4px 10px; font-size: 13px; font-weight: 600; }
.tma-dir-edit { border: 1px solid var(--tma-accent); background: var(--tma-bg); color: var(--tma-accent); border-radius: 999px; padding: 3px 12px; font-size: 13px; font-weight: 700; }
.tma-dir-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.tma-dir-card { margin: 0; }
.tma-dir-card-btn {
	width: 100%; height: 100%; display: flex; gap: 14px; align-items: flex-start; text-align: left; color: inherit;
	background: var(--tma-bg); border: 1px solid var(--tma-line); border-radius: 12px; padding: 14px;
	transition: border-color .15s, box-shadow .15s;
}
.tma-dir-card-btn:hover { border-color: var(--tma-accent); box-shadow: 0 4px 14px rgba(31,78,121,.12); }
.tma-dir-avatar { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--tma-soft); }
.tma-dir-initials {
	position: relative; overflow: hidden;
	display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; letter-spacing: .02em;
	background: hsl(var(--h) 45% 92%); color: hsl(var(--h) 45% 30%);
}
.tma-dir-initials img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .2s; }
.tma-dir-initials img.is-loaded { opacity: 1; }
.tma-dir-card-body { display: grid; gap: 2px; min-width: 0; }
.tma-dir-name { font-weight: 700; font-size: 16px; line-height: 1.25; color: #111827; }
.tma-dir-alt { color: var(--tma-muted); font-size: 13px; }
.tma-dir-inst { color: var(--tma-accent); font-weight: 600; font-size: 14px; }
.tma-dir-city { color: var(--tma-muted); font-size: 13px; }
.tma-dir-why { font-size: 12px; color: var(--tma-warn); }
.tma-dir-muted { color: var(--tma-muted); font-weight: 400; }
.tma-dir-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tma-dir-tags span { background: var(--tma-soft); border: 1px solid var(--tma-line); border-radius: 999px; padding: 0 8px; font-size: 12px; }
.tma-dir-tags span.tma-dir-muted { background: none; border: 0; padding: 0 2px; }
.tma-dir-badge { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: #fde8e8; color: #9b1c1c; font-size: 11px; font-weight: 700; vertical-align: middle; }
.tma-dir-empty { padding: 32px 16px; text-align: center; color: var(--tma-muted); background: var(--tma-soft); border-radius: 12px; }
.tma-dir-link { background: none; border: 0; padding: 0; color: var(--tma-accent); text-decoration: underline; }
.tma-dir-more { display: block; margin: 16px auto 0; border: 1px solid #c9ced4; background: var(--tma-bg); border-radius: 8px; padding: 9px 18px; font-weight: 600; }

/* Layout switch */
.tma-dir-layouts { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--tma-soft); border: 1px solid var(--tma-line); margin-left: auto; }
.tma-dir-layout-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; border-radius: 7px; padding: 5px 10px; font-size: 13px; font-weight: 600; color: var(--tma-muted); }
.tma-dir-layout-btn:hover { color: #111827; }
.tma-dir-layout-btn[aria-pressed="true"] { background: var(--tma-bg); color: var(--tma-accent); box-shadow: 0 1px 2px rgba(0,0,0,.12); }

/* List rows (List layout, and the left column of Split) */
.tma-dir[data-layout="list"] .tma-dir-grid,
.tma-dir[data-layout="split"] .tma-dir-grid { display: block; border: 1px solid var(--tma-line); border-radius: 12px; overflow: hidden; }
.tma-dir-row { margin: 0; }
.tma-dir-row + .tma-dir-row { border-top: 1px solid var(--tma-line); }
.tma-dir-row-btn {
	width: 100%; display: grid; grid-template-columns: 44px minmax(150px, 1.3fr) minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1.3fr); gap: 4px 16px; align-items: center;
	padding: 10px 14px; border: 0; background: var(--tma-bg); color: inherit; text-align: left;
}
.tma-dir-row-btn:hover { background: var(--tma-soft); }
.tma-dir-avatar-sm { width: 44px; height: 44px; font-size: 15px; }
.tma-dir-row-who { display: grid; gap: 1px; min-width: 0; }
.tma-dir-row-who .tma-dir-name { font-size: 15px; }
.tma-dir-row-tags .tma-dir-tags { margin: 0; }
.tma-dir-row-inst:empty, .tma-dir-row-city:empty, .tma-dir-row-tags:empty { display: none; }

/* Split: list on the left, details on the right (wide directories only, see SPLIT_MIN in directory.js) */
.tma-dir[data-layout="split"] .tma-dir-results { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 20px; align-items: start; }
.tma-dir[data-layout="split"] .tma-dir-row-btn { grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; }
.tma-dir[data-layout="split"] .tma-dir-row-inst,
.tma-dir[data-layout="split"] .tma-dir-row-city { grid-column: 2; font-size: 13px; }
.tma-dir[data-layout="split"] .tma-dir-row-tags { display: none; }
.tma-dir-row-btn[aria-current="true"] { background: var(--tma-accent-soft); box-shadow: inset 3px 0 0 var(--tma-accent); }
.tma-dir-pane {
	position: sticky; top: var(--tma-dir-pane-top, 16px);
	max-height: calc(100vh - var(--tma-dir-pane-top, 16px) - 16px); overflow: auto; overscroll-behavior: contain;
	padding: 24px; border: 1px solid var(--tma-line); border-radius: 12px; background: var(--tma-bg);
}
.tma-dir-pane .tma-dir-d-head { margin-right: 0; }
.tma-dir-pane h3 { margin: 18px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--tma-muted); }
.tma-dir-pane-empty { margin: 0; color: var(--tma-muted); text-align: center; padding: 40px 0; }

/* Bio preview */
.tma-dir-bio-more { font-weight: 600; }

/* Detail dialog */
.tma-dir-dialog { width: min(680px, calc(100vw - 24px)); max-height: calc(100vh - 48px); padding: 24px; border: 0; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.25); color: inherit; }
.tma-dir-dialog::backdrop { background: rgba(17,24,39,.55); }
.tma-dir-close { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--tma-soft); font-size: 22px; line-height: 1; }
.tma-dir-d-head { display: flex; gap: 18px; align-items: center; margin: 0 40px 16px 0; }
.tma-dir-d-head h2 { margin: 0; font-size: 22px; line-height: 1.2; }
.tma-dir-d-head p { margin: 2px 0 0; }
.tma-dir-d-photo { flex: none; width: 112px; height: 112px; border-radius: 50%; object-fit: cover; font-size: 34px; }
.tma-dir-dialog h3 { margin: 18px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--tma-muted); }
.tma-dir-d-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tma-dir-d-chips li { background: var(--tma-accent-soft); color: var(--tma-accent); border-radius: 999px; padding: 2px 10px; font-size: 14px; font-weight: 600; }
.tma-dir-d-bio p { margin: 0 0 10px; }
.tma-dir-d-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; }
.tma-dir-d-links a { color: var(--tma-accent); font-weight: 600; word-break: break-all; }
.tma-dir-staffline { color: #5c4400; font-size: 13px; }
.tma-dir-d-staff { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--tma-line); }
.tma-dir-btn { display: inline-block; background: var(--tma-accent); color: #fff !important; text-decoration: none; padding: 8px 14px; border-radius: 8px; font-weight: 600; }

/* Narrow container */
@container tmadir (max-width: 760px) {
	.tma-dir-grid { grid-template-columns: 1fr; }
	.tma-dir-row-btn { grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; }
	.tma-dir-row-inst, .tma-dir-row-city, .tma-dir-row-tags { grid-column: 2; font-size: 13px; }
	.tma-dir-layout-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.tma-dir-layout-btn { padding: 6px 9px; }
}
@container tmadir (max-width: 420px) {
	.tma-dir-tab { padding: 10px 8px; }
	.tma-dir-go { justify-content: space-between; }
	.tma-dir-show { flex: 1; padding: 12px 14px; }
	.tma-dir-d-head { flex-direction: column; align-items: flex-start; }
	.tma-dir-sort { width: 100%; }
}