/* ==========================================================================
   Tickera 2026 — GlotPress override styles.
   Loaded on /translations/* via inc/glotpress-styles.php
   Relies on the theme's CSS vars from theme-extras.css (--brand, --ink, etc.)
   ========================================================================== */

/* Body: site header + footer come from our block-theme template parts.
   theme-extras.css sets `body { background: var(--ink) !important }` so any
   leftover gap between dark home sections doesn't show cream. We override
   for GP pages because their layout is light end-to-end.
   FONT: gp-base/style.min.css forces `body { font-family: -apple-system... }`
   on every GlotPress page. We override here so the brand font (Hanken Grotesk)
   inherits to every element on /translations/, matching the rest of the site. */
body.gp-page {
	background: #fff !important;
	font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
	color: var(--ink, #1A1428);
}

/* The .wp-site-blocks wrapper holds site header + main + footer.
   Don't let any inherited padding show ink body bg through. */
body.gp-page .wp-site-blocks {
	background: transparent;
	padding: 0;
	margin: 0;
}

/* ----- Defensive site-header / site-footer reset -----
   gp-base/style.min.css applies aggressive global `a { ... }` rules
   (color, padding, border, background, font-size) that bleed into the WP
   site header and footer. We target the offending properties with high
   specificity to win the cascade WITHOUT touching `display`, `flex` or
   other layout properties (which would break .tk-brand's inline-flex
   layout and the Get Tickera button's pill styling). */
body.gp-page .site-header a,
body.gp-page .site-header a:visited,
body.gp-page .site-footer a,
body.gp-page .site-footer a:visited {
	color: inherit;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-decoration: none;
	outline: 0;
}
/* Site-header inherits text color from its own background-aware class
   (.has-white-background-color → text uses theme.json default). Explicitly
   anchor the H1 brand wordmark color so :visited doesn't drift purple. */
body.gp-page .site-header .tk-brand,
body.gp-page .site-header .tk-brand:visited,
body.gp-page .site-header .tk-brand-word {
	color: var(--ink, #1A1428);
}
body.gp-page .site-header .primary-nav a,
body.gp-page .site-header .primary-nav a:visited {
	color: var(--ink, #1A1428);
}
body.gp-page .site-header .primary-nav a:hover {
	color: var(--brand, #6b5f89);
}
/* "Sign In" link (was rendering purple from gp-base :visited rule) */
body.gp-page .site-header .header-signin a,
body.gp-page .site-header .header-signin a:visited {
	color: var(--ink, #1A1428);
}
body.gp-page .site-header .header-signin a:hover {
	color: var(--brand, #6b5f89);
}
/* "Get Tickera" pill button — re-apply pill styling killed by reset above.
   The button is a Gutenberg `wp-block-button__link` anchor — not wrapped in
   any `.header-cta` div. Target the block class directly. */
body.gp-page .site-header .wp-block-button__link,
body.gp-page .site-header .wp-block-button__link:visited,
body.gp-page .site-header a.wp-block-button__link,
body.gp-page .site-header a.wp-element-button {
	background-color: var(--brand, #6b5f89) !important;
	color: #fff !important;
	padding: 12px 24px !important;
	border-radius: 999px !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	line-height: 1 !important;
	display: inline-block !important;
	transition: background 0.15s ease, transform 0.15s ease;
}
body.gp-page .site-header .wp-block-button__link:hover,
body.gp-page .site-header a.wp-element-button:hover {
	background-color: var(--brand-deep, #4A4262) !important;
	color: #fff !important;
	transform: translateY(-1px);
}

/* Footer links: keep them light on the dark ink background. */
body.gp-page .site-footer a,
body.gp-page .site-footer a:visited {
	color: rgba(255, 255, 255, 0.85);
}
body.gp-page .site-footer a:hover {
	color: #fff;
}
/* Footer Subscribe button needs its yellow brand styling re-applied
   because the reset above strips background + padding. */
body.gp-page .site-footer .wp-block-button__link,
body.gp-page .site-footer button[type="submit"],
body.gp-page .site-footer input[type="submit"] {
	background-color: var(--accent, #FFDF3B);
	color: var(--ink, #1A1428);
	border: 0;
	border-radius: 999px;
	padding: 10px 22px;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
}
body.gp-page .site-footer .wp-block-button__link:hover,
body.gp-page .site-footer button[type="submit"]:hover {
	background-color: var(--accent-deep, #FFC000);
}

/* ----- FSE layout context fix -----
   The site header and footer use block-theme `is-layout-constrained`
   containers. On normal Tickera pages WordPress auto-generates inline CSS
   for the inner `.wp-container-*` flex groups that sets max-width to the
   theme.json wideSize (1280px). On GlotPress pages WordPress doesn't run
   that codepath because we render the template parts via do_blocks() in
   our header.php — so those inner blocks fall back to contentSize (768px),
   which crams the site nav and the CTA cluster onto two rows.
   These overrides restore the wide behavior. */
body.gp-page .site-header > .wp-block-group,
body.gp-page .site-footer > .wp-block-group,
body.gp-page .site-footer > .wp-block-columns {
	max-width: var(--wp--style--global--wide-size, 1280px) !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
body.gp-page .site-header > .wp-block-group.is-nowrap,
body.gp-page .site-footer > .wp-block-group.is-nowrap {
	flex-wrap: nowrap !important;
}

/* Main wrapper between site header and footer.
   `display: block` is defensive against any flex/grid main rules.
   `background` is light so the content area visually flows from the header
   into the footer without dark strips. Margin reset overrides
   `main > * { margin-block-start: 0 !important }` from theme-extras.css. */
.gp-site-main {
	display: block;
	min-height: 60vh;
	background: var(--paper, #faf9fc);
	margin: 0 !important;
	padding: 0 !important;
}

/* ---------- Sub-bar (Projects / Locales / Login) ----------
   The real Tickera site nav sits above this. The sub-bar is a context
   strip just for the GlotPress section. */
.gp-subbar {
	background: #fff;
	border-bottom: 1px solid var(--hairline, #ECE9F2);
}
.gp-subbar-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 14px 32px;
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}
.gp-subbar-title a {
	font-size: 1rem;
	font-weight: 700;
	color: var(--ink, #1A1428) !important;
	text-decoration: none !important;
	letter-spacing: -0.01em;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.gp-subbar-title a::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	border-radius: 5px;
	background: linear-gradient(135deg, var(--brand, #6b5f89) 0%, var(--brand-glow, #9D8FBE) 100%);
}
.gp-subbar-nav {
	display: flex;
	gap: 2px;
	flex: 1 1 auto;
}
.gp-subbar-nav a {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--muted, #6B7280) !important;
	text-decoration: none !important;
	transition: color 0.15s ease, background 0.15s ease;
}
.gp-subbar-nav a:hover {
	color: var(--ink, #1A1428) !important;
	background: #f3effa;
}
.gp-subbar-nav a.current {
	color: #fff !important;
	background: var(--brand, #6b5f89);
}
.gp-subbar-side {
	display: flex;
	gap: 12px;
	align-items: center;
}
.gp-subbar-side a {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--muted, #6B7280) !important;
	text-decoration: none !important;
	padding: 6px 12px;
	border-radius: 8px;
	transition: color 0.15s ease, background 0.15s ease;
}
.gp-subbar-side a:hover {
	color: var(--ink, #1A1428) !important;
	background: #f3effa;
}

@media (max-width: 720px) {
	.gp-subbar-inner { padding: 12px 18px; gap: 12px; }
	.gp-subbar-nav { order: 3; flex-basis: 100%; }
}

/* ---------- Content shell ---------- */
.gp-content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 48px 32px 96px;
	background: transparent !important;
}

/* Breadcrumb */
.gp-content .breadcrumb {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted-2, #A39CB5);
	background: transparent;
	border: 0;
}
.gp-content .breadcrumb li {
	display: inline;
	background: transparent;
	margin: 0;
	padding: 0;
}
.gp-content .breadcrumb li + li::before {
	content: " / ";
	color: var(--hairline, #ECE9F2);
	margin: 0 8px;
}
.gp-content .breadcrumb a {
	color: var(--brand, #6b5f89) !important;
	font-weight: 700;
	text-decoration: none !important;
}
.gp-content .breadcrumb a:hover {
	text-decoration: underline !important;
}

/* Headings inside .gp-content */
.gp-content h2 {
	font-family: "Hanken Grotesk", system-ui, sans-serif !important;
	font-size: clamp(1.875rem, 3vw, 2.5rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.025em;
	color: var(--ink, #1A1428);
	margin: 0 0 28px;
}
.gp-content h3 {
	font-family: "Hanken Grotesk", system-ui, sans-serif !important;
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--ink, #1A1428);
	margin: 36px 0 14px;
}
.gp-content h4 {
	font-family: "Hanken Grotesk", system-ui, sans-serif !important;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--ink, #1A1428);
	margin: 24px 0 10px;
}
.gp-content p {
	color: var(--ink, #1A1428);
	line-height: 1.65;
	margin: 0 0 16px;
	max-width: 760px;
}
.gp-content a {
	color: var(--brand, #6b5f89);
}
.gp-content a:hover {
	color: var(--brand-deep, #4A4262);
}

/* Notices */
#gp-js-message:not(:empty) {
	margin: 0 0 24px;
	padding: 12px 16px;
	background: #f3effa;
	border-left: 3px solid var(--brand, #6b5f89);
	border-radius: 8px;
	font-size: 0.9375rem;
	color: var(--ink, #1A1428);
}
.gp-content .error,
.gp-content .notice {
	margin: 0 0 24px;
	padding: 14px 18px;
	border-radius: 12px;
	font-size: 0.9375rem;
}
.gp-content .error {
	background: #fef2f2;
	border-left: 3px solid #dc2626;
	color: #991b1b;
}
.gp-content .notice {
	background: #f0fdf4;
	border-left: 3px solid #16a34a;
	color: #166534;
}

/* ---------- Projects list (dl / dt / dd) ----------
   GlotPress emits `<dt><a>Project</a></dt><dd></dd>` for every project,
   with the dd usually empty (just whitespace). Without intervention, grid
   layout puts dt and dd side-by-side as separate cells. We hide dd entirely
   so each dt becomes a self-contained card, and we strip GlotPress admin
   links ("Edit", "Delete") that bleed into the dt when logged in. */
#projects dl {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
}
#projects dt {
	background: #fff;
	border: 1px solid var(--hairline, #ECE9F2);
	border-left: 3px solid var(--brand, #6b5f89);
	border-radius: 14px;
	padding: 22px 24px;
	font-weight: 700;
	font-size: 1.0625rem;
	min-height: 80px;
	display: flex;
	align-items: center;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-left-color 0.15s ease;
}
#projects dt:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 40px -22px rgba(74, 66, 98, 0.25);
	border-left-color: var(--brand-glow, #9D8FBE);
}
#projects dt a {
	color: var(--ink, #1A1428) !important;
	text-decoration: none !important;
	font-size: 1.0625rem;
	font-weight: 700;
}
#projects dt a:hover {
	color: var(--brand, #6b5f89) !important;
}
/* Hide the row-action admin links ("Edit", "Delete") that GlotPress
   appends to dt for logged-in admins. These are inline anchors with
   `.button.action` class — not in a wrapper — so we target them directly.
   Logged-out visitors don't see these anyway; this just keeps the layout
   clean for admins too. */
#projects dt .button.action,
#projects dt .row-actions,
#projects dt .row-actions-toggle {
	display: none !important;
}
/* dd is virtually always empty in the project list; hide it so it doesn't
   render as a phantom card next to dt. */
#projects dd {
	display: none;
}
.project-inactive { opacity: 0.6; }
.project-inactive a { color: var(--muted-2, #A39CB5) !important; }

/* Action list (e.g. "Projects by language") */
.actionlist {
	margin: 36px 0 0;
	padding: 16px 20px;
	background: #fff;
	border: 1px dashed var(--hairline-2, #E5E7EB);
	border-radius: 12px;
	font-size: 0.9375rem;
	color: var(--ink, #1A1428);
}
.actionlist a {
	font-weight: 700;
	color: var(--brand, #6b5f89) !important;
}

/* ---------- Tables (translations, locales, glossary) ---------- */
.gp-content table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: #fff;
	border: 1px solid var(--hairline, #ECE9F2);
	border-radius: 14px;
	overflow: hidden;
	font-size: 0.9375rem;
	margin: 0 0 24px;
}
.gp-content table th {
	background: #f3effa;
	color: var(--ink, #1A1428);
	font-weight: 700;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: left;
	padding: 12px 18px;
	border-bottom: 1px solid var(--hairline, #ECE9F2);
}
.gp-content table td {
	padding: 14px 18px;
	border-bottom: 1px solid var(--hairline, #ECE9F2);
	color: var(--ink, #1A1428);
	vertical-align: top;
}
.gp-content table tr:last-child td { border-bottom: 0; }
.gp-content table tr:hover td { background: var(--paper, #faf9fc); }

/* Translation editor — original + translation cells in monospace */
.gp-content .translation-row .translation,
.gp-content .translation-row .original {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* Status pills */
.gp-content .status {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	background: var(--paper, #faf9fc);
	color: var(--muted, #6B7280);
}
.gp-content .status-current,
.gp-content .status_current { background: rgba(16, 185, 129, 0.12); color: #047857; }
.gp-content .status-waiting,
.gp-content .status_waiting { background: rgba(245, 158, 11, 0.14); color: #92400e; }
.gp-content .status-rejected,
.gp-content .status_rejected { background: rgba(220, 38, 38, 0.12); color: #b91c1c; }
.gp-content .status-fuzzy,
.gp-content .status_fuzzy { background: rgba(107, 95, 137, 0.14); color: var(--brand-deep, #4A4262); }
.gp-content .status-old,
.gp-content .status_old { background: rgba(107, 114, 128, 0.14); color: #4b5563; }

/* ---------- Forms ---------- */
.gp-content input[type="text"],
.gp-content input[type="email"],
.gp-content input[type="search"],
.gp-content input[type="url"],
.gp-content input[type="password"],
.gp-content input[type="number"],
.gp-content textarea,
.gp-content select {
	font-family: "Hanken Grotesk", system-ui, sans-serif !important;
	font-size: 0.9375rem;
	padding: 10px 14px;
	background: #fff;
	border: 1.5px solid var(--hairline, #ECE9F2);
	border-radius: 10px;
	color: var(--ink, #1A1428);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
	max-width: 100%;
}
.gp-content input:focus,
.gp-content textarea:focus,
.gp-content select:focus {
	outline: 0;
	border-color: var(--brand-glow, #9D8FBE);
	box-shadow: 0 0 0 4px rgba(157, 143, 190, 0.18);
}

/* Buttons */
.gp-content button,
.gp-content input[type="submit"],
.gp-content input[type="button"],
.gp-content .button {
	font-family: "Hanken Grotesk", system-ui, sans-serif !important;
	font-size: 0.9375rem;
	font-weight: 600;
	padding: 10px 22px;
	background: var(--ink, #1A1428);
	color: #fff !important;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
	text-decoration: none !important;
	display: inline-block;
}
.gp-content button:hover,
.gp-content input[type="submit"]:hover,
.gp-content input[type="button"]:hover,
.gp-content .button:hover {
	background: var(--brand, #6b5f89);
	transform: translateY(-1px);
	box-shadow: 0 10px 22px -10px rgba(107, 95, 137, 0.5);
}
.gp-content .button.secondary,
.gp-content button.secondary {
	background: #fff;
	color: var(--ink, #1A1428) !important;
	border: 1.5px solid var(--hairline, #ECE9F2);
}
.gp-content .button.secondary:hover {
	background: var(--paper, #faf9fc);
	border-color: var(--brand-glow, #9D8FBE);
}

/* ---------- Table-actions toolbar (above + below translation table) ----------
   GlotPress wraps each table-actions strip in `.gp-table-actions.top` and
   `.gp-table-actions.bottom`. Top has bulk-actions on the left and paging
   on the right. Bottom has the status legend on the left and paging on the
   right. Layout them with flex space-between so paging always ends up
   right-aligned with breathing room. */
.gp-content .gp-table-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin: 16px 0;
}
.gp-content .gp-table-actions.top { margin-top: 24px; }
.gp-content .gp-table-actions.bottom { margin-bottom: 32px; }

/* ---------- Pagination ----------
   Pill-style pager: previous/next arrows, page numbers, current state.
   Larger touch targets, clean hover, semantic disabled state. */
.gp-content .paging {
	display: inline-flex;
	gap: 6px;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
	align-items: center;
	background: var(--paper, #faf9fc);
	border: 1px solid var(--hairline, #ECE9F2);
	border-radius: 999px;
	padding: 4px;
}
.gp-content .paging a,
.gp-content .paging .current,
.gp-content .paging > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 12px;
	min-width: 36px;
	height: 32px;
	text-align: center;
	background: transparent;
	border: 0;
	border-radius: 999px;
	font-family: "Hanken Grotesk", system-ui, sans-serif !important;
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--muted, #6B7280) !important;
	text-decoration: none !important;
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
	line-height: 1;
}
.gp-content .paging a:hover {
	background: #fff;
	color: var(--ink, #1A1428) !important;
	box-shadow: 0 1px 0 rgba(74, 66, 98, 0.06), 0 2px 8px -4px rgba(74, 66, 98, 0.15);
}
.gp-content .paging .current {
	background: var(--ink, #1A1428);
	color: #fff !important;
	font-weight: 700;
}
.gp-content .paging .current:hover {
	background: var(--ink, #1A1428);
	color: #fff !important;
}
/* Disabled prev/next state: muted, no pointer */
.gp-content .paging .disabled,
.gp-content .paging span.next.disabled,
.gp-content .paging span.previous.disabled {
	color: var(--muted-2, #A39CB5) !important;
	opacity: 0.5;
	cursor: not-allowed;
}
.gp-content .paging .disabled:hover {
	background: transparent;
	box-shadow: none;
	transform: none;
}
/* Arrow links get slightly larger arrows */
.gp-content .paging a.previous,
.gp-content .paging a.next,
.gp-content .paging .previous,
.gp-content .paging .next {
	font-size: 1rem;
	min-width: 36px;
}
.gp-content .paging a.previous:hover { transform: translateX(-1px); }
.gp-content .paging a.next:hover { transform: translateX(1px); }

/* ---------- Status legend (below translation table) ----------
   GlotPress emits #legend as flat divs (label + box + label + box ...) so
   we use flex with row alignment. Boxes are tiny color swatches that
   match the row-status colors used in the translation table. */
.gp-content #legend {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 16px;
	font-size: 0.8125rem;
	color: var(--muted, #6B7280);
}
.gp-content #legend > div {
	display: inline-flex;
	align-items: center;
}
.gp-content #legend > div > strong {
	color: var(--ink, #1A1428);
	font-weight: 700;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-right: 4px;
}
.gp-content #legend .box {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 4px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	flex-shrink: 0;
	margin-right: 6px;
}
.gp-content #legend .box.status-current   { background: #dcfce7; border-color: #86efac; }
.gp-content #legend .box.status-waiting   { background: #fef3c7; border-color: #fcd34d; }
.gp-content #legend .box.status-rejected  { background: #fee2e2; border-color: #fca5a5; }
.gp-content #legend .box.status-fuzzy     { background: #ffedd5; border-color: #fdba74; }
.gp-content #legend .box.status-old       { background: #f3e8ff; border-color: #d8b4fe; }
.gp-content #legend .box.has-warnings     { background: #fff; border-color: #6b5f89; }

/* ---------- Filter / Sort / Status tabs (above the table) ----------
   GlotPress renders "Filter ↓ • Sort ↓ • All (1761) • Translated (X) • ..."
   as inline links separated by middle dots. Tighten spacing + brand colors. */
.gp-content .filter-toolbar,
.gp-content .gp-content > p:has(> .filter):first-of-type {
	margin: 16px 0;
}

/* Clear hack used by gp-bar / gp-content layouts */
.gp-content .clear { clear: both; }

/* Hide the original GlotPress footer (we render the site footer via our
   gp-templates/footer.php instead). */
#gp-footer { display: none !important; }

/* ---------- GlotPress project / locale view layout ----------
   GlotPress ships a classic 2-column float layout (#translation-sets right,
   #sub-projects left) that breaks on modern wide viewports. We replace it
   with a proper CSS grid:
     - #project.with-sub-projects → 2 columns: main 1fr | sidebar 280px
     - #project.no-sub-projects   → single column
   The clear-float reset zeroes out the legacy floats first. */
.gp-content #project,
.gp-content #translation-sets,
.gp-content #sub-projects {
	float: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: auto !important;
}

/* 2-column grid when sub-projects exist (left main, right sidebar) */
.gp-content #project.with-sub-projects {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 32px;
	align-items: start;
	margin-top: 1.5rem;
}
.gp-content #project.with-sub-projects > #translation-sets {
	grid-column: 1 / 2;
	min-width: 0; /* allow tables to shrink within grid track */
}
.gp-content #project.with-sub-projects > #sub-projects {
	grid-column: 2 / 3;
	background: #fff;
	border: 1px solid var(--hairline, #ECE9F2);
	border-radius: 14px;
	padding: 20px 22px;
	position: sticky;
	top: 88px; /* sticks below the site header when scrolling long tables */
}
.gp-content #project.with-sub-projects > #sub-projects h3 {
	margin: 0 0 14px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted-2, #A39CB5);
}
/* Sidebar dl: stacked list, not card grid (we override the global #projects rules) */
.gp-content #project.with-sub-projects > #sub-projects dl {
	display: block;
	margin: 0;
	padding: 0;
}
.gp-content #project.with-sub-projects > #sub-projects dt {
	display: block;
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 8px 0;
	margin: 0;
	min-height: auto;
	font-weight: 500;
	font-size: 0.9375rem;
	border-bottom: 1px solid var(--hairline, #ECE9F2);
}
.gp-content #project.with-sub-projects > #sub-projects dt:last-of-type {
	border-bottom: 0;
}
.gp-content #project.with-sub-projects > #sub-projects dt:hover {
	transform: none;
	box-shadow: none;
	border-left-color: transparent;
}
.gp-content #project.with-sub-projects > #sub-projects dt a {
	font-size: 0.9375rem;
	font-weight: 500;
}
.gp-content #project.with-sub-projects > #sub-projects dt a:hover {
	color: var(--brand, #6b5f89) !important;
}
.gp-content #project.with-sub-projects > #sub-projects dd {
	display: none;
}

/* Single-column when no sub-projects */
.gp-content #project.no-sub-projects {
	display: block;
	margin-top: 1.5rem;
}

/* Mobile: collapse to single column with sub-projects below table */
@media (max-width: 880px) {
	.gp-content #project.with-sub-projects {
		grid-template-columns: 1fr;
	}
	.gp-content #project.with-sub-projects > #sub-projects {
		grid-column: 1 / -1;
		position: static;
	}
}

/* Project H1 heading + admin pills.
   GlotPress renders the project title inside a `.gp-heading` flex container
   with `Edit` / `Delete` admin-only action pills inline. Public visitors
   don't see those pills, but for logged-in admins they crowd the headline.
   Hide them — admins can use /wp-admin if they need destructive actions. */
.gp-content .gp-heading .button.action,
.gp-content .gp-heading .button.edit,
.gp-content .gp-heading .button.delete,
.gp-content h2 + .button.action,
.gp-content h2 .button.action {
	display: none !important;
}
.gp-content .gp-heading {
	display: block !important;
	align-items: initial !important;
	gap: 0 !important;
}
.gp-content .gp-heading h2 {
	display: block;
}

/* "Project actions" foldout (Import Originals, Permissions, etc.) is
   admin-only. GlotPress relies on a `hide-if-js` class that's supposed
   to be removed by JS — but it doesn't always fire reliably. We just
   hide the whole admin action set unconditionally. */
.gp-content #project-actions-toggle,
.gp-content .project-actions,
.gp-content .project-actions-list,
.gp-content .hide-if-js,
.gp-content #project ul.project-actions {
	display: none !important;
}

/* GlotPress meta section (translation set info, project subtitle, etc.) */
.gp-content .gp-meta {
	background: #fff;
	border: 1px solid var(--hairline, #ECE9F2);
	border-radius: 12px;
	padding: 18px 22px;
	margin: 0 0 24px;
}
.gp-content .gp-meta h3 {
	margin-top: 0;
	font-size: 1.0625rem;
}
.gp-content .gp-meta dl {
	margin: 0;
}
.gp-content .gp-meta dt {
	display: inline-block;
	font-weight: 700;
	color: var(--muted, #6B7280);
	min-width: 140px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	font-size: 0.875rem;
}
.gp-content .gp-meta dt:hover { transform: none; box-shadow: none; }
.gp-content .gp-meta dd {
	display: inline-block;
	margin: 0 0 8px;
	font-size: 0.875rem;
	color: var(--ink, #1A1428);
}