/* ===========================================================================
   career-card.css -- shared Career Card popup component

   Single source of truth for the career-card CSS, loaded by both
   combinedstats.html and leaders.html. Extracted 2026-08-28 after a
   round of drift bugs (most recently: leaders.html's mobile
   .career-card-photo-row was missing flex-direction:row, so Legacy
   Score rendered below the photo on phones instead of beside it,
   because the two files kept independently-maintained copies of this
   CSS and edits to one didn't reliably make it into the other).

   Page-specific overrides that do NOT belong here:
   - combinedstats.html's own <style> block keeps its .compare-panel
     .career-card-* overrides (the side-by-side compare feature only
     exists on that page).
   =========================================================================== */

.career-card-overlay {
	display: none;
	visibility: visible;
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	/* Raised from 0.88 to 0.97 (2026-09-11, at the person's direct request)
	   -- at 0.88 the page underneath was still genuinely readable through
	   the backdrop (confirmed: player names and full stat rows legible
	   behind the card), which is jarring in particular for a card opened
	   from index.html's search -- the visitor never navigated to the
	   stats table on purpose, so seeing it bleed through behind a card
	   they opened from the home page read as a stray, unrelated page
	   rather than a dimmed backdrop. Not full 1 (solid black) -- a
	   sliver of the underlying page still shows through at the very
	   edges, which keeps a bit of depth rather than a flat cutout, without
	   any of it being legible. This is the SAME .career-card-overlay used
	   everywhere the card opens (combinedstats.html's own name links
	   included, not just index.html's search), so the effect is uniform
	   site-wide rather than only for this one entry point. */
	background-color: rgba(0,0,0,0.97);
	z-index: 1000;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
}
.career-card-overlay.active { display: flex; }
.career-card-shell {
	/* Wraps .career-card without clipping — the close button lives here,
	   not inside the scrolling box below, so it can hang half outside the
	   card's corner without being cut off by that box's overflow-y: auto. */
	position: relative;
	max-width: 720px;
	width: 100%;
}
.career-card {
	position: relative;
	background-color: #14213d;
	border: 2px solid #ffcb05;
	border-radius: 12px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.6);
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	padding: 30px 34px 30px 30px;
	box-sizing: border-box;
	scrollbar-width: thin;
	scrollbar-color: rgba(255,255,255,0.25) transparent;
}
.career-card::-webkit-scrollbar { width: 8px; }
.career-card::-webkit-scrollbar-track { background: transparent; }
.career-card::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,0.25); border-radius: 4px; }
.career-card::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,0.4); }
.career-card-close {
	/* Fully inset within the card's own corner (not hanging outside its
	   border) — floating it half outside the card, even from the non-
	   clipping .career-card-shell, could still land outside the visible
	   viewport on mobile when the overlay's flex-centering pushes a tall
	   card's top edge close to (or past) the screen edge. Inset placement
	   keeps it reachable regardless of card height or viewport quirks. */
	position: absolute;
	top: 10px;
	right: 10px;
	width: 32px;
	height: 32px;
	line-height: 30px;
	text-align: center;
	background-color: #14213d;
	color: #ffffff;
	border: 2px solid #ffffff;
	border-radius: 50%;
	font-size: 18px;
	font-weight: bold;
	cursor: pointer;
	user-select: none;
	z-index: 2;
}
.career-card-share {
	/* Bare icon, no corner-badge circle -- per the person (2026-09-11),
	   the circular background/border .career-card-close still uses looked
	   too heavy here, so this button dropped it (the icon itself sized up
	   from 16px to 20px in the markup to compensate for the lost visual
	   weight) and its color moved off pure white to a softer, more
	   subdued tone so it doesn't compete with the card's real content. */
	position: absolute;
	bottom: 10px;
	right: 10px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	color: #b7bfce;
	border: none;
	cursor: pointer;
	padding: 0;
	z-index: 2;
}
.career-card-share:hover { color: #ffffff; }
.career-card-share-popover {
	/* Anchored off the share button's own corner rather than centered
	   under it, so it never has to guess the button's exact width --
	   right:10px matches the button's own right offset above. */
	position: absolute;
	bottom: 52px;
	right: 10px;
	width: 250px;
	max-width: calc(100% - 20px);
	background-color: #0c1526;
	border: 1px solid #ffcb05;
	border-radius: 8px;
	padding: 10px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.6);
	z-index: 3;
	display: none;
}
.career-card-share-popover.is-open { display: block; }
.career-card-share-input {
	width: 100%;
	box-sizing: border-box;
	background-color: #14213d;
	color: #ffffff;
	border: 1px solid #4a5a7a;
	border-radius: 4px;
	padding: 6px 8px;
	font-size: 12px;
	font-family: inherit;
}
.career-card-share-status {
	font-size: 11px;
	color: #b3b3b3;
	text-align: center;
	min-height: 14px;
	margin-top: 6px;
}
.career-card-inner {
	display: flex;
	/* --pcard-t is a 0-1 "how much room do we have" ratio: 1 at 760px+
	   viewport (the shell's own 720px cap plus the overlay's 20px-per-side
	   padding, see the media query comment below for why 760 specifically),
	   sliding down to 0 at 580px, then held there below that -- the media
	   query takes over completely at that point. Everything below that
	   reads off this one variable instead of jumping straight from its
	   desktop value to its mobile value at a single breakpoint, so the
	   photo/name/Legacy-Score column (and the stats table next to it)
	   shrink together in step with the shell as it narrows, rather than
	   the photo staying pinned at its full 180px size while the room
	   available for it quietly disappears. See the media query below for
	   why 580px specifically, and why every var(--pcard-t) formula here
	   has its low end match that media query's own fixed value exactly --
	   that's what makes the eventual flip to the stacked layout land on
	   a size that's already correct, instead of jumping. */
	--pcard-t: clamp(0, calc((100vw - 580px) / 180px), 1);
	gap: calc(6px + var(--pcard-t) * 20px);
	align-items: flex-start;
}
.career-card-photo-col {
	flex: 0 0 auto;
	width: calc(100px + var(--pcard-t) * 80px);
	text-align: center;
}
/* Name+grad-year and Legacy Score both live in .career-card-header-col,
   stacked as one unit, so a single CSS flex-direction swap (desktop:
   column, mobile: row) is all that's needed to move from "photo, then
   name, then score, all centered and stacked" (desktop) to "photo on
   the left, name/year and score stacked beside it" (mobile) -- see the
   mobile override below. */
.career-card-photo-row {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.career-card-header-col {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.career-card-photo {
	width: calc(100px + var(--pcard-t) * 80px);
	height: calc(128px + var(--pcard-t) * 103px);
	object-fit: cover;
	border-radius: 10px;
	display: block;
	box-shadow: 0 4px 16px rgba(0,0,0,0.35);
	background-color: rgba(255,255,255,0.04);
	flex-shrink: 0;
}
/* Set only when the resolved photo is the actual bio/{pid}.jpg source
   (see renderCareerCardInto) -- the roster-folder fallback isn't
   clickable at all, so it gets no visual affordance suggesting it is. */
.career-card-photo.is-lightboxable { cursor: zoom-in; }
.career-card-photo.is-lightboxable:hover { box-shadow: 0 4px 20px rgba(255,203,5,0.35); }
.career-card-name-row {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-top: 12px;
}
/* White (brighter than the surrounding #d4d4ba body/label tone) is what
   makes this actually read as a heading rather than another line of
   card copy -- everything else in the card sits at or below #d4d4ba. */
.career-card-name {
	font-size: calc(16px + var(--pcard-t) * 4px);
	font-weight: bold;
	color: #ffffff;
	line-height: 1.25;
	letter-spacing: 0.2px;
}
/* Deliberately absent (not just unknown) for a player who never actually
   graduated from TCS -- see NO_GRAD_YEAR_PIDS in the script below; don't
   backfill this from "last season on file" for those specific pids. */
.career-card-grad-year {
	font-size: calc(14px + var(--pcard-t) * 3px);
	font-weight: normal;
	color: rgba(179,179,179,0.6);
	white-space: nowrap;
}
.career-card-legacy {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 10px;
}
.career-card-legacy-label {
	font-size: 10px;
	font-weight: bold;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: rgba(179,179,179,0.7);
}
.career-card-legacy-number {
	background: none;
	border: none;
	padding: 0;
	font-family: inherit;
	font-size: calc(26px + var(--pcard-t) * 10px);
	font-weight: bold;
	color: #ffcb05;
	line-height: 1.1;
	cursor: pointer;
}
.career-card-legacy-number:hover { color: #ffffff; }
.career-card-legacy-how {
	background: none;
	border: none;
	padding: 0;
	font-family: inherit;
	font-size: calc(7px + var(--pcard-t) * 2px);
	color: #9fb8d8;
	text-decoration: underline;
	text-decoration-color: rgba(159,184,216,0.4);
	cursor: pointer;
	margin-top: 2px;
}
.career-card-legacy-how:hover { color: #ffffff; text-decoration-color: #ffffff; }
/* Only shown when bio/{pid}.json has at least one clipping (see
   renderCareerCardInto) -- a single clipping opens it directly in the
   photo lightbox (openClipViewer); more than one opens the small popup
   list below (openFeatureArticlesPopup) instead of a full inline
   section, which is where this used to live (see careerCardRenderExtras'
   own comment on why it moved). */
.career-card-feature-articles {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-top: 16px;
	font-size: 11px;
	color: #9fb8d8;
	cursor: pointer;
}
.career-card-feature-articles:hover { color: #ffffff; }
.career-card-feature-articles-icon { text-decoration: none; }
.career-card-body {
	flex: 1;
	min-width: 0;
	/* Clears the now-inset close button, which sits in this same top-right
	   corner (see .career-card-close) — without this, the stats table's
	   rightmost column (AVG) renders directly underneath it. */
	padding-top: 18px;
}
.career-card-section-title {
	font-size: 13px;
	font-weight: bold;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #ffcb05;
	margin: 22px 0 8px 0;
}
.career-card-body > .career-card-section-title:first-child { margin-top: 0; }
table.career-card-stats {
	width: 100%;
	border-collapse: collapse;
	/* Rides the same --pcard-t (declared on .career-card-inner, an
	   ancestor of this table) as the photo/name/Legacy Score column --
	   the table needs to give up some of its own width as that column
	   claims less room while the shell narrows, and shrinking the table's
	   own font/padding in step is what actually frees that width instead
	   of just letting the table get squeezed by whatever's left. 11px
	   here is the same value the media query below uses, for the same
	   reason as the photo/font sizes above: continuity at the handoff. */
	font-size: calc(11px + var(--pcard-t) * 2px);
}
/* Deliberately NOT table-layout:fixed with hand-picked percentages here
   (an earlier version of this fix did that, assuming the card always has
   ~450px to give the table) -- that assumption only holds once the card
   actually reaches its full 720px cap, which needs a viewport of roughly
   760px+ (see --pcard-t above). Anywhere narrower than that but still
   wider than the <=580px breakpoint below, the table's own font/padding
   are already shrinking via --pcard-t to free up room, but the table
   still has less width to work with than that hand-picked-percentage
   version assumed, and would have hit the same truncated-header-text
   problem. Auto layout (the default, left unset here) sizes each column
   to what its content actually needs, the same reliable approach the
   <=580px block below has always used successfully; .career-card-
   stats-wrap's overflow-x:auto is the safety net for whatever width
   genuinely isn't enough room -- a horizontal scroll that still shows
   every character, not silent truncation that hides some of them. */
.career-card-stats-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.career-card-stats th, table.career-card-stats td {
	padding: calc(4px + var(--pcard-t) * 2px) calc(4px + var(--pcard-t) * 4px);
	white-space: nowrap;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}
table.career-card-stats tr:nth-child(even) td { background-color: rgba(255,255,255,0.04); }
table.career-card-stats tr:first-child th { text-align: center; color: #d4d4ba; font-size: 11px; text-transform: uppercase; }
table.career-card-stats th:first-child, table.career-card-stats td:first-child { text-align: left; }
table.career-card-stats tr:first-child th:first-child { text-align: left; }
table.career-card-stats td { text-align: center; color: #b3b3b3; }
table.career-card-stats td:first-child a { color: #d4d4ba; font-weight: bold; }
table.career-card-stats tr.career-card-total-row th,
table.career-card-stats tr.career-card-total-row td {
	color: #ffffff;
	font-weight: bold;
	border-bottom: none;
	border-top: 2px solid rgba(255,255,255,0.18);
}
.career-card-achievement {
	position: relative;
	padding-left: 20px;
	margin-bottom: 6px;
	font-size: 13px;
	color: #d4d4ba;
	line-height: 1.4;
}
.career-card-achievement::before {
	content: '\1F3C6';
	position: absolute;
	left: 0;
	font-size: 11px;
	top: 2px;
}
.career-card-clipping {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 8px;
	font-size: 13px;
}
.career-card-clip-link {
	color: #d4d4ba;
	font-weight: bold;
	cursor: pointer;
	text-decoration: none;
}
.career-card-clip-link:hover { color: #ffffff; }
/* Same look as .career-card-clip-link above, for an Honors entry whose
   link is a real external href (e.g. a YouTube video) rather than a local
   photo opened in the in-page lightbox -- kept as its own class rather
   than reusing .career-card-clip-link since that class is what career-
   card.js's delegated click handler keys off of to call openClipViewer()
   with a data-clip-src attribute this kind of link doesn't have (added
   2026-09-13 for the video-feature Honors bonus). */
.career-card-honor-ext-link {
	color: #d4d4ba;
	font-weight: bold;
	cursor: pointer;
	text-decoration: none;
}
.career-card-honor-ext-link:hover { color: #ffffff; }
.career-card-clip-icon { flex: 0 0 auto; margin-right: 4px; }
.career-card-clip-meta {
	color: rgba(179,179,179,0.6);
	font-size: 11px;
}
.career-card-ranking,
.career-card-record {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 6px;
	font-size: 13px;
	color: #d4d4ba;
	line-height: 1.4;
}
.career-card-ranking-icon,
.career-card-record-icon {
	flex: 0 0 auto;
}
/* Wraps the whole rest of a ranking/record line (see renderRankingLine in
   career-card.js) as the flex container's other item, so the gap above
   applies once -- between the icon and this span -- instead of also
   landing between an inline link and the plain text on either side of
   it. Needs min-width:0 so a long line can still wrap inside the card
   instead of forcing the flex item to its unbroken intrinsic width. */
.career-card-ranking-text,
.career-card-record-text {
	flex: 1 1 auto;
	min-width: 0;
}
/* Both clickable pieces of a ranking line (the category name -> top-10
   popup, and a season-attributed value -> that season's bio page) get
   the same accent-blue/underline treatment as every other in-card link
   (season-subtable rows, etc.) -- without this they're visually
   identical to the surrounding plain text and don't read as clickable. */
/* "a." prefix bumps specificity (0,1,1) past the page's global a:link/
   a:visited/a:hover rules (also 0,1,1, but declared earlier in the
   cascade) -- a bare .rank-cat-link class alone (0,1,0) loses to those
   regardless of source order, the same specificity trap already found
   and fixed for the bio pages' own .player-card-career-link. */
a.rank-cat-link,
a.rank-value-link {
	color: #9fb8d8;
	text-decoration: underline;
	text-decoration-color: rgba(159,184,216,0.4);
	cursor: pointer;
}
a.rank-cat-link:hover,
a.rank-value-link:hover {
	color: #ffffff;
	text-decoration-color: #ffffff;
}
.career-card-notes {
	font-size: 12px;
	font-style: italic;
	color: rgba(179,179,179,0.75);
	line-height: 1.4;
}
.career-card-empty {
	font-size: 12px;
	color: rgba(179,179,179,0.5);
	font-style: italic;
}
/* max-width:580px -- this is now just the point where the fluid scaling
   above (--pcard-t, declared on .career-card-inner) has already bottomed
   out at its floor values and there's nothing left to gain by staying in
   the side-by-side arrangement -- the photo has already shrunk to 100px,
   the stats table font/padding have already shrunk to match, and yet the
   shell itself is still narrowing. Below this point the two-column layout
   would have to start eating into the photo/table's own floor sizes to
   fit, which is exactly the "oversized photo, awkward stacked layout, too
   much blue space" family of complaints this file keeps coming back to --
   so instead of compressing further, this is where the whole card
   rearranges into the taller single-column shape below, with the photo
   and header row on top and the stats table given the full width beneath.
   History: this used to be a single hard cutoff (600px, then 900px, then
   760px, see the file's git history for why each of those didn't work --
   a fixed-size photo column either fell through to the plain desktop
   rule too early or held onto the desktop layout too long, since there
   was no way to be "a little bit narrower" short of jumping straight to
   this stacked treatment). Letting the photo/table shrink continuously
   with --pcard-t instead of at one fixed width is what let this
   breakpoint move down to 580px without reopening any of those earlier
   complaints -- every property below that has a var(--pcard-t) formula
   above already lands on that formula's own floor value by the time the
   viewport reaches 580px, so this rule only needs to state the ones that
   don't: the structural flex-direction/alignment switch, and the spacing/
   sizing that's unique to the stacked arrangement (nothing here is a
   photo/font size that duplicates a value already set above). */
@media (max-width: 580px) {
	.career-card { padding: 16px 22px 16px 18px; max-height: 88vh; }
	.career-card-inner { flex-direction: column; align-items: center; gap: 6px; }
	/* text-align:center here is what centers .career-card-photo-row as a
	   unit (see that rule below for why it's now inline-flex instead of
	   flex) -- text-align is the standard way to center an inline-level
	   child inside a block-level parent. */
	.career-card-photo-col { width: 100%; text-align: center; }
	/* Desktop stacks Photo -> [Name+Year -> Legacy Score] in DOM/column
	   order (set above), everything centered; mobile instead puts photo
	   and the header column (name+year, then score) side by side, per
	   the requested "name beside the photo, above the score" placement.
	   Name+year and Legacy Score stay grouped in their own sub-column
	   (.career-card-header-col, see the base rule's comment above) so
	   they stack as one unit beside the photo regardless of viewport --
	   no explicit `order` needed, DOM order (photo, then header-col)
	   already matches both layouts.
	   display:inline-flex (not flex) makes the row shrink to fit its
	   own content -- photo plus the header column, nothing more --
	   instead of stretching across the card's full width by default
	   the way a block-level flex container does. A wide, mostly-empty
	   row is what caused both complaints that have come up here:
	   justify-content:center on a full-width row left a tight
	   photo-to-score gap crowded in the middle with a large empty
	   margin on both outer edges either side of it; switching that to
	   space-between fixed the crowding but overcorrected into a big gap
	   of its own, stretching photo and score to the row's opposite
	   edges instead. Shrinking the row itself removes the excess width
	   that both fixes were fighting over -- photo and header-col sit at
	   their own natural, comfortable gap (16px, set below), and
	   .career-card-photo-col's text-align:center (above) centers that
	   whole snug pair within the card, rather than needing the row's own
	   internal spacing to do that job. */
	/* flex-wrap:nowrap (not wrap) -- with wrap, if the shrink-to-fit pair
	   still doesn't fit the available width even after shrinking (which
	   happens on some phones once "how this score is calculated" needs
	   its own full line), the row falls back to wrapping onto two lines,
	   which for an inline-flex with exactly two children means the WHOLE
	   row breaks into a full vertical stack -- photo and header-col both
	   centered in one column, which happens to look like a coherent
	   design but is really just this layout collapsing into the desktop
	   one, not the side-by-side placement intended here. nowrap forces
	   the pair to stay on one line; .career-card-photo's flex-shrink:0
	   (base rule) keeps the photo at its intended size rather than
	   letting the flex algorithm compress it to make room, and
	   .career-card-header-col's min-width:0 lets IT shrink instead --
	   "how this score is calculated" then wraps onto a second line
	   within its own narrow column if it must, instead of the row
	   breaking. */
	.career-card-photo-row { display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px 16px; text-align: left; }
	.career-card-header-col { align-items: flex-start; min-width: 0; }
	.career-card-name-row { margin-top: 0; align-items: baseline; gap: 6px; }
	/* Small gaps between label/number/link (all effectively 0 in the base
	   rule -- fine at the base rule's much larger 36px number, cramped
	   once everything here is scaled down to fit next to a now-smaller
	   photo) so the three lines read as a spaced-out group instead of a
	   tight cluster. */
	.career-card-legacy { margin-top: 6px; align-items: flex-start; gap: 4px; min-width: 0; }
	.career-card-legacy-how { margin-top: 0; }
	.career-card-feature-articles { margin-top: 6px; font-size: 11px; }
	/* padding-top:18px on the base rule exists to clear the close button,
	   which only sits beside .career-card-body on desktop's side-by-side
	   layout (see the base rule's own comment) -- at this width the body
	   is stacked below the header instead, well clear of the close button
	   already, so that padding is pure dead space here and is cut hard. */
	.career-card-body { width: 100%; padding-top: 8px; }
	/* Section spacing trimmed hard at this width -- the base rule's 22px
	   top margin between sections (plenty of room on desktop's roomier
	   card) was one of the bigger single costs to fitting a prolific
	   player's whole card in one mobile screen. */
	.career-card-section-title { margin: 7px 0 4px 0; }
	.career-card-achievement { margin-bottom: 2px; }
	.career-card-ranking, .career-card-record { margin-bottom: 2px; }
	.career-card-clipping { margin-bottom: 3px; }
	/* Column widths scoped to this table only (won't affect combined-table
	   or season-subtable, even though the underlying problem — and the fix
	   — is the same one already solved there: percentage <col> widths plus
	   selective wrap permission, since white-space:nowrap on every cell
	   otherwise lets the table's intrinsic content width blow past the
	   card's container). Season/name is the only column allowed to wrap —
	   every numeric column, including FT's "156-200"-style ranges, stays
	   nowrap on one line; dropping the "(avg)" parenthetical from FG/3PT
	   (see careerCardBuildStatsTable) frees enough width to make that
	   possible without FT needing to wrap too. */
	table.career-card-stats .col-season { width: 24%; }
	table.career-card-stats .col-gp { width: 7%; }
	table.career-card-stats .col-fg { width: 9%; }
	table.career-card-stats .col-3pt { width: 8%; }
	table.career-card-stats .col-ft { width: 18%; }
	table.career-card-stats .col-ftpct { width: 13%; }
	table.career-card-stats .col-pts { width: 11%; }
	table.career-card-stats .col-avg { width: 10%; }
	table.career-card-stats th:nth-child(1), table.career-card-stats td:nth-child(1) {
		white-space: normal;
	}
	.career-card-close { top: 6px; right: 6px; width: 28px; height: 28px; line-height: 26px; font-size: 16px; }
	/* Moved up to the top-right corner (2026-09-11, at the person's direct
	   request) -- below this breakpoint the photo/header-col row sits at
	   the TOP of the stacked card, with the stats table filling the full
	   width underneath, so a bottom-anchored share button (the desktop/
	   tablet placement, still correct above this breakpoint) ended up
	   stranded below the entire stats table instead of near the photo it
	   actually belongs to. Same right:6px as .career-card-close above so
	   the two buttons share one vertical column in that corner ("aligned
	   horizontally with the close button" per the request); top is set so
	   this button's own bottom edge lines up with the photo's bottom edge
	   ("bottom-aligned with the photo") rather than a guessed pixel value:
	   16px card padding-top (the photo row's own top, in this same
	   absolute-position coordinate space) + 128px fixed mobile photo
	   height (.career-card-photo's floor size at this breakpoint, see
	   that rule) - this button's own 28px height = 116px. The photo is
	   reliably the taller of the two items in that row (100-128px vs.
	   name/score's ~60-70px), so its own height, not the row's variable
	   total height, is what the row's --align-items:center-- centers
	   around -- safe to anchor off the photo's fixed size this way. */
	.career-card-share { top: 116px; right: 6px; width: 28px; height: 28px; }
	/* Opens downward now (top, not bottom) since the button itself moved
	   from the card's bottom corner to its top corner -- 116px button top
	   + 28px button height + 8px gap. bottom:auto cancels the base rule's
	   bottom:52px, which would otherwise combine with this top value and
	   stretch the popover's height across that whole span instead of
	   sizing to its own content. */
	.career-card-share-popover { top: 152px; bottom: auto; right: 6px; }
	.career-card-achievement,
	.career-card-ranking,
	.career-card-record { font-size: 12px; }
	.career-card-clip-link,
	.career-card-honor-ext-link { font-size: 12px; }
	.career-card-clip-meta { font-size: 10px; }
}