/* ==========================================================================
   Trainers Corner - "sealed dossier" theme
   Deep navy, hairline gold, serif headings, a padlock watermark tiled
   quietly behind everything. Namespaced under .tc-review / .tc-gate-wrap
   so nothing here leaks into (or gets overridden by) the active theme.
   ========================================================================== */

.tc-review, .tc-gate-wrap {
	/* Deeper, cooler black than the first pass - a near-black with a hint
	   of blue rather than the warmer dark-navy this started as, so the
	   section reads more like a sealed/secure vault than "just a dark
	   page." Re-validated the trend and matrix palettes against this
	   surface (#05060a) before switching - both still pass clean. */
	--tc-bg: #05060a;
	--tc-panel: #0a0d15;
	--tc-panel-2: #0e1220;
	--tc-gold: #c9a961;
	--tc-gold-bright: #e3c580;
	--tc-text: #e9e6dd;
	--tc-muted: #a19c8d;
	--tc-border: rgba(201, 169, 97, 0.22);
	/* Trend + matrix colors: chosen and run through the dataviz skill's
	   validate_palette.js (categorical, dark mode) this session - the
	   original set above failed the lightness/chroma/CVD checks (up vs
	   mixed were only 4.8 apart under protan simulation). This set is the
	   aqua/orange/blue/muted-gray slots from the skill's documented dark
	   categorical ramp, all-pairs validated - re-checked again against the
	   darker #05060a surface above when the background changed, still
	   clean. */
	--tc-up: #199e70;
	--tc-mixed: #d95926;
	--tc-flat: #3987e5;
	--tc-thin: #898781;
	/* Post-position matrix: one blue hue, sequential/ordinal, validated
	   with --ordinal against the dark surface. Weak (poor) sits near the
	   surface; strong (excellent) is the brightest step. */
	--tc-mx-poor: #184f95;
	--tc-mx-below: #256abf;
	--tc-mx-fair: #3987e5;
	--tc-mx-good: #86b6ef;
	--tc-mx-excellent: #cde2fb;

	position: relative;
	/* A faint cool glow easing down from the top, over the near-black base -
	   reads as depth/a vault interior rather than a flat fill. Subtle on
	   purpose; it should register as atmosphere, not a visible gradient. */
	background:
		radial-gradient(130% 90% at 50% -12%, rgba(70, 95, 140, 0.16), transparent 62%),
		var(--tc-bg);
	color: var(--tc-text);
	font-family: 'Cormorant Garamond', Georgia, 'Iowan Old Style', 'Times New Roman', serif;
	/* Bumped from 17px - everything sized in em (h2/h3/table text) scales
	   with this automatically; the handful of fixed-px components below
	   (tags, sparkline caption, matrix, gate) are bumped to match by hand. */
	font-size: 18.5px;
	line-height: 1.6;
	/* Was 900px, capped well inside the page's content column - leaving a
	   band of the theme's white page background showing on both sides of
	   the black box, undercutting the "sealed vault" feel more than the
	   background shade itself did. Widened so it fills the column instead;
	   still capped (not unbounded 100%) so a line of body text doesn't get
	   uncomfortably long if this ever runs in a wider template elsewhere
	   on the site. */
	max-width: 1100px;
	margin: 0 auto;
	padding: 44px 36px 56px;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 1px 0 rgba(201, 169, 97, 0.14) inset, 0 30px 70px -30px rgba(0, 0, 0, 0.85);
}

/* Tiled padlock watermark, very quiet, behind all content */
.tc-lockwatermark {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.9;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='%23c9a961' stroke-width='1.4' opacity='0.05'%3E%3Crect x='58' y='63' width='34' height='25' rx='5'/%3E%3Cpath d='M64 63v-7a11 11 0 0 1 22 0v7' stroke-linecap='round'/%3E%3Ccircle cx='75' cy='74' r='2.2' fill='%23c9a961' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 150px 150px;
	z-index: 0;
}

.tc-review-inner { position: relative; z-index: 1; }

.tc-review .tc-eyebrow, .tc-gate .tc-eyebrow {
	position: relative;
	z-index: 1;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-style: italic;
	font-size: 16px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tc-gold);
	margin: 0 0 6px;
}

.tc-review h1 {
	position: relative;
	z-index: 1;
	font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
	font-weight: 700;
	font-size: 2.4em;
	letter-spacing: 0.01em;
	color: var(--tc-gold-bright);
	margin: 0 0 6px;
	text-shadow: 0 1px 14px rgba(201, 169, 97, 0.18);
}

.tc-review .tc-sub {
	position: relative;
	z-index: 1;
	color: var(--tc-muted) !important;
	font-size: 17.5px;
	margin: 0 0 30px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--tc-border);
}

.tc-review .tc-card {
	position: relative;
	z-index: 1;
	background: linear-gradient(180deg, var(--tc-panel) 0%, var(--tc-panel-2) 100%);
	border: 1px solid var(--tc-border);
	border-top: 1px solid rgba(201, 169, 97, 0.4);
	border-radius: 10px;
	padding: 24px 26px;
	margin-bottom: 20px;
	box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.6);
}

.tc-review h2 {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 600;
	font-size: 1.15em !important;
	color: var(--tc-gold-bright);
	margin: 0 0 12px;
	letter-spacing: 0.01em;
}

.tc-review h3 {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 600;
	color: var(--tc-text);
	font-size: 1.02em !important;
	margin: 18px 0 6px;
}

.tc-review p { color: var(--tc-text) !important; margin: 0 0 10px; }
/* These are the small intro/caption paragraphs under each card heading
   (Roster at a glance's explainer, the matrix's explainer, the trainer
   rollup note) - originally italic + heavily muted, which reads fine as a
   short caption but was reported genuinely hard to read at paragraph
   length. Dropped the italic (paragraph-length italics are a legibility
   tax, not just a style choice) and lightened the color plus bumped the
   size well past the general font bump below. */
.tc-review p[style*="12.5px"], .tc-review p[style*="margin-top:-6px"] {
	color: #c3c2b7 !important;
	font-style: normal;
	font-size: 17px !important;
}

.tc-review strong { color: var(--tc-gold-bright); font-weight: 600; }
.tc-review code {
	background: rgba(201, 169, 97, 0.12);
	color: var(--tc-gold-bright);
	border: 1px solid var(--tc-border);
	padding: 2px 7px;
	border-radius: 4px;
	font-family: Consolas, Menlo, monospace;
	font-size: 0.9em;
}

/* table-layout:fixed + the :has()-scoped column widths below fix "the
   tables between the trainers have different width columns" - each
   trainer's roster is its own separate <table> (one per trainer), so
   the default auto layout was computing column widths per-table from
   that table's own content/inline styles (only some rows carried
   style="width:170px"), letting them drift apart. Fixed layout plus
   explicit widths keyed off the tag pill / spark-cell class - which
   every roster row has, not just some - keeps all three tables' columns
   in lockstep regardless of what any single row's markup happens to say. */
.tc-review table { width: 100%; border-collapse: collapse; font-size: 1em; margin-top: 8px; }
/* Scoped to roster tables only (identified by having a tag-pill cell) -
   applying table-layout:fixed to every table under .tc-review also caught
   the post-position matrix, which doesn't have the cross-trainer-tables
   problem this is fixing and instead has its own fixed-width numeric cells
   plus a horse-name column that needs to grow to fit whatever name is
   longest - fixed layout pinned that column to the first row's width and
   made longer names spill into the first data cell. */
.tc-review table:has(.tc-tag) { table-layout: fixed; }
.tc-review th, .tc-review td {
	text-align: left;
	padding: 10px 10px;
	border-bottom: 1px solid var(--tc-border);
	vertical-align: top;
	color: var(--tc-text) !important;
	overflow-wrap: break-word;
}
.tc-review th {
	color: var(--tc-gold) !important;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 0.92em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
	font-style: normal;
}
/* !important on both: some roster rows still carry a legacy inline
   style="width:170px"/"width:140px" (Betty's own markup, or older reviews),
   and an inline style otherwise beats any stylesheet selector regardless of
   specificity. Under table-layout:fixed only the FIRST row really sets a
   column's width, so if one trainer's first row happened to carry the old
   inline value and another's didn't, the tables would drift apart again -
   exactly the bug this section fixes. !important makes this authoritative
   for every row in every table, independent of what any row's markup says. */
.tc-review td:has(.tc-tag) { width: 215px !important; }
.tc-review td.tc-spark-cell { width: 140px !important; }
/* Excludes matrix/sparkline cells - the general row-hover tint (specificity
   (0,2,2)) was otherwise beating the more specific .tc-mx-poor/-below/-fair/
   -good/-excellent background rules below (specificity (0,2,0), important
   or not doesn't matter here since this rule has no !important - but it
   still wins on specificity for the cells it's allowed to touch), which
   read to a groom as "the colored boxes disappear when you hover the row." */
.tc-review tr:hover td:not(.tc-mx-cell):not(.tc-mx-empty):not(.tc-spark-cell) { background: rgba(201, 169, 97, 0.04); }

.tc-review ul { padding-left: 20px; }
.tc-review li { margin-bottom: 10px; color: var(--tc-text); }

.tc-review a { color: var(--tc-gold-bright); }

/* Trend tags - pill badges, tinted for dark backgrounds instead of the
   pale fills that worked on a light page. Sans-serif rather than the
   page's decorative serif, since a tiny uppercase serif label is exactly
   where "eloquent" stops being legible - this is a UI label, not prose. */
.tc-review .tc-tag {
	display: inline-block;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 6px 15px;
	border-radius: 20px;
	margin: 0 8px 6px 0;
	/* NOT nowrap: Betty's tag label is free text (e.g. "Too early / dormant",
	   "Inconsistent, health-related"), not a fixed one-word enum, so a hard
	   nowrap plus the tag column's now-fixed width (table-layout:fixed,
	   added above to fix the cross-trainer column-width bug) meant a long
	   label simply overflowed its cell and rendered on top of the horse's
	   name in the next column. Wrapping at word boundaries keeps a long
	   label inside its own cell instead. */
	white-space: normal;
	word-break: normal;
	max-width: 100%;
	border: 1.5px solid currentColor;
	background: rgba(0, 0, 0, 0.22);
}
.tc-review .tc-tag-up    { color: var(--tc-up); }
.tc-review .tc-tag-flat  { color: var(--tc-flat); }
.tc-review .tc-tag-mixed { color: var(--tc-mixed); }
.tc-review .tc-tag-thin  { color: var(--tc-thin); }

/* Tag-cell width is now handled structurally above (td:has(.tc-tag)), which
   covers every roster row instead of only the ones Betty happened to write
   with an inline style="width:170px" - that inconsistency was part of what
   let the three per-trainer tables' columns drift out of alignment. */

/* Speed sparklines - a thin inline-SVG line per horse (final time across its
   starts, faster plots higher), colored via currentColor from the same
   up/mixed/flat/thin variables the trend pills use, so a line and its pill
   are always the same color without a second color decision anywhere. */
.tc-review .tc-spark-up    { color: var(--tc-up); }
.tc-review .tc-spark-mixed { color: var(--tc-mixed); }
.tc-review .tc-spark-flat  { color: var(--tc-flat); }
.tc-review .tc-spark-thin  { color: var(--tc-thin); }
.tc-review .tc-spark-none  { color: var(--tc-muted); font-size: 12.5px; font-style: normal; }
.tc-review td.tc-spark-cell { text-align: center; }
/* The two actual times under each chart - deliberately neutral/muted, not
   colored by trend, since this is a factual readout (what the line plots)
   rather than a second verdict that could read as disagreeing with the
   trend pill (e.g. a horse tagged Improving on wins/dominance rather than
   raw time can have a flat or even slightly slower first-to-last time). */
.tc-review .tc-spark-caption { display: block; font-size: 14px; color: var(--tc-text); margin-top: 3px; font-style: normal; }

/* Post-position matrix - a horse x post table, cell fill on the sequential
   blue ramp above. Sizes bumped a notch from the first pass - both the
   horse names and the per-cell numbers were reported hard to read. */
.tc-review .tc-mx-wrap {
	overflow-x: auto;
	margin-top: 10px;
	position: relative;
	z-index: 1;
}
.tc-review .tc-mx-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 3px;
	font-size: 14px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
}
.tc-review .tc-mx-table th {
	color: var(--tc-gold);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 3px 4px;
	text-align: left;
	font-weight: 600;
	font-style: normal;
}
.tc-review .tc-mx-horse {
	/* Bumped back up (was tightened to 14px/6px-right-padding last round,
	   which made the numbers-vs-names balance feel off the other way -
	   this keeps the tight padding but gives the name itself more room to
	   breathe in the cell). */
	white-space: nowrap;
	padding: 4px 6px 4px 0;
	font-weight: 600;
	color: var(--tc-text) !important;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 16px;
}
.tc-review .tc-mx-cell {
	width: 50px;
	height: 38px;
	text-align: center;
	border-radius: 5px;
	vertical-align: middle;
	line-height: 1.2;
	cursor: default;
}
.tc-review .tc-mx-avg { display: block; font-weight: 700; font-size: 16px; }
.tc-review .tc-mx-n   { display: block; font-size: 12px; opacity: 0.9; }
.tc-review .tc-mx-empty {
	width: 50px;
	height: 38px;
	text-align: center;
	color: var(--tc-muted) !important;
	background: rgba(255, 255, 255, 0.03) !important;
	border-radius: 5px;
}
/* !important needed on color AND background here: the general
   ".tc-review td" rule sets color !important, and the row-hover tint rule
   above is scoped off these cells with :not() now - but keeping !important
   on the backgrounds too is cheap insurance against the same "cells go
   see-through on hover" bug resurfacing if either rule's selector ever
   changes without the other being updated to match. */
.tc-review .tc-mx-poor      { background: var(--tc-mx-poor) !important;      color: #eef4ff !important; }
.tc-review .tc-mx-below     { background: var(--tc-mx-below) !important;     color: #eef4ff !important; }
.tc-review .tc-mx-fair      { background: var(--tc-mx-fair) !important;      color: #eef4ff !important; }
.tc-review .tc-mx-good      { background: var(--tc-mx-good) !important;      color: #0b1220 !important; }
.tc-review .tc-mx-excellent { background: var(--tc-mx-excellent) !important; color: #0b1220 !important; }
.tc-review .tc-mx-lown { box-shadow: inset 0 0 0 1.5px rgba(233, 230, 221, 0.45); }
.tc-review .tc-mx-legend { font-size: 13px; color: var(--tc-muted); margin-top: 10px; font-style: normal; }

@media (max-width: 640px) {
	.tc-review .tc-spark-cell { display: none; }
}

/* ==========================================================================
   The gate - a sealed dossier the visitor has to unlock
   ========================================================================== */

.tc-gate-wrap {
	position: relative;
	background: var(--tc-bg);
	padding: 64px 24px;
	border-radius: 6px;
	overflow: hidden;
}

.tc-gate {
	position: relative;
	z-index: 1;
	max-width: 420px;
	margin: 0 auto;
	text-align: center;
	background: linear-gradient(180deg, var(--tc-panel) 0%, var(--tc-panel-2) 100%);
	border: 1px solid var(--tc-border);
	border-top: 1px solid rgba(201, 169, 97, 0.45);
	border-radius: 12px;
	padding: 40px 34px 36px;
	box-shadow: 0 20px 50px -18px rgba(0, 0, 0, 0.7);
	font-family: 'Cormorant Garamond', Georgia, serif;
}

.tc-gate-icon {
	color: var(--tc-gold);
	margin: 0 auto 14px;
	display: flex;
	justify-content: center;
	filter: drop-shadow(0 0 10px rgba(201, 169, 97, 0.35));
}

.tc-gate h2 {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	font-size: 1.7em;
	color: var(--tc-gold-bright);
	margin: 0 0 12px;
}

.tc-gate-copy {
	color: var(--tc-muted);
	font-size: 17px;
	margin: 0 0 22px;
	line-height: 1.5;
}

.tc-gate-error {
	color: #d98a7a;
	font-size: 15px;
	font-style: normal;
	margin: -8px 0 16px;
}

.tc-gate-form { display: flex; flex-direction: column; gap: 12px; }

.tc-gate-input {
	background: rgba(0, 0, 0, 0.35);
	border: 1px solid var(--tc-border);
	color: var(--tc-text);
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 17px;
	letter-spacing: 0.04em;
	padding: 12px 14px;
	border-radius: 7px;
	text-align: center;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tc-gate-input:focus {
	border-color: var(--tc-gold);
	box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.18);
}
.tc-gate-input::placeholder { color: var(--tc-muted); }

.tc-gate-btn {
	background: linear-gradient(180deg, var(--tc-gold-bright), var(--tc-gold));
	color: #16130a;
	border: none;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-weight: 600;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 12px 18px;
	border-radius: 7px;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.15s ease;
}
.tc-gate-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.tc-gate-btn:active { transform: translateY(0); }

@media (max-width: 600px) {
	.tc-review { padding: 32px 18px 40px; }
	.tc-review h1 { font-size: 1.9em; }
	.tc-gate { padding: 32px 22px 28px; }
}

/* ==========================================================================
   wp-admin screen (kept plain/functional - this part isn't visitor-facing)
   ========================================================================== */
.tc-admin-wrap textarea { width: 100%; font-family: Consolas, Menlo, monospace; font-size: 12px; }
.tc-admin-meta { color: #666; font-size: 12px; margin: 6px 0 16px; }
.tc-api-key { background: #f0f0f1; padding: 8px 10px; border-radius: 4px; font-family: Consolas, Menlo, monospace; font-size: 13px; display: inline-block; user-select: all; }