/**
 * Styles for this theme's own blocks.
 *
 * Loaded through each block.json's "style" field, so WordPress enqueues it
 * on the frontend and inside the iframed editor, and only on pages that
 * actually use one of these blocks.
 *
 * Every colour and radius comes from theme.json presets — there are no
 * literal brand hex values here, so re-theming means editing theme.json
 * alone.
 */

/* ---------------------------------------------------------------- Badges */

.propstreams-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: var(--wp--custom--pill--radius, 999px);
	padding: 5px 12px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
	border: 1px solid transparent;
}

a.propstreams-badge:hover {
	filter: brightness(1.15);
}

.propstreams-badge__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

.propstreams-badge--live {
	background: color-mix(in srgb, var(--wp--preset--color--accent-teal) 14%, transparent);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent-teal) 40%, transparent);
	color: var(--wp--preset--color--accent-teal);
}

.propstreams-badge--scheduled {
	background: color-mix(in srgb, var(--wp--preset--color--accent-blue) 18%, transparent);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent-blue) 45%, transparent);
	color: color-mix(in srgb, var(--wp--preset--color--accent-blue) 45%, var(--wp--preset--color--paper));
}

.propstreams-badge--offline {
	background: color-mix(in srgb, var(--wp--preset--color--paper) 6%, transparent);
	border-color: var(--wp--preset--color--line);
	color: var(--wp--preset--color--text-muted);
}

.propstreams-badge--verified {
	background: color-mix(in srgb, var(--wp--preset--color--accent-bull) 12%, transparent);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent-bull) 35%, transparent);
	color: var(--wp--preset--color--accent-bull);
}

.propstreams-badge--bear {
	background: color-mix(in srgb, var(--wp--preset--color--accent-bear) 12%, transparent);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent-bear) 35%, transparent);
	color: var(--wp--preset--color--accent-bear);
}

/* Advertising label. Legally this has to be noticeable, so it keeps a
   solid border rather than the muted treatment used for "offline". */
.propstreams-badge--ad {
	background: transparent;
	border-color: var(--wp--preset--color--line-strong);
	color: var(--wp--preset--color--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.6875rem;
}

/* Plain fact, not a status: how much we have documented. Quieter than the
   live/scheduled badges so it never reads as a state the channel is in. */
.propstreams-badge--count {
	background: color-mix(in srgb, var(--wp--preset--color--paper) 7%, transparent);
	border-color: var(--wp--preset--color--line);
	color: var(--wp--preset--color--paper);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.propstreams-counts {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/*
 * Channel pills carry that channel's own colour instead of one shared blue.
 * The variant number comes from propstreams_channel_variant(), the same
 * source the logo tile uses — a channel therefore has one colour, whether
 * it appears as a circle or as a pill.
 *
 * One rule set driven by a custom property, so a new hue is a single line
 * rather than a copied block. The hues are the light end of each logo
 * gradient: the tiles carry white text and can go dark, a pill *is* its
 * text colour and has to stay legible on the near-black page.
 */
.propstreams-badge--channel-1 { --propstreams-channel: #FBBF24; }
.propstreams-badge--channel-2 { --propstreams-channel: #4ADE80; }
.propstreams-badge--channel-3 { --propstreams-channel: #C084FC; }
.propstreams-badge--channel-4 { --propstreams-channel: #22D3EE; }
.propstreams-badge--channel-5 { --propstreams-channel: #FB7185; }
.propstreams-badge--channel-6 { --propstreams-channel: #93C5FD; }

/* Manuell gewählte Farbe: kommt als Inline-Custom-Property vom Server,
   inklusive einer bei Bedarf aufgehellten Textvariante. */
.propstreams-badge--channel-custom {
	color: var(--propstreams-channel-text, var(--propstreams-channel));
}

[class*="propstreams-badge--channel-"] {
	background: color-mix(in srgb, var(--propstreams-channel) 14%, transparent);
	border-color: color-mix(in srgb, var(--propstreams-channel) 42%, transparent);
	color: var(--propstreams-channel);
}

/* Deliberately dashed and amber so demo content never reads as a real
   status badge at a glance. */
.propstreams-badge--demo {
	background: color-mix(in srgb, var(--wp--preset--color--accent-demo) 10%, transparent);
	border: 1px dashed color-mix(in srgb, var(--wp--preset--color--accent-demo) 50%, transparent);
	color: var(--wp--preset--color--accent-demo);
}

/* ----------------------------------------------------------------- Cards */

.propstreams-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--card--radius, 20px);
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.propstreams-card:hover {
	transform: translateY(-2px);
	border-color: var(--wp--preset--color--line-strong);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

/* ------------------------------------------------------- Empty / fallback */

.propstreams-empty {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--card--radius, 20px);
	padding: var(--wp--preset--spacing--40);
	text-align: center;
	color: var(--wp--preset--color--text-muted);
	margin: 0;
}

/* --------------------------------------------------------------- Live log */

.propstreams-log {
	margin: 0;
	padding: 0;
	list-style: none;
}

.propstreams-log__row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.3rem;
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.propstreams-log__row:last-child {
	border-bottom: 0;
}

/*
 * The text of the update, not a headline — these entries have none.
 * It carries the link because it is the only thing in the row a reader
 * would think to click.
 */
.propstreams-log__text {
	color: var(--wp--preset--color--paper);
	text-decoration: none;
	line-height: 1.55;
}

.propstreams-log__text:hover {
	color: var(--wp--preset--color--accent-teal);
}

/* Timestamp and channel pill share one line above the update text.
   Centred, not baseline-aligned: the channel is a pill, and baseline
   alignment would sit it low against the plain timestamp text. */
.propstreams-log__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.propstreams-log__time {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--accent-bull);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.propstreams-log__next {
	color: var(--wp--preset--color--text-muted);
	padding: 0.9rem 0;
	margin: 0;
}

/* ------------------------------------------- Channel ticker (sidebar widget) */

/*
 * The ticker is a card so it reads as a running side-channel rather than a
 * second article column. It now runs the full height of the profile text
 * beside it: the column stretches, the card fills it, and the list inside
 * takes whatever height is left over.
 *
 * Not sticky any more — sticky only earns its keep when the element is
 * shorter than what it sits next to, and this one is deliberately as tall
 * as its neighbour.
 */
.wp-block-propstreams-profile-ticker {
	display: flex;
	flex-direction: column;
	height: 100%;
	/* Without this, `height: 100%` sizes the content box and the 1.25rem
	   padding plus border are added on top — the card then overshoots the
	   text column by 42px instead of ending level with it. */
	box-sizing: border-box;
	/* Guarantees a usable ticker even beside a very short profile text. */
	min-height: 18rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--card--radius, 20px);
	padding: 1.25rem;
}

.wp-block-propstreams-profile-ticker > h2 {
	margin: 0 0 0.2rem;
}

.propstreams-log__scope {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
	margin: 0 0 0.5rem;
}

/*
 * `flex-basis: 0` and `min-height: 0` together are what make the card take
 * its height *from* the text column rather than give height *to* it.
 *
 * With `flex: 1 1 auto` the list contributes its full content height to the
 * card, the card to the column, and the column to the row — so 32 entries
 * stretched the profile text to nearly 7000px instead of the other way
 * round. A basis of 0 means the list asks for no height of its own and
 * simply absorbs what is left; min-height: 0 overrides the flex default of
 * `auto`, which would otherwise refuse to shrink below the content.
 */
.wp-block-propstreams-profile-ticker .propstreams-log {
	flex: 1 1 0;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	/* Room for the scrollbar so text doesn't sit under it. */
	padding-right: 0.5rem;
	margin-right: -0.5rem;
}

/*
 * Smaller type in the sidebar than on /stream/. A 200-character entry in a
 * ~255px column runs seven or eight lines at body size, so a single row
 * fills the card and the list stops reading as a list. This is the same
 * text at a density that suits the column it is in.
 */
.wp-block-propstreams-profile-ticker .propstreams-log__row {
	padding: 0.7rem 0;
}

.wp-block-propstreams-profile-ticker .propstreams-log__text {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.propstreams-log__more {
	font-size: var(--wp--preset--font-size--small);
	margin: 0.75rem 0 0;
}

/* Stacked on narrow screens there is no neighbouring column to match, so
   the card goes back to sizing itself and the list gets a sane cap. */
@media (max-width: 781px) {
	.wp-block-propstreams-profile-ticker {
		height: auto;
	}

	.wp-block-propstreams-profile-ticker .propstreams-log {
		max-height: 32rem;
	}
}

/*
 * A micro-update has no headline — the text *is* the entry. So it gets the
 * full-strength body colour rather than the muted tone used for supporting
 * copy, and the whole 150–250 characters are shown rather than an excerpt:
 * truncating would cut exactly the text this page exists to concentrate.
 */
.propstreams-update-body {
	color: var(--wp--preset--color--paper);
	line-height: 1.6;
	max-width: 62ch;
}

.propstreams-update-body--single {
	font-size: var(--wp--preset--font-size--medium);
}

/*
 * With the headline gone, the timestamp is what identifies an entry — and
 * it is now the *stream* time supplied by the ingest client, not the moment
 * WordPress received it. Tabular figures keep the column aligned.
 */
.propstreams-update-time {
	color: var(--wp--preset--color--accent-bull);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

.propstreams-update-body > :first-child {
	margin-top: 0;
}

.propstreams-update-body > :last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------- Broadcasts grid */

.propstreams-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.propstreams-video {
	overflow: hidden;
}

.propstreams-video a {
	display: block;
	color: inherit;
	text-decoration: none;
}

.propstreams-video img {
	display: block;
	width: 100%;
	height: auto;
}

.propstreams-video__title {
	padding: 1rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* ------------------------------------------------------- Summaries list */

.propstreams-summaries {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.75rem;
}

/*
 * A teaser turns each entry from a one-line link into a card, so the row
 * layout gives way to a stacked one. Headline and date share the top line,
 * the teaser sits underneath.
 */
.propstreams-summaries__item {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: 0.35rem 1rem;
	padding: 1.15rem 1.35rem;
}

.propstreams-summaries__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	color: var(--wp--preset--color--paper);
	text-decoration: none;
	line-height: 1.3;
}

/* Whole card clickable, but only the headline is the link — same reasoning
   as the channel tiles: the teaser must not end up in the link label. */
.propstreams-summaries__title::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.propstreams-summaries__item:hover .propstreams-summaries__title,
.propstreams-summaries__title:focus-visible {
	color: var(--wp--preset--color--accent-teal);
}

.propstreams-summaries__title:focus-visible {
	outline: none;
}

.propstreams-summaries__item:has(.propstreams-summaries__title:focus-visible) {
	outline: 2px solid var(--wp--preset--color--accent-teal);
	outline-offset: 3px;
}

.propstreams-summaries__date {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.propstreams-summaries__teaser {
	grid-column: 1 / -1;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--text-muted);
	max-width: 78ch;
}

/* --------------------------------------------------------- Live embed */

.propstreams-embed {
	position: relative;
	padding-top: 56.25%;
	border-radius: var(--wp--custom--card--radius, 20px);
	overflow: hidden;
	background: #000;
	border: 1px solid var(--wp--preset--color--line);
}

.propstreams-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* --------------------------------------------------------- Spotlight */

/*
 * auto-fit, not a fixed three columns: with two channels the row holds two
 * full-width cards rather than two thirds and a gap where a third channel
 * would be. The layout should not advertise content that does not exist.
 */
.propstreams-spotlight-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.propstreams-spotlight {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 1.5rem;
	position: relative;
}

/*
 * The whole tile is clickable, but only the name is a link.
 *
 * Wrapping the entire card in an <a> would work with a mouse and be worse
 * everywhere else: a screen reader would read logo, name and status as one
 * run-on link label. Instead the real link stays on the name and an empty
 * ::after covers the card as the hit area — one link in the accessibility
 * tree, named "Kanal A", with the whole tile responding to a click.
 */
.propstreams-spotlight__link {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	text-decoration: none;
	color: inherit;
}

.propstreams-spotlight__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--wp--custom--card--radius, 20px);
}

/* Anything genuinely interactive inside the card has to sit above the
   overlay, or the stretched link would swallow its clicks. */
.propstreams-spotlight > *:not(.propstreams-spotlight__link) a {
	position: relative;
	z-index: 1;
}

.propstreams-spotlight__name {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
	margin: 0;
}

.propstreams-spotlight:hover {
	cursor: pointer;
}

.propstreams-spotlight:hover .propstreams-spotlight__name,
.propstreams-spotlight__link:focus-visible .propstreams-spotlight__name {
	color: var(--wp--preset--color--accent-teal);
}

/* The focus ring has to describe the clickable area, which is the card —
   not the few pixels of the name the link markup actually occupies. */
.propstreams-spotlight__link:focus-visible {
	outline: none;
}

.propstreams-spotlight:has(.propstreams-spotlight__link:focus-visible) {
	outline: 2px solid var(--wp--preset--color--accent-teal);
	outline-offset: 3px;
}

/* ------------------------------------------------------- Disclosure */

.propstreams-disclosure {
	background: var(--wp--preset--color--surface-alt);
	border-left: 3px solid var(--wp--preset--color--accent-blue);
	border-radius: 12px;
	padding: 1rem 1.25rem;
	margin: 0 0 1.5rem;
	font-size: var(--wp--preset--font-size--small);
}

/* ------------------------------------------------------------------ Menus */

/* Rendered by blocks/menu from a menu managed under Appearance → Menus.
   Three or four short items wrap perfectly well on a phone, so this stays a
   plain wrapping row — no hamburger, no JavaScript, nothing to break. */
.propstreams-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.propstreams-menu a {
	color: inherit;
	text-decoration: none;
	display: inline-block;
}

.propstreams-menu a:hover,
.propstreams-menu .current-menu-item > a,
.propstreams-menu .current_page_item > a {
	color: var(--wp--preset--color--accent-teal);
}

.propstreams-menu--legal {
	gap: 0.5rem 1.5rem;
}

/* Submenus stay inline rather than becoming a hover dropdown: a dropdown
   needs JS or a hover trap that does not work on touch, and this navigation
   is one level deep in practice. */
.propstreams-menu .sub-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin: 0 0 0 1rem;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.8;
}

/* --------------------------------------------------- Channel profile */

.propstreams-channel-logo {
	flex: none;
	line-height: 0;
}

.propstreams-channel-logo__img,
.propstreams-channel-logo__fallback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	object-fit: cover;
	box-shadow: 0 0 0 2px var(--wp--preset--color--line-strong), 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* Branded stand-in for channels with no logo — keeps the header's shape
   and gives the page a point of colour. */
.propstreams-channel-logo__fallback {
	background: var(--wp--preset--gradient--brand-glow);
	color: #fff;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	line-height: 1;
}

/*
 * Six tiles so two channels side by side never look like the same one.
 *
 * The *order* matters as much as the colours. propstreams_logo_html()
 * derives the tile from the letter, so consecutive letters get consecutive
 * variants — A→6, B→1, C→2, D→3, E→4, F→5. The first attempt put two blues
 * in slots 6 and 1, which made "Kanal A" and "Kanal B" look identical at a
 * glance even though the values differed. The sequence below rotates the
 * hue hard at every step, so any two neighbouring designators land in
 * different colour families.
 *
 * All are saturated mid-tones from the brand palette, chosen so white text
 * stays legible on every one — the letter has to read at 56px in a card as
 * well as at 84px in a page header.
 */

/* B — amber */
.propstreams-channel-logo__fallback--1 {
	background: linear-gradient(135deg, #B45309 0%, #FBBF24 100%);
}

/* C — green */
.propstreams-channel-logo__fallback--2 {
	background: linear-gradient(135deg, #15803D 0%, #4ADE80 100%);
}

/* D — violet */
.propstreams-channel-logo__fallback--3 {
	background: linear-gradient(135deg, #7C3AED 0%, #C026D3 100%);
}

/* E — cyan */
.propstreams-channel-logo__fallback--4 {
	background: linear-gradient(135deg, #0891B2 0%, #22D3EE 100%);
}

/* F — rose */
.propstreams-channel-logo__fallback--5 {
	background: linear-gradient(135deg, #BE123C 0%, #FB7185 100%);
}

/* A — brand cobalt/teal */
.propstreams-channel-logo__fallback--6 {
	background: linear-gradient(135deg, #1D4ED8 0%, #14B8A6 100%);
}


.propstreams-channel-link {
	margin: 1.25rem 0 0;
}

/* Section headings inside the profile body get an accent rule, so the page
   reads as distinct sections rather than one dark column. */
.wp-block-propstreams-profile-summaries > h2,
.wp-block-propstreams-past-broadcasts > h2 {
	position: relative;
	padding-left: 0.85rem;
	margin-bottom: 1rem;
}

.wp-block-propstreams-profile-summaries > h2::before,
.wp-block-propstreams-past-broadcasts > h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	bottom: 0.15em;
	width: 4px;
	border-radius: 999px;
	background: var(--wp--preset--gradient--brand-glow);
}

/* ------------------------------------------------------- Prop firm CTA */

.propstreams-firm-cta {
	display: grid;
	gap: 0.6rem;
	justify-items: start;
}

.propstreams-firm-cta p {
	margin: 0;
}

/* The full CTA is a panel: it has to read as a distinct offer rather than
   as the next paragraph of the article it follows. */
.propstreams-firm-cta--panel {
	padding: 1.75rem;
	gap: 0.75rem;
}

.propstreams-firm-cta__name {
	margin: 0;
}

.propstreams-firm-cta__lede {
	color: var(--wp--preset--color--text-muted);
	max-width: 60ch;
	line-height: 1.55;
}

.propstreams-firm-cta__name a {
	color: inherit;
	text-decoration: none;
}

.propstreams-firm-cta__name a:hover {
	color: var(--wp--preset--color--accent-teal);
}

.propstreams-firm-cta__code code {
	background: var(--wp--preset--color--surface-alt);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	padding: 0.15rem 0.5rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.9em;
}

/* Off-screen but still in the accessibility tree where it is useful. */
.propstreams-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.propstreams-firm-cta__note {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

/* ------------------------------------------------- Header / footer bits */

.propstreams-logo {
	display: flex;
	align-items: center;
	gap: 9px;
	text-decoration: none;
}

.propstreams-logo__word {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--wp--preset--color--paper);
}

/* Brand gradient as text fill — used for the 404 numeral. */
.propstreams-gradient-text {
	background: var(--wp--preset--gradient--brand-glow);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* --------------------------------------------------------- Editor only */

.propstreams-block-placeholder {
	border: 1px dashed var(--wp--preset--color--line-strong, rgba(255, 255, 255, 0.3));
	border-radius: 12px;
	padding: 1rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-family: var(--wp--preset--font-family--body);
}

.propstreams-block-placeholder strong {
	font-family: var(--wp--preset--font-family--heading);
}

.propstreams-block-placeholder span {
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.7;
}

/* -------------------------------------------------------------- Tables */

/*
 * WordPress ships `is-style-stripes` with a hardcoded #f0f0f0 stripe. On a
 * dark palette that paints a near-white band behind near-white text, so
 * every other row of a comparison table disappears. The stripe has to be a
 * tint of the surface colour instead — this is not decoration, it is the
 * difference between a readable table and an unreadable one.
 */
.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table th,
.wp-block-table td {
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--wp--preset--color--line);
	text-align: left;
	vertical-align: top;
}

.wp-block-table thead th {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	color: var(--wp--preset--color--paper);
	background: var(--wp--preset--color--surface-alt);
}

/* First column labels the row, so it reads as a header, not as data. */
.wp-block-table tbody td:first-child {
	color: var(--wp--preset--color--text-muted);
}

/*
 * The doubled class is deliberate. WordPress prints core block styles
 * *inline in <head>*, which comes after this file's <link>, so at equal
 * specificity core wins on source order alone. Repeating the class raises
 * specificity by one class without resorting to !important, which would
 * then have to be out-shouted by anything overriding this later.
 *
 * Core's stripes style also sets the cell borders to transparent, so those
 * have to be restated here or the table loses its grid.
 */
.wp-block-table.is-style-stripes.is-style-stripes tbody tr:nth-child(odd) {
	background-color: rgba(255, 255, 255, 0.04);
}

.wp-block-table.is-style-stripes.is-style-stripes td,
.wp-block-table.is-style-stripes.is-style-stripes th {
	border-color: var(--wp--preset--color--line);
}

.wp-block-table.is-style-stripes.is-style-stripes {
	border-bottom: 0;
}

/* Numeric columns line up when the digits are tabular. */
.wp-block-table tbody td:not(:first-child) {
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------- Headings in content */

/*
 * Section headings carry a short gradient rule to the left. The heading
 * text itself keeps full-strength paper colour: on a near-black page,
 * colouring a whole heading costs more contrast than the colour is worth,
 * so the colour sits *beside* the words rather than in them.
 *
 * Scoped to post content so it never touches block headings that already
 * style themselves (the ticker, the summaries list, the CTA panel).
 */
.entry-content > h2,
.entry-content > .wp-block-heading:is(h2) {
	position: relative;
	padding-left: 1rem;
}

.entry-content > h2::before,
.entry-content > .wp-block-heading:is(h2)::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	bottom: 0.15em;
	width: 4px;
	border-radius: 2px;
	background: var(--wp--preset--gradient--brand-glow);
}

/*
 * The informative word inside a heading, picked out in teal.
 *
 * Deliberately the *soft* teal, not the brand teal: #14B8A6 on #0B0B12 is
 * about 3.6:1, which is fine for a badge but fails AA for text a reader has
 * to hold their eyes on. #5DCAA5 clears 7:1 at the same hue.
 *
 * Editors apply this by selecting the word and choosing "Teal hell (Text)"
 * from the inline colour picker — no custom format plugin needed.
 */
.entry-content .has-accent-teal-soft-color {
	color: var(--wp--preset--color--accent-teal-soft) !important;
}

/* ------------------------------------------------------------- Callout */

/*
 * For the "read this before you buy" kind of list — the content a reader
 * skimming toward the affiliate button most needs to not skim past. The
 * left border is the same brand rule as the headings, so it reads as part
 * of the same system rather than as a warning box.
 */
.propstreams-callout {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-left: 4px solid transparent;
	border-image: linear-gradient(180deg, var(--wp--preset--color--accent-blue), var(--wp--preset--color--accent-teal)) 1;
	padding: 1.4rem 1.6rem;
	margin: 1.5rem 0;
}

.propstreams-callout > :first-child { margin-top: 0; }
.propstreams-callout > :last-child { margin-bottom: 0; }

.propstreams-callout li {
	margin-bottom: 0.7rem;
	line-height: 1.6;
}

.propstreams-callout li:last-child { margin-bottom: 0; }

.propstreams-callout li strong {
	color: var(--wp--preset--color--paper);
}

/* --------------------------------------------------------- Page scaffolding */

/*
 * The root flow layout puts --wp--style--block-gap (1.5rem) between the
 * header, main and footer, which shows up as a dark strip between the nav
 * and any full-bleed band at the top of a page — the hero glow looked
 * detached from the header because of it.
 *
 * Every template's <main> sets its own top padding, so this gap was never
 * doing work; removing it is what makes a full-bleed hero sit flush under
 * the navigation.
 */
.wp-site-blocks > main {
	margin-block-start: 0;
}

/* ------------------------------------------------- Clickable list items */

/*
 * In every post listing — the summaries hub, the blog index, search results,
 * the profile and prop-firm archives — the whole item is clickable, not just
 * the headline. Same technique as the channel tiles and the summary cards:
 * the real link stays on the title and an empty ::after covers the item, so
 * the accessibility tree keeps one link named after the headline instead of
 * one link labelled with the date, the badges and the excerpt.
 *
 * Keyed on the title link, so listings whose items have no permalink are
 * untouched — /stream/ is exactly that case: micro-updates deliberately
 * have no page of their own, and nothing there should look clickable.
 */
.wp-block-post-template > .wp-block-post:has(.wp-block-post-title a) {
	position: relative;
}

.wp-block-post-template .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/*
 * The attribution badge links to the channel and has to stay reachable —
 * without this the overlay would swallow it and every badge would lead to
 * the article instead of the channel.
 */
.wp-block-post-template .wp-block-post a:not(.wp-block-post-title a) {
	position: relative;
	z-index: 1;
}

.wp-block-post-template > .wp-block-post:has(.wp-block-post-title a):hover {
	cursor: pointer;
}

.wp-block-post-template > .wp-block-post:hover .wp-block-post-title a {
	color: var(--wp--preset--color--accent-teal);
}

.wp-block-post-template .wp-block-post-title a:focus-visible {
	outline: none;
}

.wp-block-post-template > .wp-block-post:has(.wp-block-post-title a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--accent-teal);
	outline-offset: 4px;
}

/* ------------------------------------------- Kanal-Verweis unter Beiträgen */

/*
 * Closes a summary by pointing back at its channel. Laid out like the
 * spotlight tiles so the two read as the same kind of object, and clickable
 * across its whole area with the same stretched-link technique — only the
 * channel name is the actual link, so the label stays "Kanal A" rather than
 * swallowing the counts.
 */
.propstreams-summary-channel {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.35rem 1.5rem;
	margin-top: 2rem;
}

.propstreams-summary-channel__text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.propstreams-summary-channel__label {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.propstreams-summary-channel__name {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
	color: var(--wp--preset--color--paper);
	text-decoration: none;
}

.propstreams-summary-channel__name::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--wp--custom--card--radius, 20px);
}

.propstreams-summary-channel:hover .propstreams-summary-channel__name {
	color: var(--wp--preset--color--accent-teal);
}

.propstreams-summary-channel__meta {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
	font-variant-numeric: tabular-nums;
}

.propstreams-summary-channel__name:focus-visible {
	outline: none;
}

.propstreams-summary-channel:has(.propstreams-summary-channel__name:focus-visible) {
	outline: 2px solid var(--wp--preset--color--accent-teal);
	outline-offset: 3px;
}

/* ------------------------------------------------------------ Scrollbars */

/*
 * The browser default is built for a light page: on macOS it is an overlay
 * that only appears while scrolling, on Windows a wide light-grey trough
 * that cuts a bright stripe through a dark card.
 *
 * Applied to every scroll container the theme creates itself, so the ticker
 * and the wide tables on prop-firm pages behave the same.
 *
 * Both syntaxes are needed and are kept in sync deliberately: the standard
 * `scrollbar-color` covers Firefox and Chrome 121+, the ::-webkit- rules
 * cover older WebKit. Where both apply, the standard one wins — the values
 * match, so it makes no visible difference which does.
 */
.wp-block-propstreams-profile-ticker .propstreams-log,
.wp-block-table {
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--line-strong) transparent;
}

.wp-block-propstreams-profile-ticker .propstreams-log::-webkit-scrollbar,
.wp-block-table::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.wp-block-propstreams-profile-ticker .propstreams-log::-webkit-scrollbar-track,
.wp-block-table::-webkit-scrollbar-track {
	background: transparent;
}

.wp-block-propstreams-profile-ticker .propstreams-log::-webkit-scrollbar-thumb,
.wp-block-table::-webkit-scrollbar-thumb {
	background: var(--wp--preset--color--line-strong);
	border-radius: 999px;
}

.wp-block-propstreams-profile-ticker .propstreams-log:hover::-webkit-scrollbar-thumb,
.wp-block-table:hover::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--wp--preset--color--paper) 32%, transparent);
}

/* Logo-Kachel mit manuell gewählter Farbe. Der Verlauf wird aus dem einen
   gewählten Ton gebildet, damit eine Einzelfarbe genügt und die Kachel
   trotzdem dieselbe Anmutung behält wie die sechs Voreinstellungen. */
.propstreams-channel-logo__fallback--custom {
	background: linear-gradient(135deg, color-mix(in srgb, var(--propstreams-channel) 55%, #0b0b12) 0%, var(--propstreams-channel) 100%);
}

/* ------------------------------------------------ Filter für /stream/ */

.propstreams-filter {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--card--radius, 20px);
	padding: 1.25rem 1.4rem;
	margin-bottom: var(--wp--preset--spacing--30);
}

/* Wraps rather than scrolls: on a phone the four controls stack, on a wide
   screen they sit on one line. */
.propstreams-filter__form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.9rem 1.1rem;
	margin: 0;
}

.propstreams-filter__field {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin: 0;
}

.propstreams-filter__field label {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

/* Date and time inputs are notoriously light-on-white by default; the dark
   colour-scheme hint is what makes the browser's own calendar and clock
   pickers render dark too. */
.propstreams-filter input,
.propstreams-filter select {
	color-scheme: dark;
	background: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: 10px;
	padding: 0.45rem 0.6rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
}

.propstreams-filter input:focus-visible,
.propstreams-filter select:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-teal);
	outline-offset: 2px;
}

.propstreams-filter__actions {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin: 0;
}

.propstreams-filter__reset {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.propstreams-filter__result {
	margin: 0.9rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.propstreams-filter__status {
	margin: 0.75rem 0 0;
	min-height: 1.2em;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--accent-teal);
}

/* ------------------------------------------------ Instagram-Bilder je Tag */

/*
 * Ein Tag bringt bis zu vier Stories (9:16) und drei Beitraege (4:5). In
 * einem gemeinsamen Raster wurden die Reihen unterschiedlich hoch, deshalb
 * stehen die Stories oben nebeneinander und darunter je Beitrag eine Zeile:
 * Bild links, Caption rechts.
 */

.propstreams-insta {
	display: grid;
	gap: 1.25rem;
}

/* Uebersicht: alle Bilder eines Tages in einer Zeile, gleich hoch. */
.propstreams-insta--reihe {
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	padding-bottom: 0.25rem;
	text-decoration: none;
}

.propstreams-insta__vorschau img {
	height: 190px;
	width: auto;
	display: block;
	border-radius: 10px;
	border: 1px solid var(--wp--preset--color--line, rgba(255, 255, 255, 0.1));
}

.propstreams-insta--reihe:hover .propstreams-insta__vorschau img {
	border-color: var(--wp--preset--color--accent-teal, #14b8a6);
}

/*
 * Reel. Der Abspieler ist 9:16 wie eine Story, steht aber einzeln und
 * schmaler als die Story-Reihe: Vier Reels nebeneinander waeren vier
 * Abspieler, von denen keiner gross genug zum Ansehen ist.
 */
.propstreams-insta__reels {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	/*
	 * Untergrenze, sonst schrumpft die Spalte auf schmalen Schirmen mit:
	 * minmax(0, 260px) laesst sie bis auf nichts zusammenfallen, und das
	 * Reel steht dann als briefmarkengrosser Abspieler da. min(100%, 220px)
	 * haelt 220 Pixel frei und gibt sie nur auf, wenn der Platz selbst
	 * schmaler ist.
	 */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 260px));
	gap: 1rem;
}

.propstreams-insta__video {
	display: block;
	width: 100%;
	aspect-ratio: 9 / 16;
	border-radius: 12px;
	border: 1px solid var(--wp--preset--color--line, rgba(255, 255, 255, 0.1));
	background: #000;
}

/*
 * Abspiel-Dreieck auf dem Standbild in der Uebersicht. Dort ist die ganze
 * Zeile ein Link auf die Tagesseite, ein Abspieler waere ein Knopf im Knopf —
 * das Dreieck sagt, dass dahinter ein Video liegt.
 */
.propstreams-insta__vorschau--reel {
	position: relative;
	display: inline-block;
}

.propstreams-insta__vorschau--reel::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 38px;
	height: 38px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: rgba(11, 11, 18, 0.72);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.propstreams-insta__vorschau--reel::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	/* Ueber dem Kreis: ::after steht spaeter im Baum und deckte es sonst zu. */
	z-index: 1;
	width: 0;
	height: 0;
	/* Nicht genau mittig, sondern etwas nach rechts: Ein Dreieck wirkt sonst
	   nach links verrutscht, weil seine Masse rechts der Mittelachse fehlt. */
	transform: translate(-40%, -50%);
	border-style: solid;
	border-width: 7px 0 7px 12px;
	border-color: transparent transparent transparent #fff;
}

.propstreams-insta__ueberschrift {
	margin: 0;
	font-size: 1.1rem;
}

.propstreams-insta__stories {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.6rem;
}

.propstreams-insta__post {
	display: grid;
	grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
	gap: 1rem;
	align-items: start;
}

.propstreams-insta--gross .propstreams-insta__caption {
	font-size: 0.9rem;
	color: inherit;
}

.propstreams-insta--gross .propstreams-insta__post {
	grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
	gap: 1.5rem;
}

.propstreams-insta__item {
	margin: 0;
	position: relative;
}

.propstreams-insta__link {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 12px;
	border: 1px solid var(--wp--preset--color--line, rgba(255, 255, 255, 0.1));
}

.propstreams-insta__stories .propstreams-insta__link {
	aspect-ratio: 9 / 16;
}

.propstreams-insta__link img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*
 * Beitrag, Story oder "noch nicht gepostet". Die Pille sass zuerst auf dem
 * Bild und verdeckte dort die Schlagzeile der Kachel, deshalb steht sie
 * jetzt darunter.
 */
.propstreams-insta__art {
	display: inline-block;
	margin-top: 0.4rem;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	font-size: 0.7rem;
	background: var(--wp--preset--color--surface-alt, rgba(255, 255, 255, 0.08));
	color: var(--wp--preset--color--text-muted, #a3a3b0);
	border: 1px solid var(--wp--preset--color--line, rgba(255, 255, 255, 0.1));
}

.propstreams-insta__titel {
	margin: 0 0 0.4rem;
	font-weight: 600;
	line-height: 1.3;
}

/* In der Uebersicht ist die Caption Beiwerk, auf der Tagesseite der Text. */
.propstreams-insta__text {
	display: grid;
	align-content: start;
}

.propstreams-insta__caption {
	font-size: 0.8rem;
	color: var(--wp--preset--color--text-muted, #a3a3b0);
	line-height: 1.5;
	white-space: pre-line;
}

.propstreams-insta__caption p {
	margin: 0 0 0.5rem;
}

/*
 * Bild herunterladen, Caption kopieren: Werkzeuge fuers Hochladen zu
 * Instagram. Sie stehen ueber dem Bild bzw. der Caption, die sie holen.
 */
.propstreams-insta__leiste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0.5rem;
}

.propstreams-insta__knopf {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	font: inherit;
	font-size: 0.75rem;
	line-height: 1.4;
	cursor: pointer;
	text-decoration: none;
	background: transparent;
	color: var(--wp--preset--color--accent-teal-soft, #5dcaa5);
	border: 1px solid var(--wp--preset--color--accent-teal, #14b8a6);
}

.propstreams-insta__knopf:hover,
.propstreams-insta__knopf:focus-visible {
	background: var(--wp--preset--color--accent-teal, #14b8a6);
	color: var(--wp--preset--color--ink, #0b0b12);
}

/* Auf dem Handy steht die Caption unter dem Bild statt daneben. */
@media (max-width: 600px) {

	.propstreams-insta__post {
		grid-template-columns: 1fr;
	}

	.propstreams-insta__stories {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ------------------------------------------- Neueste Kacheln (Startseite) */

.propstreams-insta-neu__kopf {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 1rem;
}

.propstreams-insta-neu__kopf h2 {
	margin: 0;
}

.propstreams-insta-neu__folgen {
	font-size: 0.9rem;
}

.propstreams-insta-neu__liste {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}

.propstreams-insta-neu__item {
	display: grid;
	gap: 0.4rem;
	align-content: start;
}

.propstreams-insta-neu__titel {
	margin: 0;
	font-weight: 600;
	line-height: 1.35;
}

/*
 * Die Caption bleibt im HTML und nur optisch zusammengefaltet: Sie ist der
 * Text, den Suchmaschinen hier lesen sollen.
 */
.propstreams-insta-neu__caption {
	font-size: 0.85rem;
	color: var(--wp--preset--color--text-muted, #a3a3b0);
}

.propstreams-insta-neu__caption summary {
	cursor: pointer;
}

.propstreams-insta-neu__caption p {
	margin: 0.5rem 0 0;
}

.propstreams-insta-neu__tag {
	font-size: 0.8rem;
}

@media (max-width: 900px) {

	.propstreams-insta-neu__liste {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}