/* Pulled out of .contentTitleBar into its own standalone bar sitting
   flush between the title and the data block, 2026-09-08 per Peter -
   see details.php's comment on the contentTitleBar/contentTab split.
   Needs its own width/position now (previously it just flexed inside
   contentTitleBar's own already-positioned box) matching the same
   980px/left:20px box every other block in this column uses.

   Deliberately plain - no background, no border, no shadow - per
   Peter, 2026-09-08: an earlier pass gave this a dark background +
   outer shadow, but a stray browser cache mix (old tabs.css loaded
   alongside the new details.php markup) rendered a version Peter
   liked better - the tab row floating directly on .contentWrap's own
   background, which is transparent, so .page's cream background-color
   + background-image (contentBG_temp.png) shows through behind it
   instead of a solid panel. Recreating that on purpose: no
   background-color/border/box-shadow here at all now, and the
   .contentTab.shadow override + dark-bg color inversion below are
   gone since there's no dark bg left to invert against. */
.contentTab {
	width: 1020px; /* was 980px/left:20px (matching title/data) - widened
	   to .contentWrap's own full span (nav-to-page-edge), 2026-09-08
	   per Peter, so this bar runs edge to edge instead of sharing the
	   20px-inset column the title/data blocks use. */
	position: relative;
	left: 0px;
	top: 0px;
	display: flex;
	justify-content: center;
	flex: 0 0 auto;
	padding: 4px 0;
	margin: 0;
	box-shadow: 0 8px 6px -2px var(--color-border-dark); /* bottom only.
	   y-offset(8) > blur(6), 2026-09-08 per Peter ("line at the top of
	   the tab div as it extends beyond the title div") - the previous
	   0 4px 6px had offset < blur, so the shadow still reached ~2px
	   above this bar's own top edge; in the two "wing" strips left/
	   right of the title bar (where this bar is now wider than the
	   title above it) that stray reach had nothing opaque above it to
	   hide behind, so it showed as a faint line. Offset now exceeds
	   blur so there's zero reach back above the top edge anywhere. */
}

/* Inverted from the original dark-text/light-shadow scheme, 2026-09-08
   per Peter - default state is now the LIGHT color with a DARK shadow
   (makes the text pop more against the busy background image behind
   this bar), and hover reverses it back to dark text/light shadow
   (this is literally the old default, just swapped onto :hover).
   Font bumped from 12px back up to 14px at the same time. */
.tabItem {
	padding: 5px 18px;
	margin: 0 3px;
	font-size: 14px;
	font-weight: bold;
	font-variant: small-caps;
	color: var(--color-border-light);
	cursor: pointer;
	white-space: nowrap;
	border-top: 2px solid transparent;
	border-bottom: 2px solid transparent;
	text-shadow: var(--color-border-dark) 1px 1px 2px;
}

.tabItem:hover {
	color: var(--color-divider);
	text-decoration: none;
	text-shadow: #fff 1px 1px 2px;
}

/* Reworked 2026-09-08 per Peter - the dark-text/light-shadow active
   look (inherited from the tab bar's pre-inversion default) didn't
   read well once the base .tabItem default flipped to light-text/
   dark-shadow above. Active tab now matches the non-active tabs
   exactly - no color/text-shadow overrides here at all, so it just
   falls through to .tabItem's own (light text, dark shadow) - with
   the only visual distinction being the border color below, and no
   hover effect (the explicit :hover rule just repeats the non-hover
   look, since .tabItem:hover would otherwise still apply its own
   hover colors on mouseover even though cursor is "default" here).

   Top border dropped, 2026-09-08 per Peter (2nd pass) - bottom-only
   read better than matching bars on both edges. No border-top
   declared here at all now, so it falls through to .tabItem's own
   border-top: 2px solid transparent - keeps the same box height/
   alignment as every other tab instead of shifting up 2px, just
   invisible. */
.tabItemActive {
	border-bottom: 2px solid var(--color-border-light);
	font-weight: bold;
	cursor: default;
}

.tabItemActive:hover {
	color: var(--color-border-light);
	text-shadow: var(--color-border-dark) 1px 1px 2px;
}

.tabPanel {
	display: none;
}

.tabPanelActive {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	height: 100%;
}