/* ==========================================================================
   TBSJ Wire — theme-aware stylesheet
   --------------------------------------------------------------------------
   theme="auto"       inherits typography + colors from the host theme; only
                      the Bitcoin-orange accent is opinionated. Use this on
                      a finished site that already has design tokens.
   theme="light"      controlled paper palette (cream + ink + orange).
   theme="dark"       controlled dark palette (ink + paper + orange).
   theme="cypherpunk" full newsroom-terminal treatment: Bodoni Moda masthead,
                      JetBrains Mono UI, hard black, halftone background.
   ========================================================================== */

/* ----- Defaults / reset ---------------------------------------------------- */
.tbsj-wire,
.tbsj-wire * { box-sizing: border-box; }
.tbsj-wire {
	--tbsj-accent:        #f7931a;
	--tbsj-accent-bright: #ffac3a;
	--tbsj-accent-dim:    #c87010;
	--tbsj-accent-soft:   color-mix(in srgb, var(--tbsj-accent) 12%, transparent);
	--tbsj-rule:          color-mix(in srgb, currentColor 18%, transparent);
	--tbsj-rule-soft:     color-mix(in srgb, currentColor 10%, transparent);
	--tbsj-bg-soft:       color-mix(in srgb, currentColor 4%, transparent);
	--tbsj-mute:          color-mix(in srgb, currentColor 60%, transparent);
	--tbsj-strong:        currentColor;
	--tbsj-radius:        0px;
	--tbsj-gap:           1.125rem;
	--tbsj-mono:          ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
	--tbsj-display:       inherit;

	display: block;
	max-width: 100%;
	margin: 1.5rem 0;
	font-family: inherit;
	color: inherit;
	font-size: 0.95em;
	line-height: 1.5;
}

.tbsj-wire a { color: inherit; text-decoration: none; }
.tbsj-wire a:hover { color: var(--tbsj-accent); }

.tbsj-wire h1, .tbsj-wire h2, .tbsj-wire h3, .tbsj-wire h4 {
	font-family: var(--tbsj-display);
	margin: 0;
}

.tbsj-wire .tbsj-error {
	border: 1px solid var(--tbsj-rule);
	border-left: 3px solid #c0392b;
	padding: 0.75em 1em;
	margin-bottom: 1em;
	background: color-mix(in srgb, #c0392b 6%, transparent);
	font-size: 0.9em;
}

/* ----- Masthead ------------------------------------------------------------ */
.tbsj-masthead {
	border: 1px solid var(--tbsj-rule);
	border-radius: var(--tbsj-radius);
	overflow: hidden;
	background: var(--tbsj-bg-soft);
}
.tbsj-masthead-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1em;
	padding: 0.5em 1em;
	border-bottom: 1px solid var(--tbsj-rule-soft);
	font-size: 0.7em;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tbsj-mute);
	flex-wrap: wrap;
}
.tbsj-live {
	color: #16a34a;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}
.tbsj-live::before {
	content: "";
	width: 0.5em; height: 0.5em;
	border-radius: 50%;
	background: #16a34a;
	box-shadow: 0 0 6px #16a34a;
	animation: tbsj-pulse 1.4s ease-in-out infinite;
}
@keyframes tbsj-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.4; transform: scale(0.8); }
}
.tbsj-masthead-title {
	text-align: center;
	padding: 1.6em 1em 1em;
}
.tbsj-mt-headline {
	font-family: var(--tbsj-display);
	font-size: clamp(1.8rem, 5vw, 4rem);
	line-height: 1;
	font-weight: 800;
	letter-spacing: -0.01em;
}
.tbsj-mt-amp {
	color: var(--tbsj-accent);
	font-weight: 400;
	font-style: italic;
	margin: 0 0.1em;
}
.tbsj-masthead-sub {
	margin-top: 0.7em;
	font-family: var(--tbsj-mono);
	font-size: 0.7em;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	color: var(--tbsj-accent);
}
.tbsj-masthead-meta {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 1em;
	padding: 0.6em 1em;
	border-top: 1px solid var(--tbsj-rule-soft);
	font-size: 0.7em;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--tbsj-mute);
}
.tbsj-masthead-meta > :first-child { text-align: left; }
.tbsj-masthead-meta > :last-child  { text-align: right; }
.tbsj-masthead-tagline {
	font-style: italic;
	font-size: 1.1em;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--tbsj-strong);
}
@media (max-width: 600px) {
	.tbsj-masthead-meta { grid-template-columns: 1fr; text-align: center !important; }
	.tbsj-masthead-meta > :first-child, .tbsj-masthead-meta > :last-child { text-align: center; }
}

/* ----- Ticker -------------------------------------------------------------- */
.tbsj-ticker {
	display: flex;
	border: 1px solid var(--tbsj-rule);
	border-top: 0;
	background: var(--tbsj-bg-soft);
	overflow: hidden;
	height: 2.6em;
	margin-bottom: var(--tbsj-gap);
}
.tbsj-layout-ticker .tbsj-ticker { border-top: 1px solid var(--tbsj-rule); margin-bottom: 0; }
.tbsj-ticker-label {
	flex: 0 0 auto;
	padding: 0 1em;
	display: flex;
	align-items: center;
	background: var(--tbsj-accent);
	color: #0a0a0a;
	font-weight: 700;
	font-size: 0.75em;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	font-family: var(--tbsj-mono);
}
.tbsj-ticker-track {
	flex: 1;
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: center;
}
.tbsj-ticker-tape {
	display: flex;
	gap: 2.5em;
	white-space: nowrap;
	padding-left: 1em;
	font-size: 0.85em;
	align-items: center;
	animation: tbsj-tape 90s linear infinite;
}
.tbsj-ticker-track:hover .tbsj-ticker-tape { animation-play-state: paused; }
.tbsj-ticker-item { display: inline-flex; gap: 0.6em; align-items: center; }
.tbsj-dot { color: var(--tbsj-accent); }
.tbsj-ticker-src {
	color: var(--tbsj-mute);
	font-size: 0.8em;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-family: var(--tbsj-mono);
}
@keyframes tbsj-tape {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ----- Frame layout -------------------------------------------------------- */
.tbsj-frame {
	display: grid;
	grid-template-columns: 17rem 1fr;
	gap: var(--tbsj-gap);
}
.tbsj-frame.tbsj-no-sidebar { grid-template-columns: 1fr; }
@media (max-width: 880px) {
	.tbsj-frame { grid-template-columns: 1fr; }
}

/* ----- Sidebar panels ------------------------------------------------------ */
.tbsj-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--tbsj-gap);
	align-self: start;
}
.tbsj-panel {
	border: 1px solid var(--tbsj-rule);
	background: var(--tbsj-bg-soft);
	border-radius: var(--tbsj-radius);
}
.tbsj-panel-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.55em 0.9em;
	border-bottom: 1px solid var(--tbsj-rule-soft);
	font-size: 0.7em;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--tbsj-accent);
	font-family: var(--tbsj-mono);
}
.tbsj-ix { color: var(--tbsj-mute); font-size: 0.85em; }
.tbsj-panel-body { padding: 0.9em; }

/* ----- Filters ------------------------------------------------------------- */
.tbsj-filters { display: flex; flex-direction: column; gap: 0.3em; }
.tbsj-filter-btn {
	all: unset;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1em;
	padding: 0.6em 0.85em;
	border: 1px solid var(--tbsj-rule);
	font-family: var(--tbsj-mono);
	font-size: 0.78em;
	letter-spacing: 0.06em;
	cursor: pointer;
	transition: background 120ms, border-color 120ms, color 120ms;
}
.tbsj-filter-btn:hover {
	background: var(--tbsj-accent-soft);
	border-color: var(--tbsj-accent-dim);
}
.tbsj-filter-btn:focus-visible {
	outline: 2px solid var(--tbsj-accent);
	outline-offset: 2px;
}
.tbsj-filter-btn.is-active {
	background: var(--tbsj-accent);
	border-color: var(--tbsj-accent);
	color: #0a0a0a;
	font-weight: 700;
}
.tbsj-filter-btn .tbsj-count {
	font-size: 0.85em;
	font-variant-numeric: tabular-nums;
	opacity: 0.7;
}
.tbsj-filter-btn.is-active .tbsj-count { opacity: 1; }

/* ----- Language select ----------------------------------------------------- */
.tbsj-lang-label {
	display: block;
	font-size: 0.7em;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tbsj-mute);
	margin-bottom: 0.5em;
	font-family: var(--tbsj-mono);
}
.tbsj-lang-select {
	width: 100%;
	padding: 0.55em 0.7em;
	font-family: var(--tbsj-mono);
	font-size: 0.85em;
	border: 1px solid var(--tbsj-rule);
	background: transparent;
	color: inherit;
	cursor: pointer;
	border-radius: var(--tbsj-radius);
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
	                  linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
	background-size: 5px 5px;
	background-repeat: no-repeat;
	padding-right: 2em;
}
.tbsj-rtl .tbsj-lang-select {
	background-position: 14px 50%, 19px 50%;
	padding-right: 0.7em;
	padding-left: 2em;
}
.tbsj-lang-select:focus-visible {
	outline: 2px solid var(--tbsj-accent);
	outline-offset: 2px;
	border-color: var(--tbsj-accent);
}
.tbsj-lang-hint {
	margin-top: 0.5em;
	font-size: 0.7em;
	color: var(--tbsj-mute);
	letter-spacing: 0.06em;
	font-family: var(--tbsj-mono);
}

/* ----- BTC dial ------------------------------------------------------------ */
.tbsj-dial-wrap { display: flex; align-items: center; gap: 1em; }
.tbsj-dial { position: relative; width: 5em; height: 5em; flex: 0 0 auto; }
.tbsj-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tbsj-dial-bg { fill: none; stroke: var(--tbsj-rule); stroke-width: 8; }
.tbsj-dial-fg {
	fill: none;
	stroke: var(--tbsj-accent);
	stroke-width: 8;
	stroke-linecap: square;
	transition: stroke-dasharray 400ms ease;
}
.tbsj-dial-text {
	position: absolute; inset: 0;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
}
.tbsj-dial-num {
	font-family: var(--tbsj-display);
	font-size: 1.4em;
	font-weight: 800;
	color: var(--tbsj-accent);
	line-height: 1;
}
.tbsj-dial-lab {
	font-family: var(--tbsj-mono);
	font-size: 0.55em;
	letter-spacing: 0.18em;
	color: var(--tbsj-mute);
	margin-top: 0.2em;
}
.tbsj-dial-info { font-size: 0.78em; line-height: 1.5; }
.tbsj-dial-info small {
	display: block;
	margin-top: 0.4em;
	color: var(--tbsj-mute);
	font-size: 0.85em;
	font-family: var(--tbsj-mono);
	letter-spacing: 0.04em;
}

/* ----- Source list --------------------------------------------------------- */
.tbsj-src-list { display: flex; flex-direction: column; gap: 0.4em; }
.tbsj-src-row {
	display: grid;
	grid-template-columns: 1fr 1.8em;
	gap: 0.5em;
	align-items: center;
}
.tbsj-src-name {
	font-size: 0.75em;
	font-family: var(--tbsj-mono);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tbsj-src-bar {
	position: relative;
	height: 3px;
	margin-top: 3px;
	background: var(--tbsj-rule-soft);
}
.tbsj-src-bar > span {
	position: absolute;
	inset: 0 auto 0 0;
	background: linear-gradient(90deg, var(--tbsj-accent-dim), var(--tbsj-accent));
	transition: width 400ms ease;
}
.tbsj-src-count {
	font-family: var(--tbsj-mono);
	font-size: 0.7em;
	color: var(--tbsj-mute);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* ----- Feed head ----------------------------------------------------------- */
.tbsj-feed-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1em;
	padding-bottom: 0.7em;
	border-bottom: 2px solid var(--tbsj-accent);
	margin-bottom: 1.2em;
}
.tbsj-feed-title {
	font-size: clamp(1.3rem, 2.4vw, 2rem);
	font-weight: 800;
	font-style: italic;
	letter-spacing: -0.01em;
}
.tbsj-feed-count {
	font-family: var(--tbsj-mono);
	font-size: 0.7em;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tbsj-mute);
}
.tbsj-feed-count span { color: var(--tbsj-accent); font-variant-numeric: tabular-nums; }

/* ----- Lead story ---------------------------------------------------------- */
.tbsj-lead {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 1.2em;
	padding-bottom: 1.2em;
	margin-bottom: 1.2em;
	border-bottom: 1px dashed var(--tbsj-rule);
}
@media (max-width: 640px) { .tbsj-lead { grid-template-columns: 1fr; } }
.tbsj-lead-img {
	display: block;
	aspect-ratio: 16/10;
	border: 1px solid var(--tbsj-rule);
	background-size: cover;
	background-position: center;
	background-color: var(--tbsj-bg-soft);
	position: relative;
	overflow: hidden;
}
.tbsj-lead-img::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.3));
}
.tbsj-lead-img--placeholder {
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, var(--tbsj-bg-soft), var(--tbsj-rule-soft));
}
.tbsj-lead-img--placeholder span {
	font-family: var(--tbsj-display);
	font-style: italic;
	font-size: 3em;
	color: var(--tbsj-accent-dim);
}
.tbsj-lead-meta {
	display: flex;
	gap: 0.8em;
	flex-wrap: wrap;
	align-items: center;
	font-family: var(--tbsj-mono);
	font-size: 0.7em;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tbsj-accent);
	margin-bottom: 0.6em;
}
.tbsj-lead-meta > :not(.tbsj-lead-flag) { color: var(--tbsj-mute); }
.tbsj-lead-flag {
	background: var(--tbsj-accent);
	color: #0a0a0a;
	padding: 0.15em 0.5em;
	font-weight: 700;
}
.tbsj-lead-title {
	font-size: clamp(1.2rem, 2vw, 1.7rem);
	line-height: 1.15;
	font-weight: 700;
	margin-bottom: 0.5em;
	letter-spacing: -0.01em;
}
.tbsj-lead-title a:hover { color: var(--tbsj-accent); }
.tbsj-byline {
	font-style: italic;
	color: var(--tbsj-mute);
	font-size: 0.85em;
}
.tbsj-lead-tags { margin-top: 0.8em; display: flex; gap: 0.3em; flex-wrap: wrap; }

/* ----- Card grid ----------------------------------------------------------- */
.tbsj-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	border-top: 1px solid var(--tbsj-rule);
	border-left: 1px solid var(--tbsj-rule);
}
@media (max-width: 640px) { .tbsj-grid { grid-template-columns: 1fr; } }
.tbsj-feed[data-tbsj-layout="list"] .tbsj-grid { grid-template-columns: 1fr; }
.tbsj-feed[data-tbsj-layout="grid"]  .tbsj-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.tbsj-card {
	border-right: 1px solid var(--tbsj-rule);
	border-bottom: 1px solid var(--tbsj-rule);
	padding: 0.9em 1em;
	display: flex;
	flex-direction: column;
	gap: 0.55em;
	min-height: 8em;
	position: relative;
	transition: background 150ms;
}
.tbsj-card:hover { background: var(--tbsj-bg-soft); }
.tbsj-card:hover::before {
	content: "";
	position: absolute; left: 0; top: 0; bottom: 0;
	width: 3px;
	background: var(--tbsj-accent);
}
.tbsj-rtl .tbsj-card:hover::before { left: auto; right: 0; }
.tbsj-card-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: var(--tbsj-mono);
	font-size: 0.65em;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tbsj-mute);
}
.tbsj-card-src { color: var(--tbsj-accent-bright); }
.tbsj-card-title {
	font-size: 1.05em;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -0.005em;
}
.tbsj-card-title a:hover { color: var(--tbsj-accent); }
.tbsj-card-tags {
	margin-top: auto;
	display: flex;
	gap: 0.3em;
	flex-wrap: wrap;
}

/* ----- Tags ---------------------------------------------------------------- */
.tbsj-tag {
	display: inline-block;
	padding: 0.15em 0.5em;
	border: 1px solid var(--tbsj-rule);
	font-family: var(--tbsj-mono);
	font-size: 0.65em;
	letter-spacing: 0.15em;
	font-weight: 600;
	color: var(--tbsj-mute);
}
.tbsj-tag-btc   { color: var(--tbsj-accent); border-color: var(--tbsj-accent-dim); }
.tbsj-tag-eth   { color: #6b8aff; border-color: color-mix(in srgb, #6b8aff 50%, transparent); }
.tbsj-tag-sol   { color: #b87dff; border-color: color-mix(in srgb, #b87dff 50%, transparent); }
.tbsj-tag-guide { color: #16a34a; border-color: color-mix(in srgb, #16a34a 50%, transparent); }

/* ----- Empty / loading / footer ------------------------------------------- */
.tbsj-empty {
	padding: 4em 1em;
	text-align: center;
	color: var(--tbsj-mute);
	font-family: var(--tbsj-mono);
	letter-spacing: 0.12em;
}
.tbsj-feed[data-loading="1"] { opacity: 0.55; transition: opacity 200ms; }

.tbsj-footer {
	margin-top: var(--tbsj-gap);
	padding: 0.7em 1em;
	border: 1px solid var(--tbsj-rule);
	background: var(--tbsj-bg-soft);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.6em;
	font-family: var(--tbsj-mono);
	font-size: 0.7em;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--tbsj-mute);
	border-radius: var(--tbsj-radius);
}
.tbsj-seal { font-style: italic; text-transform: none; letter-spacing: 0.02em; }

/* fade-in for newly-rendered items */
.tbsj-card, .tbsj-lead { animation: tbsj-fadein 350ms ease both; }
@keyframes tbsj-fadein {
	from { opacity: 0; transform: translateY(3px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* RTL nudges */
.tbsj-rtl .tbsj-src-bar > span { left: auto; right: 0; }
.tbsj-rtl .tbsj-grid { border-left: 0; border-right: 1px solid var(--tbsj-rule); }
.tbsj-rtl .tbsj-card { border-right: 0; border-left: 1px solid var(--tbsj-rule); border-bottom: 1px solid var(--tbsj-rule); }


/* ============================================================================
   THEME VARIANTS
   ========================================================================== */

/* --- light variant (controlled paper palette) ----------------------------- */
.tbsj-wire[data-tbsj-theme="light"] {
	--tbsj-paper: #faf6ec;
	--tbsj-ink:   #1a1a1a;
	background: var(--tbsj-paper);
	color: var(--tbsj-ink);
	padding: 1.5rem;
	border: 1px solid color-mix(in srgb, var(--tbsj-ink) 12%, transparent);
}

/* --- dark variant (controlled dark palette) ------------------------------- */
.tbsj-wire[data-tbsj-theme="dark"] {
	--tbsj-paper: #ece6d5;
	--tbsj-ink:   #0d0d0d;
	background: var(--tbsj-ink);
	color: var(--tbsj-paper);
	padding: 1.5rem;
	border: 1px solid color-mix(in srgb, var(--tbsj-paper) 15%, transparent);
}

/* --- cypherpunk: full TBSJ Wire newsroom-terminal treatment --------------- */
.tbsj-wire[data-tbsj-theme="cypherpunk"] {
	--tbsj-display: "Bodoni Moda", "Times New Roman", Georgia, serif;
	--tbsj-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;
	--tbsj-rule:        #2a2a2a;
	--tbsj-rule-soft:   #1f1f1f;
	--tbsj-bg-soft:     #131313;
	--tbsj-mute:        #6a6359;
	--tbsj-strong:      #d8d3c4;
	background: #0a0a0a;
	background-image:
		radial-gradient(ellipse 80% 50% at 50% -10%, rgba(247,147,26,0.08), transparent 60%),
		repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,0.012) 2px 3px);
	color: #d8d3c4;
	padding: 1.25rem;
	border: 1px solid #2a2a2a;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 0.82rem;
}
.tbsj-wire[data-tbsj-theme="cypherpunk"] .tbsj-mt-headline {
	font-family: "Bodoni Moda", serif;
	font-style: italic;
	font-weight: 900;
	color: #f4ecd8;
}
.tbsj-wire[data-tbsj-theme="cypherpunk"] .tbsj-feed-title,
.tbsj-wire[data-tbsj-theme="cypherpunk"] .tbsj-lead-title,
.tbsj-wire[data-tbsj-theme="cypherpunk"] .tbsj-card-title {
	font-family: "Bodoni Moda", serif;
	color: #f4ecd8;
}
.tbsj-wire[data-tbsj-theme="cypherpunk"] .tbsj-byline {
	font-family: "Bodoni Moda", serif;
}
.tbsj-wire[data-tbsj-theme="cypherpunk"] .tbsj-masthead {
	background: linear-gradient(180deg, #131313, #0a0a0a);
}
.tbsj-wire[data-tbsj-theme="cypherpunk"] .tbsj-panel,
.tbsj-wire[data-tbsj-theme="cypherpunk"] .tbsj-footer { background: #131313; }

/* Bodoni Moda + JetBrains Mono are enqueued conditionally from PHP when
   the cypherpunk theme is active, so the host theme is never forced to
   load extra web fonts unless the publisher explicitly opts in. */