/* ==========================================================================
   TBB Lab Calculators — Credit / Share / Cite bar
   Self-contained: defines its own tokens so it renders identically on lab,
   bioinformatics, and biostatistics tools regardless of their base stylesheet.
   ========================================================================== */

.tbb-credit-bar {
	--cb-text:    #1e293b;
	--cb-muted:   #64748b;
	--cb-primary: #2563eb;
	--cb-border:  #e2e8f0;
	--cb-bg:      #f8fafc;
	--cb-surface: #ffffff;

	display:         flex;
	flex-wrap:       wrap;
	align-items:     center;
	justify-content: space-between;
	gap:             .75rem 1.25rem;
	margin:          0 0 1.5rem;
	padding:         .85rem 1.1rem;
	background:      var(--cb-bg);
	border:          1px solid var(--cb-border);
	border-radius:   10px;
	font-family:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size:       1.3rem;
	line-height:     1.5;
	color:           var(--cb-text);
}

/* ── People (created / reviewed) ─────────────────────────────────────────── */
.tbb-credit-people {
	display:     flex;
	flex-wrap:   wrap;
	align-items: center;
	gap:         .4rem .85rem;
	min-width:   0;
}

.tbb-credit-group {
	display:     inline-flex;
	flex-wrap:   wrap;
	align-items: center;
	gap:         .35rem;
}

.tbb-credit-role {
	color:          var(--cb-muted);
	font-weight:    500;
	font-size:      1.05rem;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.tbb-credit-person {
	display:     inline-flex;
	align-items: center;
	gap:         .3rem;
}

.tbb-credit-name {
	font-weight: 600;
	color:       var(--cb-text);
}

/* ── Name hover/focus info tooltip ───────────────────────────────────────── */
.tbb-credit-name-wrap {
	position:      relative;
	display:       inline-block;
	cursor:        help;
	outline:       none;
}

.tbb-credit-name--hint {
	border-bottom: 1px dotted var(--cb-muted);
}

.tbb-credit-tip {
	position:      absolute;
	top:           calc(100% + 9px);
	left:          0;
	z-index:       60;
	width:         max-content;
	max-width:     260px;
	padding:       .6rem .75rem;
	background:    var(--cb-surface);
	color:         var(--cb-text);
	border:        1px solid var(--cb-border);
	border-radius: 8px;
	box-shadow:    0 10px 28px rgba(0, 0, 0, .14);
	text-align:    left;
	opacity:       0;
	visibility:    hidden;
	transform:     translateY(-4px);
	transition:    opacity .15s ease, transform .15s ease, visibility .15s;
}

.tbb-credit-name-wrap:hover .tbb-credit-tip,
.tbb-credit-name-wrap:focus .tbb-credit-tip,
.tbb-credit-name-wrap:focus-within .tbb-credit-tip {
	opacity:    1;
	visibility: visible;
	transform:  translateY(0);
}

/* little upward arrow (matches the card's light surface) */
.tbb-credit-tip::before {
	content:       '';
	position:      absolute;
	bottom:        100%;
	left:          14px;
	border:        6px solid transparent;
	border-bottom-color: var(--cb-surface);
}

/* invisible bridge across the gap so the pointer can travel into the card */
.tbb-credit-tip::after {
	content:  '';
	position: absolute;
	bottom:   100%;
	left:     0;
	right:    0;
	height:   11px;
}

.tbb-credit-tip-bio {
	display:     block;
	font-size:   1.3rem;
	line-height: 1.6;
	color:       var(--cb-text);
	font-weight: 400;
	white-space: pre-line;
}

/* Social links inside the hover card */
.tbb-credit-tip-links {
	display:     flex;
	align-items: center;
	gap:         .4rem;
}

.tbb-credit-tip-bio + .tbb-credit-tip-links {
	margin-top: .6rem;
}

.tbb-credit-tip .tbb-credit-profile {
	width:         30px;
	height:        30px;
	color:         var(--cb-text);
	background:    var(--cb-bg);
	border:        1px solid var(--cb-border);
	border-radius: 6px;
}

.tbb-credit-tip .tbb-credit-profile:hover {
	color:        var(--cb-primary);
	background:   #fff;
	border-color: var(--cb-primary);
	transform:    translateY(-1px);
}

.tbb-credit-dot {
	color:   var(--cb-muted);
	margin:  0 .15rem;
}

.tbb-credit-divider {
	width:      1px;
	height:     1.1rem;
	background: var(--cb-border);
}

/* Profile + social icon links */
.tbb-credit-profile,
.tbb-credit-social {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	color:           var(--cb-muted);
	text-decoration: none;
	border-radius:   5px;
	transition:      color .15s ease, background .15s ease, transform .15s ease;
}

.tbb-credit-profile {
	width:  22px;
	height: 22px;
}

.tbb-credit-profile:hover { background: rgba(37, 99, 235, .1); transform: translateY(-1px); }
.tbb-credit-profile--linkedin:hover     { color: #0a66c2; }
.tbb-credit-profile--researchgate:hover { color: #00ccbb; }
.tbb-credit-profile--scholar:hover      { color: #4285f4; }

/* ── Actions (share / cite) ──────────────────────────────────────────────── */
.tbb-credit-actions {
	display:     inline-flex;
	align-items: center;
	gap:         .5rem;
	flex-shrink: 0;
}

.tbb-credit-action {
	position: relative;
}

.tbb-credit-btn {
	display:       inline-flex;
	align-items:   center;
	gap:           .4rem;
	padding:       .5rem .9rem;
	font-size:     1.2rem;
	font-weight:   600;
	white-space:   nowrap;
	font-family:   inherit;
	color:         var(--cb-text);
	background:    var(--cb-surface);
	border:        1px solid var(--cb-border);
	border-radius: 7px;
	cursor:        pointer;
	transition:    border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.tbb-credit-btn svg { color: var(--cb-muted); transition: color .15s ease; }
.tbb-credit-btn:hover,
.tbb-credit-btn[aria-expanded="true"] {
	color:        var(--cb-primary);
	border-color: var(--cb-primary);
	box-shadow:   0 0 0 3px rgba(37, 99, 235, .12);
}
.tbb-credit-btn:hover svg,
.tbb-credit-btn[aria-expanded="true"] svg { color: var(--cb-primary); }

/* ── Popovers ────────────────────────────────────────────────────────────── */
.tbb-credit-pop {
	position:      absolute;
	top:           calc(100% + .5rem);
	right:         0;
	z-index:       50;
	min-width:     260px;
	padding:       .85rem;
	background:    var(--cb-surface);
	border:        1px solid var(--cb-border);
	border-radius: 10px;
	box-shadow:    0 8px 28px rgba(0, 0, 0, .14);
	animation:     tbbCreditPop .14s ease-out;
}

.tbb-credit-pop[hidden] { display: none; }

@keyframes tbbCreditPop {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

.tbb-credit-pop--cite { min-width: 340px; max-width: 420px; }

/* Feedback (Forminator form) popover — wide enough to show the whole form */
.tbb-credit-pop--feedback {
	min-width: 480px;
	max-width: 620px;
	width:     min(620px, calc(100vw - 2.5rem));
}

.tbb-credit-feedback-title {
	font-size:     1.15rem;
	font-weight:   700;
	color:         var(--cb-text);
	margin-bottom: .6rem;
}

/* No inner scroll — the full form is visible (the page scrolls if needed) */
.tbb-credit-feedback-form {
	max-height: none;
	overflow:   visible;
}

.tbb-credit-pop-row {
	display:     flex;
	align-items: center;
	gap:         .5rem;
}
.tbb-credit-pop-row--end { justify-content: flex-end; margin-top: .65rem; }

.tbb-credit-link-field {
	flex:          1;
	min-width:     0;
	padding:       .55rem .7rem;
	font-size:     1.25rem;
	font-family:   inherit;
	color:         var(--cb-muted);
	background:    var(--cb-bg);
	border:        1px solid var(--cb-border);
	border-radius: 6px;
}

.tbb-credit-copy {
	flex-shrink:   0;
	padding:       .55rem .9rem;
	font-size:     1.2rem;
	font-weight:   600;
	font-family:   inherit;
	color:         #fff;
	background:    var(--cb-primary);
	border:        none;
	border-radius: 6px;
	cursor:        pointer;
	transition:    background .15s ease;
}
.tbb-credit-copy:hover    { background: #1d4ed8; }
.tbb-credit-copy.is-done  { background: #16a34a; }

.tbb-credit-pop-divider {
	height:     1px;
	background: var(--cb-border);
	margin:     .7rem 0;
}

/* Social row */
.tbb-credit-socials {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             .4rem;
}
.tbb-credit-social {
	width:      38px;
	height:     38px;
	background: var(--cb-bg);
	border:     1px solid var(--cb-border);
	color:      var(--cb-text);
}
.tbb-credit-social:hover { color: var(--cb-primary); border-color: var(--cb-primary); transform: translateY(-1px); }

/* Cite tabs + text */
.tbb-credit-cite-tabs {
	display: inline-flex;
	gap:     .3rem;
}
.tbb-credit-cite-tab {
	padding:       .4rem .8rem;
	font-size:     1.15rem;
	font-weight:   600;
	font-family:   inherit;
	color:         var(--cb-muted);
	background:    var(--cb-bg);
	border:        1px solid var(--cb-border);
	border-radius: 6px;
	cursor:        pointer;
}
.tbb-credit-cite-tab.is-active {
	color:        #fff;
	background:   var(--cb-primary);
	border-color: var(--cb-primary);
}

.tbb-credit-cite-text {
	font-size:     1.2rem;
	line-height:   1.55;
	color:         var(--cb-text);
	background:    var(--cb-bg);
	border:        1px solid var(--cb-border);
	border-radius: 6px;
	padding:       .6rem .7rem;
	white-space:   pre-wrap;
	word-break:    break-word;
	font-family:   "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
.tbb-credit-cite-text[hidden] { display: none; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media ( max-width: 600px ) {
	.tbb-credit-bar      { flex-direction: column; align-items: stretch; }
	.tbb-credit-btn      { width: 100%; justify-content: center; }

	/* Share / Cite popovers → full-width panel below the buttons (anchored to
	   the whole actions row, not the individual button) */
	.tbb-credit-actions  { width: 100%; position: relative; flex-wrap: wrap; }
	/* Buttons share a row when they fit, and wrap to the next line (never crop)
	   on very narrow screens; min-width:max-content keeps each label intact. */
	.tbb-credit-action   { flex: 1 1 auto; min-width: max-content; position: static; }
	.tbb-credit-pop          { left: 0; right: 0; min-width: 0; }
	.tbb-credit-pop--cite,
	.tbb-credit-pop--feedback{ min-width: 0; max-width: none; width: auto; }

	/* Hover card → full-width panel below the names so it never clips off-screen */
	.tbb-credit-people      { position: relative; }
	.tbb-credit-name-wrap   { position: static; }
	.tbb-credit-tip {
		left:      0;
		right:     0;
		width:     auto;
		max-width: none;
	}
	.tbb-credit-tip::before { display: none; }
}

@media ( prefers-reduced-motion: reduce ) {
	.tbb-credit-pop,
	.tbb-credit-profile:hover,
	.tbb-credit-social:hover { animation: none; transform: none; }
}