/* ============================================================
   Beta-only styles: ratings, likes, share (Phase 4).
   All new styles live here — sea2.css stays byte-identical
   to the legacy site. Palette: site green #00683d, muted
   #8a8a8a strip per the plan.
   ============================================================ */

/* ---- social strip on panels ---- */

.beta-social {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	padding: 8px 2px 2px;
	border-top: 1px solid #e6e6e6;
	color: #8a8a8a;
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	line-height: 1;
	-webkit-user-select: none;
	user-select: none;
}

/* photo/video: the bar sits after the anchor, give it side padding */
.photoPanel .beta-social,
.videoPanel .beta-social,
.audioPanel .beta-social {
	margin: 0;
	padding: 8px 12px 10px;
}

/* quotes: borderless, centered */
.quotePanel .beta-social {
	border-top: 0;
	justify-content: center;
	margin-top: 4px;
}
.quotePanel .beta-social .bs-flex { display: none; }

/* lists: darker border to match the table rule */
.listPanel .beta-social { border-top-color: #cfcfcf; }

.bs-flex { flex: 1 1 auto; }

/* stars */
.bs-stars { display: inline-flex; gap: 1px; cursor: pointer; }
.bs-star {
	color: #d9d9d9;
	font-size: 16px;
	transition: color .12s;
}
.bs-star.bs-on { color: #8a8a8a; }
.bs-star.bs-mine { color: #00683d; }
.bs-star.bs-preview { color: #0a8a52; }

.bs-avg { font-size: 12px; color: #9a9a9a; white-space: nowrap; }

/* like + share buttons */
.beta-social button {
	background: none;
	border: 0;
	margin: 0;
	padding: 2px 3px;
	color: #8a8a8a;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font: inherit;
	line-height: 1;
}
.beta-social button:hover { color: #00683d; }
.bs-like-n { font-size: 12px; }
.bs-like.bs-liked { color: #b0413e; }
.bs-like.bs-liked .bs-heart { fill: #b0413e; stroke: #b0413e; }

/* mobile: bigger touch targets (site's one-column breakpoint) */
@media (max-width: 749px) {
	.beta-social { gap: 10px; padding-top: 10px; }
	.bs-star { font-size: 21px; padding: 5px 4px; }
	.photoPanel .beta-social,
	.videoPanel .beta-social,
	.audioPanel .beta-social { padding: 10px 12px 12px; }
	.beta-social button { padding: 8px; }
	.bs-like-n, .bs-avg { font-size: 13px; }
}

/* ---- floating bar inside the Fancybox lightbox ---- */

.beta-social-lightbox,
.fancybox-container .beta-social-lightbox {
	position: absolute;
	top: 44px; /* below the fancybox slide counter */
	left: 12px;
	z-index: 99996; /* under the fancybox toolbar, over the slide */
	margin: 0;
	padding: 7px 14px;
	background: rgba(25, 25, 25, .78);
	border: 0;
	border-radius: 18px;
	color: #ddd;
}
.beta-social-lightbox .bs-star { color: #6f6f6f; }
.beta-social-lightbox .bs-star.bs-on { color: #fff; }
.beta-social-lightbox .bs-star.bs-mine { color: #7dd3a0; }
.beta-social-lightbox .bs-star.bs-preview { color: #a9e8c6; }
.beta-social-lightbox .bs-avg { color: #bbb; }
.beta-social-lightbox button { color: #ddd; }
.beta-social-lightbox button:hover { color: #7dd3a0; }
.beta-social-lightbox .bs-flex { display: none; }

/* mobile: the bar docks inside the fancybox caption chrome instead of
   floating over the photo (portrait images start where the pill sat).
   Captionless photos get no lightbox bar on mobile at all. */
.beta-social-incaption,
.fancybox-container .beta-social-incaption {
	position: static;
	display: flex;
	justify-content: center;
	background: transparent;
	border-radius: 0;
	padding: 2px 0 8px;
	margin: 0;
}
/* fancybox's caption wrap sets pointer-events:none and re-enables only
   a/button/select — re-enable the whole docked row so star taps rate
   and near-miss taps (label, seams) are inert instead of falling
   through to the slide, whose action is close */
.fancybox-caption .beta-social-incaption,
.fancybox-caption .beta-social-incaption .bs-stars,
.fancybox-caption .beta-social-incaption .bs-star {
	pointer-events: all;
}

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

.bsm-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .55);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 100000;
	font-family: 'Roboto', sans-serif;
}
.bsm-overlay.bsm-open { display: flex; }
.bsm-box {
	background: #fff;
	width: 280px;
	max-width: calc(100vw - 40px);
	border-radius: 4px;
	padding: 18px 20px 20px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
}
.bsm-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 15px;
	font-weight: 500;
	color: #333;
	margin-bottom: 12px;
}
.bsm-close {
	cursor: pointer;
	font-size: 22px;
	line-height: 1;
	color: #999;
	padding: 0 2px;
}
.bsm-close:hover { color: #333; }
.bsm-link {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: left;
	padding: 10px 12px;
	margin: 6px 0 0;
	border: 1px solid #e2e2e2;
	border-radius: 3px;
	color: #333;
	text-decoration: none;
	font-size: 14px;
	background: #fff;
	cursor: pointer;
	font-family: inherit;
}
.bsm-link:hover { border-color: #00683d; color: #00683d; }

/* ---- toast ---- */

#beta-toast {
	position: fixed;
	left: 50%;
	bottom: 28px;
	transform: translateX(-50%) translateY(10px);
	background: #222;
	color: #fff;
	padding: 9px 16px;
	border-radius: 3px;
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	opacity: 0;
	transition: opacity .25s, transform .25s;
	pointer-events: none;
	z-index: 100001;
}
#beta-toast.bt-show {
	opacity: 1;
	transform: translateX(-50%);
}

/* ============================================================
   Story social + tags, and tagged stories on a tag page (Sept 2026)
   ============================================================ */

/* The bar inside the story modal. Wider than a panel bar because the
   modal column is wide; inherits everything else from .beta-social. */
.mainStory .beta-social-story {
	margin-top: 24px;
	padding-top: 14px;
}

/* Reader-facing tag chips under the story body. */
.story-tags {
	margin-top: 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}
.story-tags-label {
	font-family: 'Roboto', sans-serif;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #8a8a8a;
	margin-right: 2px;
}
.story-tag {
	display: inline-block;
	padding: 3px 10px;
	border: 1px solid #cfcfcf;
	border-radius: 12px;
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	color: #00683d;
	text-decoration: none;
	line-height: 1.5;
}
.story-tag:hover { border-color: #00683d; background: #f2f8f5; }

/* Tag results page: stories sit above the grid rather than inside it, so
   #grid1 stays byte-identical to the legacy page. */
.tagged-stories {
	margin: 0 0 24px;
	padding: 16px 20px 18px;
	background: #f5f5f5;
	border-left: 3px solid #00683d;
}
.tagged-stories-head {
	font-family: 'Roboto', sans-serif;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #8a8a8a;
	margin-bottom: 10px;
}
.tagged-story {
	display: block;
	text-decoration: none;
	color: #333;
	padding: 8px 0;
	border-top: 1px solid #e6e6e6;
}
.tagged-story:first-of-type { border-top: none; }
.tagged-story-year {
	font-family: 'Oswald', sans-serif;
	font-size: 18px;
	color: #00683d;
	margin-right: 10px;
}
.tagged-story-title { font-family: 'Oswald', sans-serif; font-size: 18px; }
.tagged-story-syn {
	display: block;
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	color: #6b6b6b;
	margin-top: 2px;
}
.tagged-story:hover .tagged-story-title { text-decoration: underline; }

@media (max-width: 749px) {
	.tagged-stories { padding: 14px 16px; }
	.mainStory .beta-social-story { margin-top: 18px; }
}

/* ============================================================
   "We've moved" notice (js/banner.js) - bottom strip, dismissible,
   removes itself after its expiry date. Sits under the lightbox and
   the share modal (z-index 99999+).
   ============================================================ */
.beta-banner {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 9000;
	padding: 10px 46px 10px 16px;
	background: #00683d;
	color: #fff;
	font: 13px/1.4 'Roboto', sans-serif;
	text-align: center;
	box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.18);
}
.beta-banner button {
	position: absolute;
	right: 8px; top: 50%;
	transform: translateY(-50%);
	background: none;
	border: 0;
	color: #fff;
	font-size: 22px;
	line-height: 1;
	padding: 4px 10px;
	cursor: pointer;
}
.beta-banner button:hover { opacity: 0.75; }
@media (max-width: 749px) {
	.beta-banner { font-size: 12px; padding: 9px 40px 9px 12px; text-align: left; }
}