/*
Theme Name: Onclave Networks
Theme URI: https://onclavenetworks.com
Author: Onclave Networks, Inc.
Author URI: https://onclavenetworks.com
Description: Official WordPress theme for Onclave Networks — Zero Trust Security for IT/OT/IoT. Dark theme with gold primary color.
Version: 1.0.0
License: Proprietary
Text Domain: onclave
*/

/* ═══════════════════════════════════════════════════════════
   Onclave Networks — WordPress Theme Stylesheet
   Dark / Gold edition  |  v1.0.0
   ═══════════════════════════════════════════════════════════ */

/* ── RESET & ROOT ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --gold:       #C9A84C;
  --gold-light: #E8C96A;
  --gold-dark:  #A07830;
  --aqua:       #00A89D;
  --tomato:     #F0493E;
  --navy:       #0D2B6B;
  --dark:       #0E0E12;
  --dark-2:     #161620;
  --dark-3:     #1E1E2A;
  --dark-4:     #252535;
  --text:       #E2E2E2;
  --text-muted: #8A8A9A;
  --white:      #FFFFFF;
  --border:     rgba(201,168,76,0.18);
}

html { scroll-behavior: smooth; }
body { font-family: 'Jost', sans-serif; color: var(--text); background: var(--dark); }

/* WordPress admin bar offset */
body.admin-bar #site-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar #site-header { top: 46px; }
}

/* Remove default WordPress block gap */
.wp-site-blocks { padding: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }

/* ── HEADER ── */
#site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 60px; height: 80px;
  background: rgba(14,14,18,0); transition: background 0.3s, border-bottom 0.3s;
  border-bottom: 1px solid transparent;
}
#site-header.scrolled {
  background: rgba(14,14,18,0.96);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
}
.logo { font-size: 1.7rem; font-weight: 700; color: var(--gold); letter-spacing: 0.06em; text-decoration: none; }

/* Primary nav — wp_nav_menu() outputs a <ul> */
#site-header nav { display: flex; align-items: center; gap: 32px; }
/* Mobile animation picker row — hidden on desktop, flex on mobile */
.nav-anim-row { display: none; }
#site-header nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 32px; }
#site-header nav ul li { margin: 0; padding: 0; }
#site-header nav ul li a,
#site-header nav > a {
  color: rgba(255,255,255,0.75); text-decoration: none;
  font-size: 0.9rem; font-weight: 500; transition: color 0.2s; letter-spacing: 0.02em;
}
#site-header nav ul li a:hover,
#site-header nav > a:hover { color: var(--gold); }
#site-header nav ul li.current-menu-item > a,
#site-header nav ul li.current-menu-parent > a,
#site-header nav ul li.current-menu-ancestor > a,
#site-header nav > a.active {
  color: var(--gold);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 2px;
}
#site-header nav ul li { position: relative; }
#site-header nav ul li ul {
  display: none;
  position: absolute; top: 100%; left: 0;
  background: rgba(14,14,18,0.97); border: 1px solid var(--border);
  border-radius: 4px; min-width: 180px; padding: 8px 0;
  z-index: 300;
}
#site-header nav ul li:hover > ul { display: block; }
#site-header nav ul li ul li { display: block; width: 100%; }
#site-header nav ul li ul li a {
  display: block; padding: 9px 18px;
  color: rgba(255,255,255,0.75) !important; font-size: 0.85rem;
  white-space: nowrap;
}
#site-header nav ul li ul li a:hover { color: var(--gold) !important; background: rgba(201,168,76,0.06); }

.btn-contact {
  background: transparent; color: var(--gold) !important;
  border: 1.5px solid var(--gold); border-radius: 4px;
  padding: 9px 22px; font-weight: 600 !important;
  transition: all 0.2s !important; letter-spacing: 0.04em;
  text-decoration: none; font-size: 0.9rem;
}
.btn-contact:hover { background: var(--gold) !important; color: var(--dark) !important; }

.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  color: var(--text); font-size: 1.4rem; line-height: 1; padding: 4px;
}

/* ── HERO ── */
.hero {
  position: relative; min-height: 580px;
  display: flex; align-items: center;
  background: var(--dark); overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  /* Dark mode fallback (overridden by per-animation navy rules below) */
  background:
    radial-gradient(ellipse at 20% 60%, rgba(201,168,76,0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(201,168,76,0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(201,168,76,0.14) 0%, transparent 50%);
}
/* Dark mode navy glow — all animations */
html[data-hero-anim="off"]       .hero-bg,
html[data-hero-anim="aurora"]    .hero-bg,
html[data-hero-anim="particles"] .hero-bg,
html[data-hero-anim="radar"]     .hero-bg,
html[data-hero-anim="hex"]       .hero-bg,
html[data-hero-anim="circuit"]   .hero-bg,
html[data-hero-anim="stream"]    .hero-bg {
  background:
    radial-gradient(ellipse at 20% 60%, rgba(30,75,200,0.30) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(30,75,200,0.22) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(30,75,200,0.16) 0%, transparent 50%);
}

.hero-grid {
  position: absolute; inset: 0;
  overflow: hidden;
}
.hero-line { display: none; }
.hero-content { position: relative; z-index: 2; padding: 150px 80px 80px; max-width: 720px; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.72rem; font-weight: 700; color: var(--gold);
  letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 20px;
}
.hero-eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--gold); }
.hero-content h1 { font-size: 3rem; font-weight: 700; color: var(--white); line-height: 1.12; margin-bottom: 20px; }
.hero-sub-headline { display: block; font-size: 1.6rem; font-weight: 400; color: var(--text-muted); white-space: nowrap; margin-top: 8px; }
.hero-content h1 em { color: var(--gold); font-style: normal; }
.hero-content p { font-size: 1.05rem; color: var(--text-muted); margin-bottom: 38px; font-weight: 300; line-height: 1.7; white-space: nowrap; }
.hero-buttons { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

.page-hero { min-height: 340px; }
.page-hero .hero-content { padding: 140px 80px 60px; }
.page-hero .hero-content h1 { font-size: 2.3rem; white-space: nowrap; }

/* ── BUTTONS ── */
.btn-primary {
  display: inline-block; background: var(--gold); color: var(--dark);
  border-radius: 4px; padding: 13px 30px; font-size: 0.9rem;
  font-weight: 700; text-decoration: none; transition: all 0.2s;
  letter-spacing: 0.04em; font-family: 'Jost', sans-serif;
}
.btn-primary:hover { background: var(--gold-light); color: var(--dark); }

.btn-ghost {
  display: inline-block; color: rgba(255,255,255,0.6);
  font-size: 0.9rem; font-weight: 500; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.btn-ghost:hover { color: var(--gold); border-color: var(--gold); }

.btn-outline {
  display: inline-block; border: 1.5px solid var(--gold); color: var(--gold);
  border-radius: 4px; padding: 12px 28px; font-size: 0.88rem;
  font-weight: 600; text-decoration: none; transition: all 0.2s;
  letter-spacing: 0.04em; font-family: 'Jost', sans-serif;
}
.btn-outline:hover { background: var(--gold); color: var(--dark); }

.btn-outline-dark {
  display: inline-block; border: 1.5px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.7);
  border-radius: 4px; padding: 12px 28px; font-size: 0.88rem;
  font-weight: 600; text-decoration: none; transition: all 0.2s; font-family: 'Jost', sans-serif;
}
.btn-outline-dark:hover { border-color: var(--gold); color: var(--gold); }

.btn-dark {
  display: inline-block; background: var(--dark); color: var(--gold);
  border-radius: 4px; padding: 13px 34px; font-size: 0.9rem;
  font-weight: 700; text-decoration: none; transition: all 0.2s; font-family: 'Jost', sans-serif;
}
.btn-dark:hover { background: var(--dark-2); }

/* ── SECTION UTILITIES ── */
.section-rule       { width: 36px; height: 2px; background: var(--gold); margin: 0 auto 20px; }
.section-rule-left  { width: 36px; height: 2px; background: var(--gold); margin: 0 0 20px; }
.section-rule-aqua  { width: 36px; height: 2px; background: var(--aqua); margin: 0 0 20px; }

.section { padding: 56px 60px 32px; }
.section-dark  { background: var(--dark); }
.section-dark2 { background: var(--dark-2); }
.section-dark3 { background: var(--dark-3); }
.section-centered { text-align: center; }

.section h2 { font-size: 1.85rem; font-weight: 700; line-height: 1.25; }
.section-dark  h2,
.section-dark2 h2,
.section-dark3 h2 { color: var(--white); }
.section h2 span { color: var(--gold); }

.section-lead { font-size: 0.98rem; line-height: 1.8; max-width: 760px; margin: 0 auto 52px; color: var(--text-muted); font-weight: 300; }

.container { max-width: 1140px; margin: 0 auto; }

/* ── VALUE CARDS ── */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card {
  background: var(--dark-3); border: 1px solid var(--border);
  border-radius: 6px; padding: 30px 26px 34px;
  transition: border-color 0.2s, transform 0.2s;
}
.card:hover { border-color: var(--gold); transform: translateY(-3px); }
.card-title { font-size: 1.05rem; font-weight: 700; color: var(--white); margin-bottom: 6px; }
.card-sub {
  font-size: 0.68rem; font-weight: 700; color: var(--gold);
  letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.card ul { list-style: none; margin: 0; padding: 0; }
.card ul li {
  font-size: 0.88rem; color: var(--text-muted); line-height: 1.55;
  padding: 4px 0 4px 16px; position: relative;
}
.card ul li::before { content: '\203A'; position: absolute; left: 0; color: var(--gold); font-weight: 700; }

/* ── SPLIT LAYOUT ── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split-text h2 { color: var(--white); margin-bottom: 16px; }
.split-text p { font-size: 0.95rem; line-height: 1.78; color: var(--text-muted); margin-bottom: 14px; }
.split-image-placeholder {
  width: 100%; aspect-ratio: 4/3; border-radius: 6px;
  background: var(--dark-3); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 0.8rem; letter-spacing: 0.1em;
}

/* ── WHITEPAPER CARDS (teaser) ── */
.wp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.wp-card {
  background: var(--dark-3); border: 1px solid var(--border);
  border-radius: 6px; padding: 26px 22px 22px;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color 0.2s;
}
.wp-card:hover { border-color: var(--gold); }
.wp-tag { font-size: 0.68rem; font-weight: 700; color: var(--aqua); letter-spacing: 0.12em; text-transform: uppercase; }
.wp-card p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.55; flex: 1; }
.wp-link { font-size: 0.7rem; font-weight: 700; color: var(--gold); text-decoration: none; letter-spacing: 0.08em; text-transform: uppercase; }
.wp-link:hover { color: var(--gold-light); }

/* ── ICEBERG ── */
.iceberg-wrap {
  display: grid; grid-template-columns: 55% 45%; align-items: center;
  background: linear-gradient(180deg, #0a1a2e 0%, #061220 50%, #030a14 100%);
  overflow: hidden;
}
.iceberg-image-col { display: flex; align-items: center; justify-content: center; padding: 32px 16px 32px 32px; }

/* Image wrapper — needed to layer waterline + scanner on top of img */
.iceberg-img-wrap {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}
.iceberg-img {
  width: 480px; height: auto; display: block; flex-shrink: 0;
  animation: iceberg-float 6s ease-in-out infinite;
}
@keyframes iceberg-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}


/* Scanner — sweeps down from top, stops at waterline */
.iceberg-scanner {
  position: absolute;
  left: 0; right: 0;
  top: 0; height: 3px;
  background: linear-gradient(90deg, transparent, rgba(0,175,186,0.9), transparent);
  animation: iceberg-scan 4s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(0,175,186,0.6);
}
@keyframes iceberg-scan {
  0%   { top: 0%;   opacity: 0; }
  5%   { opacity: 1; }
  95%  { top: 100%; opacity: 0.9; }
  100% { top: 100%; opacity: 0; }
}

.iceberg-caption {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  padding: 48px 32px 48px 16px;
  overflow: hidden;
}
.iceberg-caption h2 { color: var(--white); font-size: 1.9rem; line-height: 1.25; margin: 0; position: relative; z-index: 1; }
.iceberg-caption p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.72; font-weight: 300; margin: 0; position: relative; z-index: 1; }

/* Threat canvas — fills caption behind text */
.iceberg-threat-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* Stats row */
.iceberg-stats {
  display: flex; gap: 32px; position: relative; z-index: 1;
}
.iceberg-stat { display: flex; flex-direction: column; gap: 4px; }
.iceberg-stat-num {
  font-size: 2.2rem; font-weight: 700; color: var(--gold); line-height: 1;
  font-family: 'Jost', sans-serif;
}
.iceberg-stat-label {
  font-size: 0.78rem; color: rgba(255,255,255,0.45); line-height: 1.4; max-width: 130px;
}

/* ── ONCLAVE DIFFERENCE ── */
.difference-wrap { max-width: 820px; display: flex; flex-direction: column; align-items: flex-start; gap: 0; }

/* ── WHITEPAPERS SECTION ── */
.section-wp { background: linear-gradient(135deg, #0d1f2d 0%, #0a1520 100%); }

/* ── PARTNER PORTAL ── */
.portal-hero {
  min-height: 320px;
  border-bottom: 1px solid var(--border);
  padding: 120px 80px 48px;
}
.portal-hero-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
  flex-wrap: wrap;
  position: relative; z-index: 1;
}
.portal-eyebrow {
  font-size: 0.72rem; font-weight: 700; color: var(--aqua);
  letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 12px;
}
.portal-welcome h1 {
  font-size: 2.4rem; font-weight: 700; color: var(--white);
  margin: 0 0 8px; line-height: 1.15;
}
.portal-welcome h1 span { color: var(--gold); }
.portal-company { font-size: 1rem; color: var(--text-muted); font-weight: 300; }
.portal-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.portal-badge {
  display: inline-block; background: rgba(201,168,76,0.12);
  border: 1px solid rgba(201,168,76,0.35); color: var(--gold);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 5px 14px; border-radius: 20px;
}
.portal-since { font-size: 0.8rem; color: var(--text-muted); }
.portal-logout {
  font-size: 0.8rem; color: var(--text-muted); text-decoration: none;
  transition: color 0.2s;
}
.portal-logout:hover { color: var(--gold); }

.portal-section { padding-top: 52px; padding-bottom: 52px; }
/* Section labels are GOLD (partner-facing). Aqua is reserved for staff surfaces
   — see .portal-section-label--agent and .portal-badge--agent. */
.portal-section-label {
  font-size: 0.72rem; font-weight: 700; color: var(--gold);
  letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 24px;
}

/* Quick action cards */
.portal-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px;
}
/* Deal-registration status badges (reuse the ticket-badge shape) */
.deal-badge {
  display: inline-block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border);
  align-self: flex-start;
}
.deal-badge--pending    { color: var(--gold);       border-color: rgba(201,168,76,0.40); background: rgba(201,168,76,0.08); }
.deal-badge--approved   { color: var(--aqua);       border-color: rgba(0,168,157,0.40);  background: rgba(0,168,157,0.08); }
.deal-badge--active     { color: #3E7BD6;           border-color: rgba(62,123,214,0.40); background: rgba(62,123,214,0.10); }
.deal-badge--attention  { color: #E8912C;           border-color: rgba(232,145,44,0.40); background: rgba(232,145,44,0.10); }
.deal-badge--hold       { color: var(--text-muted); border-color: var(--border);         background: rgba(138,138,154,0.10); }
.deal-badge--done       { color: #3BA55D;           border-color: rgba(59,165,93,0.45);  background: rgba(59,165,93,0.10); }
.deal-badge--declined   { color: var(--tomato);     border-color: rgba(240,73,62,0.40);  background: rgba(240,73,62,0.08); }
/* "Needs more info" callout on the partner deal detail / resubmit view */
.deal-callout {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding: 16px 20px; border-radius: 10px; margin: 6px 0 24px;
  border: 1px solid rgba(232,145,44,0.45); background: rgba(232,145,44,0.09);
}
.deal-callout strong { color: #E8912C; font-weight: 700; }
.deal-callout span { color: var(--white); opacity: 0.9; }
.deal-callout-cta { margin-left: auto; white-space: nowrap; }
@media (max-width: 640px) { .deal-callout-cta { margin-left: 0; width: 100%; text-align: center; } }
/* Section headings inside the deal-registration form */
.deal-group {
  font-size: 1.05rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--gold); margin: 28px 0 8px; padding-top: 18px; border-top: 1px solid var(--border);
}
.deal-group:first-of-type { border-top: none; padding-top: 0; margin-top: 2px; }
/* Per-section colours from the brand palette */
.deal-group--reseller      { color: #00A89D; border-top-color: rgba(0,168,157,0.35); }
.deal-group--prospect      { color: #C9A84C; border-top-color: rgba(201,168,76,0.35); }
.deal-group--milestones    { color: #F0493E; border-top-color: rgba(240,73,62,0.35); }
.deal-group--qualification { color: #3E7BD6; border-top-color: rgba(62,123,214,0.35); }
/* Two-column deal-registration form so all fields fit on one page.
   `.ticket-form.deal-form` (2 classes) beats `.ticket-form` no matter the source order. */
.ticket-form.deal-form { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 30px; max-width: 940px; }
.deal-form .deal-group { grid-column: 1 / -1; }
.deal-form .deal-field { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.deal-form .deal-field--wide { grid-column: 1 / -1; }
.deal-form > .btn-primary { grid-column: 1 / -1; margin-top: 20px; }
@media (max-width: 640px) { .ticket-form.deal-form { grid-template-columns: 1fr; } }
/* Partner "My Deals" — sortable / filterable table */
.deal-table-tools { display: flex; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.deal-table-search, .deal-table-filter {
  background: var(--dark-4); border: 1px solid var(--border); color: var(--white);
  border-radius: 6px; padding: 9px 13px; font-family: 'Jost', sans-serif; font-size: 0.9rem;
}
.deal-table-search { flex: 1; min-width: 200px; }
.deal-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
.deal-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.deal-table th {
  text-align: left; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); padding: 12px 16px; border-bottom: 1px solid var(--border);
  cursor: pointer; user-select: none; white-space: nowrap; background: var(--dark-3);
}
.deal-table th[data-sort]:hover { color: var(--gold); }
.deal-table th[aria-sort]::after { content: ' \2195'; opacity: 0.45; }
.deal-table th[aria-sort="ascending"]::after  { content: ' \2191'; opacity: 1; color: var(--gold); }
.deal-table th[aria-sort="descending"]::after { content: ' \2193'; opacity: 1; color: var(--gold); }
.deal-table td { padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--white); vertical-align: middle; }
.deal-table tbody tr:last-child td { border-bottom: none; }
.deal-table tbody tr { cursor: pointer; transition: background 0.15s; }
.deal-table tbody tr:hover { background: var(--dark-3); }
.deal-table-view { color: var(--gold); text-decoration: none; white-space: nowrap; }
.deal-table tbody tr:hover .deal-table-view { color: var(--gold-light); }
/* Asset Library list view — reuses .deal-table; only the extras below are asset-specific. */
.asset-cell-icon { margin-right: 9px; }
.asset-cell-name { font-weight: 500; }
/* File rows don't navigate on row-click, so don't imply they do. */
.asset-table tbody tr:not([data-href]) { cursor: default; }
.deal-table-view--disabled { color: var(--text-muted); cursor: not-allowed; }
.deal-table tbody tr:hover .deal-table-view--disabled { color: var(--text-muted); }
.portal-card {
  position: relative;
  background: var(--dark-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 28px 24px;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color 0.2s, transform 0.2s;
}
.portal-card:hover {
  border-color: var(--gold); transform: translateY(-3px);
}
.portal-card--coming { opacity: 0.65; }
.portal-card--coming:hover { transform: none; border-color: var(--border); cursor: default; }
.portal-card-badge {
  position: absolute; top: 14px; right: 14px;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
  background: var(--dark-3); border: 1px solid var(--border);
  padding: 3px 8px; border-radius: 10px;
}
.portal-card-icon { font-size: 1.6rem; line-height: 1; }
.portal-card-title { font-size: 1rem; font-weight: 600; color: var(--white); margin: 0; }
.portal-card-desc { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; flex: 1; }
.portal-card-link { font-size: 0.82rem; font-weight: 600; color: var(--gold); margin-top: 4px; }

/* Two-column layout */
.portal-two-col { display: grid; grid-template-columns: 1fr 340px; gap: 52px; align-items: start; }

/* Announcements */
.portal-announcement-list { display: flex; flex-direction: column; gap: 28px; }
.portal-announcement { border-left: 2px solid var(--border); padding-left: 20px; }
.portal-announcement-date { font-size: 0.75rem; color: var(--aqua); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px; }
.portal-announcement-title { font-size: 0.95rem; font-weight: 600; color: var(--white); margin-bottom: 6px; }
.portal-announcement-body { font-size: 0.85rem; color: var(--text-muted); line-height: 1.65; }

/* Account team */
.portal-team-card {
  background: var(--dark-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 24px;
  display: flex; gap: 16px; align-items: flex-start;
  margin-bottom: 16px;
}
.portal-team-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(201,168,76,0.15); border: 1px solid rgba(201,168,76,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 700; color: var(--gold);
  flex-shrink: 0; letter-spacing: 0.05em;
}
.portal-team-info { display: flex; flex-direction: column; gap: 4px; }
.portal-team-name { font-size: 0.95rem; font-weight: 600; color: var(--white); }
.portal-team-role { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 4px; }
.portal-team-email,
.portal-team-phone {
  font-size: 0.82rem; color: var(--aqua); text-decoration: none; display: block;
  transition: color 0.2s;
}
.portal-team-email:hover,
.portal-team-phone:hover { color: var(--white); }
.portal-team-avatar--sales {
  background: rgba(0,210,200,0.12); border-color: rgba(0,210,200,0.3);
  color: var(--aqua);
}
.portal-team-note { font-size: 0.78rem; color: var(--text-muted); line-height: 1.6; }

/* Portal responsive */
@media (max-width: 1024px) {
  .portal-cards { grid-template-columns: repeat(2, 1fr); }
  .portal-two-col { grid-template-columns: 1fr; }
  .portal-meta { align-items: flex-start; }
}
@media (max-width: 768px) {
  .portal-hero { padding: 110px 24px 40px; }
  .portal-cards { grid-template-columns: 1fr; }
}

/* ── PLATFORM BAND ── */
.platform-band h2 { color: var(--white); margin-bottom: 20px; }

/* ── FEATURE GRID ── */
.feature-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.feature-item { display: flex; gap: 16px; }
.feature-icon {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 4px;
  background: var(--dark-4); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-size: 1.1rem;
}
.feature-item h3 { font-size: 0.98rem; font-weight: 700; color: var(--white); margin-bottom: 6px; }
.feature-item p { font-size: 0.86rem; color: var(--text-muted); line-height: 1.6; }

/* ── STATS BAR ── */
.stats-bar { display: grid; grid-template-columns: repeat(3, 1fr); }
.stat { padding: 40px 20px; text-align: center; border-right: 1px solid var(--border); }
.stat:last-child { border-right: none; }
.stat-number { font-size: 2.8rem; font-weight: 700; color: var(--gold); }
.stat-label { font-size: 0.82rem; color: var(--text-muted); margin-top: 6px; letter-spacing: 0.04em; }

/* ── CTA BAND ── */
.cta-band {
  background: var(--dark-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  text-align: center; padding: 80px 60px; position: relative; overflow: hidden;
}
.cta-band::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(201,168,76,0.05) 0%, transparent 65%);
}
.cta-band h2 { font-size: 2rem; color: var(--white); font-weight: 700; margin-bottom: 12px; position: relative; }
.cta-band p { color: var(--text-muted); font-size: 0.98rem; font-weight: 300; max-width: 580px; margin: 0 auto 36px; position: relative; }
.cta-band .btn-primary { position: relative; }

/* ── BLOCKQUOTE ── */
.blockquote {
  border-left: 3px solid var(--gold); padding: 16px 20px;
  margin: 20px 0; background: var(--dark-3); border-radius: 0 4px 4px 0;
}
.blockquote p { font-style: italic; color: var(--text-muted); font-size: 0.92rem; line-height: 1.7; }
.blockquote cite { font-size: 0.78rem; color: var(--gold); font-style: normal; display: block; margin-top: 8px; }

/* ── TEAM GRID ── */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.team-card { text-align: center; }
.team-avatar {
  width: 110px; height: 110px; border-radius: 4px;
  background: var(--dark-3); border: 1px solid var(--border);
  margin: 0 auto 16px; display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; color: var(--gold); font-weight: 700;
}
.team-name { font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: 4px; }
.team-title { font-size: 0.82rem; color: var(--text-muted); }

/* ── CONTACT FORM ── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; letter-spacing: 0.06em; text-transform: uppercase; }
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%; padding: 12px 16px; background: var(--dark-3);
  border: 1px solid var(--border); border-radius: 4px;
  font-family: 'Jost', sans-serif; font-size: 0.9rem; color: var(--text);
  transition: border-color 0.2s;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-muted); }
.form-group input:focus,
.form-group textarea:focus { outline: none; border-color: var(--gold); }
.form-group textarea { height: 140px; resize: vertical; }
.form-group select { color: var(--text-muted); }
.contact-info h3 { font-size: 1.1rem; font-weight: 700; color: var(--white); margin-bottom: 20px; }
.contact-detail { display: flex; gap: 12px; margin-bottom: 18px; align-items: flex-start; }
.contact-detail-icon { color: var(--gold); font-size: 1rem; margin-top: 2px; }
.contact-detail p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.5; }
.contact-detail strong { color: var(--text); }

/* ── TESTIMONIALS ── */
.testimonial-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.testimonial {
  background: var(--dark-3); border: 1px solid var(--border);
  border-left: 3px solid var(--gold); padding: 28px 24px; border-radius: 0 6px 6px 0;
}
.testimonial-quote { font-size: 0.92rem; line-height: 1.72; color: var(--text-muted); margin-bottom: 16px; font-style: italic; }
.testimonial-author { font-size: 0.85rem; font-weight: 700; color: var(--white); }
.testimonial-role { font-size: 0.78rem; color: var(--gold); }

/* ── INDUSTRY GRID ── */
.industry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.industry-card {
  background: var(--dark-3); border: 1px solid var(--border); border-radius: 6px;
  overflow: hidden; transition: border-color 0.2s, transform 0.2s;
}
.industry-card:hover { border-color: var(--gold); transform: translateY(-3px); }
.industry-card-top { height: 80px; background: var(--dark-4); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--border); }
.industry-abbr { font-size: 1.3rem; font-weight: 700; color: var(--gold); letter-spacing: 0.08em; }
.industry-card-body { padding: 20px; }
.industry-card-body h3 { font-size: 0.98rem; font-weight: 700; color: var(--white); margin-bottom: 8px; }
.industry-card-body p { font-size: 0.84rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 12px; }
.industry-stat { font-size: 0.78rem; color: var(--aqua); line-height: 1.5; border-left: 2px solid var(--aqua); padding-left: 10px; margin-top: 12px; }

/* ── WHITEPAPER FULL PAGE ── */
.wp-full-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.wp-full-card {
  background: var(--dark-3); border: 1px solid var(--border); border-radius: 6px;
  display: flex; flex-direction: column; transition: border-color 0.2s, transform 0.2s;
}
.wp-full-card:hover { border-color: var(--gold); transform: translateY(-3px); }
.wp-full-card-top { padding: 26px 22px 22px; flex: 1; }
.wp-full-card-bottom { padding: 16px 22px; border-top: 1px solid var(--border); }

/* ── FILTER BAR ── */
.filter-bar { display: flex; gap: 10px; margin-bottom: 40px; flex-wrap: wrap; }
.filter-btn {
  padding: 7px 18px; border: 1px solid var(--border); border-radius: 4px;
  font-family: 'Jost', sans-serif; font-size: 0.8rem; font-weight: 600;
  color: var(--text-muted); background: transparent; cursor: pointer; transition: all 0.2s; letter-spacing: 0.04em;
}
.filter-btn:hover,
.filter-btn.active { border-color: var(--gold); color: var(--gold); background: rgba(201,168,76,0.08); }

/* ── PARTNER / GENERIC LOGIN ── */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--dark); padding: 100px 20px 40px;
  background-image: radial-gradient(ellipse at 30% 60%, rgba(201,168,76,0.05) 0%, transparent 50%);
}

/* Login page with hero animation — reuses .hero system */
.login-hero {
  min-height: 100vh !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 80px 20px 20px;
}
.login-hero .hero-bg {
  background:
    radial-gradient(ellipse at 25% 50%, rgba(201,168,76,0.07) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 30%, rgba(0,168,157,0.07) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 90%, rgba(240,73,62,0.04) 0%, transparent 50%);
}

.login-box {
  position: relative; z-index: 2;
  background: rgba(22,22,32,0.88); border: 1px solid var(--border); border-radius: 8px;
  padding: 48px 44px; width: 100%; max-width: 440px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ── ULTIMATE MEMBER FORM OVERRIDES (partner login) ── */
/* Hide UM's own form header — we supply our own title above */
.um-login-wrap .um .um-form-title,
.um-login-wrap .um .um-header,
.um-login-wrap .um-col-1 > .um-field:first-child .um-field-label:empty { display: none; }

/* Dark inputs */
.um-login-wrap .um input[type="text"],
.um-login-wrap .um input[type="password"],
.um-login-wrap .um input[type="email"] {
  background: var(--dark-3) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 4px !important;
  padding: 10px 14px !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 0.9rem !important;
}
.um-login-wrap .um input[type="text"]:focus,
.um-login-wrap .um input[type="password"]:focus,
.um-login-wrap .um input[type="email"]:focus {
  border-color: var(--gold) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(201,168,76,0.15) !important;
}

/* Field labels */
.um-login-wrap .um .um-field-label label {
  color: var(--text-muted) !important;
  font-size: 0.82rem !important;
  font-family: 'Jost', sans-serif !important;
  font-weight: 500 !important;
}

/* Gold login button */
.um-login-wrap .um .um-button,
.um-login-wrap .um input[type="submit"] {
  background: var(--gold) !important;
  color: var(--dark) !important;
  border: none !important;
  border-radius: 4px !important;
  font-family: 'Jost', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.04em !important;
  padding: 13px 30px !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}
.um-login-wrap .um .um-button:hover,
.um-login-wrap .um input[type="submit"]:hover {
  background: var(--gold-light) !important;
}

/* Checkbox + remember me */
.um-login-wrap .um .um-field-checkbox label,
.um-login-wrap .um .um-field-checkbox { color: var(--text-muted) !important; font-size: 0.82rem !important; }

/* Forgot password link */
.um-login-wrap .um .um-lost-password a {
  color: var(--gold) !important; font-size: 0.8rem !important; text-decoration: none !important;
}
.um-login-wrap .um .um-lost-password a:hover { color: var(--gold-light) !important; }

/* Remove UM's own box-shadow / card wrapper */
.um-login-wrap .um { box-shadow: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important; }
.login-logo { font-size: 1.6rem; font-weight: 700; color: var(--gold); margin-bottom: 8px; }
.login-title { font-size: 1.2rem; font-weight: 700; color: var(--white); margin-bottom: 4px; }
.login-sub { font-size: 0.84rem; color: var(--text-muted); margin-bottom: 32px; }
.login-forgot { font-size: 0.78rem; color: var(--gold); text-decoration: none; float: right; margin-top: -14px; margin-bottom: 20px; display: block; }
.login-forgot:hover { color: var(--gold-light); }
.login-footer { text-align: center; margin-top: 24px; font-size: 0.8rem; color: var(--text-muted); }
.login-footer a { color: var(--gold); text-decoration: none; }

/* ── BREADCRUMB ── */
.breadcrumb { padding: 12px 60px; background: var(--dark-2); border-bottom: 1px solid var(--border); }
.breadcrumb a { color: var(--gold); text-decoration: none; font-size: 0.8rem; }
.breadcrumb span { color: var(--text-muted); font-size: 0.8rem; margin: 0 6px; }
.breadcrumb .current { color: var(--text-muted); font-size: 0.8rem; }

/* ── FAQ ── */
.faq-item { border-bottom: 1px solid var(--border); padding: 22px 0; }
.faq-q { font-size: 0.98rem; font-weight: 600; color: var(--white); margin-bottom: 10px; }
.faq-a { font-size: 0.88rem; line-height: 1.7; color: var(--text-muted); }

/* ── STUB PAGES ── */
.stub {
  min-height: 50vh; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 16px; padding: 120px 60px 60px; text-align: center;
}
.stub h1 { font-size: 1.8rem; color: var(--white); }
.stub p { color: var(--text-muted); font-size: 0.95rem; }

/* ── GENERIC PAGE CONTENT ── */
.page-content { padding: 60px; max-width: 900px; margin: 0 auto; }
.page-content h1, .page-content h2, .page-content h3 { color: var(--white); margin-bottom: 12px; }
.page-content p { font-size: 0.95rem; line-height: 1.78; color: var(--text-muted); margin-bottom: 18px; }
.page-content a { color: var(--gold); text-decoration: none; }
.page-content a:hover { color: var(--gold-light); }

/* ── FOOTER ── */
#site-footer { background: var(--dark-2); border-top: 1px solid var(--border); }
.footer-top {
  display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 40px;
  padding: 48px 60px 36px; border-bottom: 1px solid var(--border);
}
.footer-logo { font-size: 1.5rem; font-weight: 700; color: var(--gold); margin-bottom: 6px; text-decoration: none; display: block; letter-spacing: 0.05em; }
.footer-tagline { font-size: 0.8rem; color: var(--text-muted); letter-spacing: 0.04em; }
.footer-desc { font-size: 0.78rem; color: var(--text-muted); margin-top: 8px; line-height: 1.5; max-width: 220px; }

.footer-nav { display: flex; align-items: center; justify-content: center; }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: center; }
.footer-nav li { margin: 0; padding: 0; list-style: none; }
.footer-nav a { color: var(--text-muted); text-decoration: none; font-size: 0.84rem; transition: color 0.2s; }
.footer-nav a:hover { color: var(--gold); }

.footer-right { text-align: right; }
.footer-phone { font-size: 0.95rem; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.footer-linkedin { font-size: 0.82rem; color: var(--text-muted); }
.footer-linkedin a { color: var(--gold); text-decoration: none; }
.footer-linkedin a:hover { color: var(--gold-light); }
.footer-bottom { padding: 20px 60px; text-align: center; }
.footer-bottom p { color: var(--text-muted); font-size: 0.78rem; font-weight: 500; margin-bottom: 4px; }
.footer-tm { color: rgba(255,255,255,0.2); font-size: 0.72rem; font-style: italic; }

/* ── FAQ ── */
.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 0; }
.faq-item { border-bottom: 1px solid var(--border); padding: 28px 0; }
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-q { font-size: 1.05rem; font-weight: 600; color: var(--white); margin-bottom: 12px; }
.faq-a { font-size: 1rem; color: var(--text-muted); line-height: 1.75; }

/* ── WORDPRESS ALIGNMENT ── */
.alignfull  { width: 100vw; margin-left: calc(50% - 50vw); }
.alignwide  { max-width: 1200px; width: 100%; margin-left: auto; margin-right: auto; }
.aligncenter { text-align: center; }

/* ── LEADERSHIP TEAM BIOS ── */
.team-grid-full {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px 32px;
}
.team-card-full {
  background: var(--dark-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: border-color 0.2s;
}
.team-card-full:hover { border-color: var(--gold); }
.team-card-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.team-card-header .team-avatar {
  margin: 0;
  flex-shrink: 0;
}
.team-bio { color: var(--text-muted); font-size: 1rem; line-height: 1.75; }
.team-bio p { margin: 0 0 12px; }
.team-bio p:last-child { margin-bottom: 0; }

/* ── TESTIMONIALS ── */
.testimonials-grid {
  columns: 2;
  column-gap: 32px;
}
.testimonial-card {
  background: var(--dark-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  break-inside: avoid;
  margin-bottom: 32px;
}
.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: 16px;
  left: 24px;
  font-size: 4rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.3;
  font-family: Georgia, serif;
}
.testimonial-quote {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.75;
  padding-top: 28px;
}
.testimonial-quote p { margin: 0 0 12px; }
.testimonial-quote p:last-child { margin-bottom: 0; }
.testimonial-author {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.testimonial-role {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.5;
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .split { grid-template-columns: 1fr; gap: 40px; }
  .iceberg { grid-template-columns: 1fr; }
  .iceberg-text { padding: 40px; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-top { grid-template-columns: 1fr; text-align: center; }
  .footer-right { text-align: center; }
  .footer-nav { justify-content: center; }
  .footer-nav ul { justify-content: center; }
}

@media (max-width: 768px) {
  #site-header { padding: 0 24px; }
  #site-header nav { display: none; flex-direction: column; align-items: flex-start; }
  #site-header nav.open { display: flex; position: absolute; top: 80px; left: 0; right: 0; background: rgba(14,14,18,0.98); padding: 20px 24px; border-bottom: 1px solid var(--border); gap: 16px; }
  /* Override desktop align-items:center + use gap for consistent spacing */
  #site-header nav ul { flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; }
  /* Contact + Partner Login — no extra margin, gap on parent handles spacing */
  #site-header nav > a { display: block; width: 100%; font-size: 0.9rem; margin: 0; }
  .nav-toggle { display: block; }
  /* Anim toggle stays visible on mobile — compact size to fit header */
  .header-actions .anim-toggle { min-width: 0; padding: 5px 10px; font-size: 0.72rem; }

  .hero-content { padding: 110px 24px 60px; }
  .hero-content h1 { font-size: 2rem; }
  .page-hero .hero-content h1 { white-space: normal; }
  .hero-content p { white-space: normal; }
  .hero-sub-headline { white-space: normal; font-size: 1.3rem; }

  .section { padding: 60px 24px; }
  .cards { grid-template-columns: 1fr; }
  .wp-grid { grid-template-columns: 1fr; }
  .wp-full-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .team-grid-full { grid-template-columns: 1fr; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .testimonials-grid { columns: 1; }
  .industry-grid { grid-template-columns: 1fr 1fr; }
  .stats-bar { grid-template-columns: 1fr; }
  .stat { border-right: none; border-bottom: 1px solid var(--border); }
  .stat:last-child { border-bottom: none; }

  .breadcrumb { padding: 12px 24px; }
  .footer-top { padding: 40px 24px 28px; }
  .footer-bottom { padding: 20px 24px; }
  .cta-band { padding: 60px 24px; }
  .login-box { padding: 32px 24px; }
}

@media (max-width: 480px) {
  .hero-content h1 { font-size: 1.7rem; }
  .team-grid { grid-template-columns: 1fr; }
  .industry-grid { grid-template-columns: 1fr; }
  .hero-buttons { flex-direction: column; align-items: flex-start; }
  .cards { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   THEME TOGGLE BUTTON
   ═══════════════════════════════════════════════════════════ */
.mode-toggle {
  background: none;
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 20px;
  padding: 6px 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  transition: border-color 0.2s, color 0.2s;
  flex-shrink: 0;
  min-width: 52px;
}
.mode-toggle:hover { border-color: var(--gold); color: var(--gold); }
.mode-toggle-icon { font-size: 0.9rem; line-height: 1; display: inline-block; width: 16px; text-align: center; }

/* Dark mode (default): show sun, hide moon */
html:not(.light-mode) .mode-icon-moon { display: none; }
/* Light mode: show moon, hide sun */
html.light-mode .mode-icon-sun { display: none; }

@media (max-width: 768px) {
  .mode-toggle { padding: 5px 10px; font-size: 0.72rem; }
}

/* ── HEADER ACTIONS GROUP ── */
.header-actions {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.anim-toggle {
  background: none;
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 20px;
  padding: 6px 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  transition: border-color 0.2s, color 0.2s;
  flex-shrink: 0;
  min-width: 100px;
}
.anim-toggle:hover { border-color: var(--aqua); color: var(--aqua); }
/* anim-toggle visible on mobile — see mobile media block above */

/* ═══════════════════════════════════════════════════════════
   HERO ANIMATION SYSTEM  (html[data-hero-anim="..."])
   ═══════════════════════════════════════════════════════════ */

/* — OFF — */
html[data-hero-anim="off"] .hero-grid { display: none; }

/* — PARTICLES / STREAM — canvas injected by JS — */
html[data-hero-anim="particles"] .hero-grid,
html[data-hero-anim="stream"]    .hero-grid { position: absolute; inset: 0; overflow: hidden; }

/* — RADAR — */
/* Rings — SVG circles, fill:none so no opacity accumulation */
html[data-hero-anim="radar"] .hero-grid::after {
  content: '';
  position: absolute;
  width: 800px; height: 800px;
  right: -120px; top: 50%;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Ccircle cx='400' cy='400' r='80'  fill='none' stroke='rgba(201,168,76,0.35)' stroke-width='1'/%3E%3Ccircle cx='400' cy='400' r='160' fill='none' stroke='rgba(201,168,76,0.26)' stroke-width='1'/%3E%3Ccircle cx='400' cy='400' r='240' fill='none' stroke='rgba(201,168,76,0.18)' stroke-width='1'/%3E%3Ccircle cx='400' cy='400' r='320' fill='none' stroke='rgba(201,168,76,0.11)' stroke-width='1'/%3E%3Ccircle cx='400' cy='400' r='395' fill='none' stroke='rgba(201,168,76,0.06)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat; background-position: center;
  border-radius: 50%;
  overflow: hidden;
}
/* Sweep — a circle the same size, rotating around its own center */
html[data-hero-anim="radar"] .hero-grid::before {
  content: '';
  position: absolute;
  width: 800px; height: 800px;
  right: -120px; top: 50%;
  transform: translateY(-50%) rotate(0deg);
  border-radius: 50%;
  overflow: hidden;
  background: conic-gradient(from 0deg, rgba(201,168,76,0.28) 0deg, transparent 55deg);
  animation: hero-radar 8s linear infinite;
}
@keyframes hero-radar {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}

/* — HEX GRID — */
html[data-hero-anim="hex"] .hero-grid::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg,   transparent, transparent 29px, rgba(0,175,186,0.15) 30px),
    repeating-linear-gradient(60deg,  transparent, transparent 29px, rgba(0,175,186,0.15) 30px),
    repeating-linear-gradient(120deg, transparent, transparent 29px, rgba(0,175,186,0.15) 30px);
}
html[data-hero-anim="hex"] .hero-grid::before {
  content: '';
  position: absolute; width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,175,186,0.16) 0%, transparent 70%);
  top: 50%; left: 60%; transform: translate(-50%,-50%);
  animation: hex-sweep 12s ease-in-out infinite alternate;
}
@keyframes hex-sweep {
  from { transform: translate(-50%,-50%) scale(1);   opacity: 0.6; }
  to   { transform: translate(-30%,-40%) scale(1.3); opacity: 1;   }
}

/* — AURORA — */
html[data-hero-anim="aurora"] .hero-grid::after {
  content: '';
  position: absolute; width: 700px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,175,186,0.13) 0%, transparent 70%);
  top: 10%; left: 40%;
  filter: blur(65px);
  animation: aurora-a 13s ease-in-out infinite alternate;
}
html[data-hero-anim="aurora"] .hero-grid::before {
  content: '';
  position: absolute; width: 500px; height: 350px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(201,168,76,0.10) 0%, transparent 70%);
  top: 40%; left: 55%;
  filter: blur(70px);
  animation: aurora-b 17s ease-in-out infinite alternate;
}
@keyframes aurora-a {
  from { transform: translate(0,0)    scale(1);    opacity: 0.7; }
  to   { transform: translate(80px,40px) scale(1.2); opacity: 1;   }
}
@keyframes aurora-b {
  from { transform: translate(0,0)     scale(1);    opacity: 0.5; }
  to   { transform: translate(-60px,30px) scale(1.15); opacity: 0.9; }
}

/* — GRID SWEEP (circuit) — */
html[data-hero-anim="circuit"] .hero-grid::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle, rgba(201,168,76,0.30) 1px, transparent 1px),
    linear-gradient(rgba(201,168,76,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.06) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px, 60px 60px;
}
html[data-hero-anim="circuit"] .hero-grid::before {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(to bottom, transparent, rgba(201,168,76,0.45) 30%, rgba(201,168,76,0.45) 70%, transparent);
  animation: circuit-scan 3.5s ease-in-out infinite;
}
@keyframes circuit-scan {
  0%   { left: -2px; opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════
   LIGHT MODE — html.light-mode overrides
   ═══════════════════════════════════════════════════════════ */

/* ── CSS VARIABLE OVERRIDES ──
   LIGHT THEME COLOR PASS (2026-06): tomato-forward body + teal footer + teal accents.
   RESET TO PLAIN WHITE → `git checkout light-plain-white -- style.css functions.php`
   (git tag light-plain-white = last all-white light mode), then redeploy.
   Manual reset: set the four tokens below back to
   --dark #FFFFFF; --dark-2 #FAFAFA; --dark-3 #FFFFFF; --dark-4 #EDEDED;
   revert #site-footer to `background: var(--dark-2)`, the hero-bg glow + eyebrows
   to teal/tomato as before, and drop the card hover tint. */
html.light-mode {
  --gold:       #F0493E;
  --gold-light: #F57069;
  --gold-dark:  #C43228;
  --aqua:       #008890;
  --dark:       #FAF6F4;  /* warm paper — page + base sections */
  --dark-2:     #FCEDE9;  /* tomato-tinted alternating band */
  --dark-3:     #FFFFFF;  /* cards stay white so they lift off the page */
  --dark-4:     #EEDAD5;  /* deeper warm chip/avatar tint */
  --text:       #1A1A1A;
  --text-muted: #666666;
  --white:      #1A1A1A;
  --border:     rgba(0,0,0,0.09);
}

/* ── HEADINGS (use var(--white) which stays white — override broadly) ── */
html.light-mode h1,
html.light-mode h2,
html.light-mode h3,
html.light-mode h4,
html.light-mode h5 { color: var(--text); }

/* Non-heading elements that also use var(--white) for text */
html.light-mode .card-title,
html.light-mode .team-name,
html.light-mode .login-title { color: var(--text); }

/* Cards — white background + shadow for depth instead of gray fill */
html.light-mode .card,
html.light-mode .wp-card,
html.light-mode .wp-full-card,
html.light-mode .team-card-full,
html.light-mode .testimonial-card,
html.light-mode .industry-card,
html.light-mode .portal-card,
html.light-mode .portal-team-card {
  background: #FFFFFF;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
  border-color: rgba(0,0,0,0.08);
}

/* Restore hover trim in light mode (higher specificity needed to override above) */
html.light-mode .card:hover,
html.light-mode .wp-card:hover,
html.light-mode .wp-full-card:hover,
html.light-mode .team-card-full:hover,
html.light-mode .industry-card:hover,
html.light-mode .portal-card:hover {
  border-color: var(--gold);
  background: #FFF7F4;
}

/* ── Tier 3 accents (light mode): teal eyebrows ── */
html.light-mode .hero-eyebrow { color: var(--aqua); }
html.light-mode .hero-eyebrow::before { background: var(--aqua); }


/* Gold/accent spans inside headings stay as accent color */
html.light-mode .section h2 span,
html.light-mode .hero-content h1 em { color: var(--gold); }

/* ── HEADER ── */
html.light-mode #site-header {
  background: rgba(255,255,255,0);
}
html.light-mode #site-header.scrolled {
  background: rgba(255,255,255,0.97);
  border-bottom: 1px solid var(--border);
}
html.light-mode #site-header nav ul li a,
html.light-mode #site-header nav > a {
  color: rgba(26,26,42,0.65);
}
html.light-mode #site-header nav ul li ul {
  background: rgba(255,255,255,0.98);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
html.light-mode #site-header nav ul li ul li a {
  color: rgba(26,26,42,0.65) !important;
}
html.light-mode #site-header nav ul li ul li a:hover {
  color: var(--gold) !important;
  background: rgba(240,73,62,0.06);
}
/* Nav pill — light mode */
html.light-mode #site-header nav {
  background: rgba(240,240,248,0.82);
  border-color: rgba(26,26,42,0.12);
}
html.light-mode #site-header nav ul li a:hover,
html.light-mode #site-header nav > a:hover {
  background: rgba(26,26,42,0.07);
  color: var(--gold-dark);
}
html.light-mode #site-header nav ul li.current-menu-item > a,
html.light-mode #site-header nav ul li.current-menu-parent > a,
html.light-mode #site-header nav ul li.current-menu-ancestor > a,
html.light-mode #site-header nav > a.active {
  background: rgba(26,26,42,0.07);
  color: var(--gold-dark);
}

/* Mega-menu — light mode */
html.light-mode .mega-menu {
  background: rgba(252,252,255,0.98);
  border-color: rgba(26,26,42,0.1);
  box-shadow: 0 24px 60px rgba(0,0,0,0.12);
}
html.light-mode .mega-col {
  border-right-color: rgba(26,26,42,0.08);
}
html.light-mode .mega-col-header {
  color: rgba(26,26,42,0.9);
  border-bottom-color: rgba(26,26,42,0.1);
}
html.light-mode .mega-col a {
  color: rgba(26,26,42,0.55);
}
html.light-mode .mega-col a:hover { color: var(--gold-dark); }

html.light-mode .mode-toggle {
  border-color: rgba(26,26,42,0.2);
}

/* ── MOBILE NAV OPEN ── */
html.light-mode #site-header nav.open {
  background: rgba(255,255,255,0.98);
  border-bottom: 1px solid var(--border);
}

/* ── HERO ── */
/* Default glow (off, aurora, hex, radar, data stream) = aqua */
html.light-mode .hero-bg {
  background:
    radial-gradient(ellipse at 20% 60%, rgba(240,73,62,0.16) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(240,73,62,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(240,73,62,0.09) 0%, transparent 50%);
}
/* Light mode: tomato BG override for Particles and Grid Sweep */
html.light-mode[data-hero-anim="particles"] .hero-bg,
html.light-mode[data-hero-anim="circuit"]   .hero-bg {
  background:
    radial-gradient(ellipse at 20% 60%, rgba(240,73,62,0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(240,73,62,0.16) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(240,73,62,0.12) 0%, transparent 50%);
}
/* Light mode animation scopes */
html.light-mode[data-hero-anim="radar"] .hero-grid::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Ccircle cx='400' cy='400' r='80'  fill='none' stroke='rgba(0,120,130,0.35)' stroke-width='1'/%3E%3Ccircle cx='400' cy='400' r='160' fill='none' stroke='rgba(0,120,130,0.26)' stroke-width='1'/%3E%3Ccircle cx='400' cy='400' r='240' fill='none' stroke='rgba(0,120,130,0.18)' stroke-width='1'/%3E%3Ccircle cx='400' cy='400' r='320' fill='none' stroke='rgba(0,120,130,0.11)' stroke-width='1'/%3E%3Ccircle cx='400' cy='400' r='395' fill='none' stroke='rgba(0,120,130,0.06)' stroke-width='1'/%3E%3C/svg%3E");
}
html.light-mode[data-hero-anim="radar"] .hero-grid::before {
  background: conic-gradient(from 0deg, rgba(0,120,130,0.30) 0deg, transparent 55deg);
}
html.light-mode[data-hero-anim="hex"] .hero-grid::after {
  background-image:
    repeating-linear-gradient(0deg,   transparent, transparent 29px, rgba(0,120,130,0.12) 30px),
    repeating-linear-gradient(60deg,  transparent, transparent 29px, rgba(0,120,130,0.12) 30px),
    repeating-linear-gradient(120deg, transparent, transparent 29px, rgba(0,120,130,0.12) 30px);
}
/* Hex: aqua grid lines (kept), tomato pulse blob */
html.light-mode[data-hero-anim="hex"] .hero-grid::before {
  background: radial-gradient(circle, rgba(240,73,62,0.14) 0%, transparent 70%);
}
/* Grid Sweep: aqua dots + tomato scan line */
html.light-mode[data-hero-anim="circuit"] .hero-grid::after {
  background-image:
    radial-gradient(circle, rgba(0,120,130,0.28) 1px, transparent 1px),
    linear-gradient(rgba(0,120,130,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,120,130,0.06) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px, 60px 60px;
}
html.light-mode[data-hero-anim="circuit"] .hero-grid::before {
  background: linear-gradient(to bottom, transparent, rgba(240,73,62,0.42) 30%, rgba(240,73,62,0.42) 70%, transparent);
}
/* Aurora: aqua primary + tomato secondary (already correct — keep) */
html.light-mode[data-hero-anim="aurora"] .hero-grid::after {
  background: radial-gradient(ellipse, rgba(0,120,130,0.15) 0%, transparent 70%);
}
html.light-mode[data-hero-anim="aurora"] .hero-grid::before {
  background: radial-gradient(ellipse, rgba(240,73,62,0.12) 0%, transparent 70%);
}
html.light-mode .anim-toggle { border-color: rgba(0,0,0,0.18); }

/* ── BUTTONS ── */
html.light-mode .btn-ghost {
  color: rgba(26,26,42,0.6);
  border-bottom-color: rgba(26,26,42,0.25);
}
html.light-mode .btn-ghost:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
html.light-mode .btn-outline-dark {
  border-color: rgba(26,26,42,0.25);
  color: rgba(26,26,42,0.65);
}
html.light-mode .btn-outline-dark:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* ── ICEBERG SECTION ── */
html.light-mode .iceberg-wrap {
  background: linear-gradient(180deg, #dde8f0 0%, #ccdde8 50%, #bbcfdf 100%);
}

/* ── WHITEPAPERS SECTION ── */
html.light-mode .section-wp {
  background: linear-gradient(135deg, #edf2f7 0%, #e3ecf4 100%);
}

/* ── CTA BAND ── */
html.light-mode .cta-band::before {
  background: radial-gradient(ellipse at center, rgba(240,73,62,0.06) 0%, transparent 65%);
}

/* ── FOOTER — deep-teal anchor (light mode) ── */
html.light-mode #site-footer {
  background: #0F5E63;
  border-top-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.82);
}
html.light-mode #site-footer .footer-logo { color: #FFFFFF; }
html.light-mode #site-footer .footer-tagline,
html.light-mode #site-footer .footer-phone,
html.light-mode #site-footer .footer-nav a { color: rgba(255,255,255,0.82); }
html.light-mode #site-footer .footer-nav a:hover { color: var(--gold-light); }
html.light-mode #site-footer .footer-tm { color: rgba(255,255,255,0.5); }

/* ── PARTNER LOGIN ── */
html.light-mode .login-wrap {
  background-image: radial-gradient(ellipse at 30% 60%, rgba(240,73,62,0.05) 0%, transparent 50%);
}

/* ── FILTER BUTTONS ── */
html.light-mode .filter-btn:hover,
html.light-mode .filter-btn.active {
  background: rgba(240,73,62,0.08);
}

/* ── FORMS ── */
html.light-mode .form-group input,
html.light-mode .form-group textarea,
html.light-mode .form-group select {
  background: var(--dark-3);
  color: var(--text);
  border-color: var(--border);
}
html.light-mode .form-group input::placeholder,
html.light-mode .form-group textarea::placeholder { color: var(--text-muted); }

/* ═══════════════════════════════════════════════════════════
   NAV PILL + MEGA MENU  (feature/mega-menu-nav)
   ═══════════════════════════════════════════════════════════ */

/* ── NAV PILL ── */
#site-header nav {
  background: rgba(22,22,32,0.78);
  border: 1px solid rgba(201,168,76,0.14);
  border-radius: 40px;
  padding: 5px 6px;
  gap: 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* Remove ul gap — spacing lives on the anchor padding now */
#site-header nav ul { gap: 0; }

/* Center the nav pill on the page (desktop only — mobile keeps its dropdown).
   Grid with equal 1fr side columns forces the nav (auto, center) to the exact
   viewport center regardless of logo / actions widths. */
@media (min-width: 769px) {
  #site-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  #site-header > .logo { justify-self: start; }
  #site-header > nav { justify-self: center; }
  #site-header > .header-actions { justify-self: end; }
}

/* All nav anchors: pill-item padding + rounded hover */
#site-header nav ul li a,
#site-header nav > a {
  padding: 7px 16px !important;
  border-radius: 30px;
  transition: background 0.2s, color 0.2s !important;
}
#site-header nav ul li a:hover,
#site-header nav > a:hover {
  background: rgba(201,168,76,0.10);
  color: var(--gold);
}

/* Active/current page: gold pill, no underline */
#site-header nav ul li.current-menu-item > a,
#site-header nav ul li.current-menu-parent > a,
#site-header nav ul li.current-menu-ancestor > a,
#site-header nav > a.active {
  color: var(--gold);
  background: rgba(201,168,76,0.10);
  border-bottom: none !important;
  padding-bottom: 7px !important;
}

/* Suppress old per-item dropdowns — mega-menu handles everything */
#site-header nav ul li:hover > ul { display: none !important; }

/* ── MEGA MENU PANEL ── */
.mega-menu {
  position: fixed;
  top: 88px;               /* just below header, small gap */
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: min(1280px, calc(100vw - 64px));
  background: rgba(14,14,20,0.97);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 36px 8px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  z-index: 199;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  /* Hidden state */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.mega-menu.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.mega-col {
  padding: 0 28px;
  border-right: 1px solid rgba(201,168,76,0.08);
}
.mega-col:last-child { border-right: none; }

.mega-col-header {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.mega-col a {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  text-decoration: none;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 7px 0;
  font-weight: 500;
  transition: color 0.15s;
  font-family: 'Jost', sans-serif;
}
.mega-col a:hover { color: var(--gold); }

/* ── MOBILE: strip pill, hide mega ── */
@media (max-width: 768px) {
  #site-header nav {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  #site-header nav ul li a,
  #site-header nav > a {
    padding: 0 !important;
    border-radius: 0 !important;
  }
  #site-header nav ul li.current-menu-item > a,
  #site-header nav > a.active {
    background: none !important;
    border-bottom: 2px solid var(--gold) !important;
    padding-bottom: 2px !important;
  }
  .mega-menu { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   DEMO — CENTERED HEROES  (branch: demo/centered-heroes)
   To revert: git checkout main -- style.css  then redeploy
   ═══════════════════════════════════════════════════════════ */

/* Main hero content block */
.hero-content {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
/* Hide the decorative left-side gold rule on the eyebrow */
.hero-eyebrow { justify-content: center; }
.hero-eyebrow::before { display: none; }
/* Allow text to wrap when centered */
.hero-content p,
.hero-sub-headline { white-space: normal; }
/* Center the CTA buttons */
.hero-buttons { justify-content: center; }

/* Page-level heroes (interior pages) */
.page-hero .hero-content h1 { white-space: normal; }

/* Partner portal hero — stack vertically and center */
.portal-hero-inner {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.portal-meta { align-items: center; }

/* ── USER AVATAR + DROPDOWN ── */
.user-avatar-wrap {
  position: relative;
}
.user-avatar {
  /* Pill, matching .mode-toggle / .anim-toggle beside it — gold marks it as the
     account control rather than a display preference. */
  border-radius: 20px;
  padding: 6px 13px;
  line-height: 1.35;
  background: rgba(201,168,76,0.15);
  border: 1.5px solid var(--gold);
  color: var(--gold);
  font-family: 'Jost', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
}
.user-avatar:hover,
.user-avatar-wrap.open .user-avatar {
  background: rgba(201,168,76,0.28);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.18);
}

/* Light mode avatar */
html.light-mode .user-avatar {
  background: rgba(240,73,62,0.10);
  border-color: var(--gold);
  color: var(--gold);
}
html.light-mode .user-avatar:hover,
html.light-mode .user-avatar-wrap.open .user-avatar {
  background: rgba(240,73,62,0.20);
  box-shadow: 0 0 0 3px rgba(240,73,62,0.15);
}

/* Dropdown panel */
.user-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 200px;
  background: rgba(14,14,20,0.97);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 0 8px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 300;
}
.user-avatar-wrap.open .user-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Light mode dropdown */
html.light-mode .user-dropdown {
  background: rgba(252,252,255,0.98);
  border-color: rgba(26,26,42,0.1);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}

.user-dropdown-name {
  padding: 0 16px 2px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}
.user-dropdown-company {
  padding: 0 16px 10px;
  font-size: 0.75rem;
  color: var(--gold);
  letter-spacing: 0.03em;
}
.user-dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 0 0 6px;
}
.user-dropdown-link {
  display: block;
  padding: 7px 16px;
  font-size: 0.82rem;
  color: var(--text);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.user-dropdown-link:hover {
  background: rgba(201,168,76,0.08);
  color: var(--gold);
}
html.light-mode .user-dropdown-link:hover {
  background: rgba(240,73,62,0.07);
  color: var(--gold);
}
.user-dropdown-signout {
  color: var(--text-muted);
  margin-top: 2px;
}
.user-dropdown-signout:hover {
  color: var(--tomato) !important;
  background: rgba(240,73,62,0.07) !important;
}

/* Guests get a real, clickable login pill in the same slot as the logged-in
   avatar (superseded the old invisible-spacer treatment). */
.user-avatar-wrap--guest .user-avatar {
  cursor: pointer;
}

/* Mobile — keep avatar visible but compact */
@media (max-width: 768px) {
  .user-avatar { width: 30px; height: 30px; font-size: 0.65rem; }
  .user-dropdown { right: 0; min-width: 180px; }
}

/* ═══════════════════════════════════════════════════════════
   HEROIC KNOWLEDGE BASE — theme integration (dark + light)
   All colors use theme tokens, so light-mode flips automatically.
   ═══════════════════════════════════════════════════════════ */

/* ── Layout containers ── */
.hkb-container { max-width: 1140px; margin: 0 auto; padding: 0 60px; }
/* Force theme background over the plugin's hardcoded white */
body.hkb-template-archive,
body.hkb-template-single,
body.hkb-template-category { background: var(--dark) !important; }
.hkb-mainpage-wrapper,
.hkb-fullwcontainer { background: var(--dark) !important; }
.hkb-mainpage-wrapper { padding: 48px 0 72px; }
.hkb-mainpage--sidebarright {
  display: grid; grid-template-columns: 1fr 300px; gap: 48px; align-items: start;
}
.hkb-mainpage__main { min-width: 0; }

/* ── Search header band (mirrors the page-hero) ── */
.hkb-searchbox-wrapper,
.hkb-searchbox-wrapper[data-hkb-header-type] {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 60%, rgba(30,75,200,0.30) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(30,75,200,0.22) 0%, transparent 50%),
    var(--dark) !important;
  border-bottom: 1px solid var(--border);
  padding: 190px 0 70px !important;
}
/* Animation layer injected by theme.js — sits behind the search content */
.hkb-searchbox-wrapper .hero-grid { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.hkb-searchbox-wrapper > .hkb-container { position: relative; z-index: 2; }
html.light-mode .hkb-searchbox-wrapper,
html.light-mode .hkb-searchbox-wrapper[data-hkb-header-type] {
  background:
    radial-gradient(ellipse at 20% 60%, rgba(0,136,144,0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(0,136,144,0.10) 0%, transparent 50%),
    var(--dark) !important;
}
.hkb-searchbox--center { text-align: center; }
.hkb-searchbox__title {
  font-family: 'Jost', sans-serif;
  font-size: 2.3rem; font-weight: 700; color: var(--white) !important;
  margin: 0 0 24px; line-height: 1.15;
}
.hkb-site-search {
  position: relative; display: flex; max-width: 620px; margin: 0 auto;
}

/* ── Two-column hero layout (blurb left, search right) ── */
.hkb-searchbox--hero {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px;
  align-items: center; text-align: left;
  /* Release Heroic's ~620px search-box cap so both columns fill the container */
  max-width: none !important; width: 100%; margin: 0 !important;
}
.hkb-searchbox--hero .hkb-hero-left { text-align: left; }
.hkb-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.72rem; font-weight: 700; color: var(--gold);
  letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 18px;
}
.hkb-hero-eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--gold); }
.hkb-searchbox--hero .hkb-searchbox__title {
  text-align: left; font-size: 2.6rem; margin: 0 0 16px;
}
.hkb-hero-blurb {
  font-size: 1rem; color: var(--text-muted); line-height: 1.7;
  font-weight: 300; margin: 0; max-width: 92%;
}
.hkb-searchbox--hero .hkb-site-search { max-width: none; width: 100%; margin: 0; }
.hkb-site-search__field {
  flex: 1; font-family: 'Jost', sans-serif; font-size: 0.95rem;
  color: var(--text) !important; background: var(--dark-4) !important;
  border: 1px solid var(--border) !important; border-radius: 6px 0 0 6px !important;
  padding: 14px 18px; outline: none; transition: border-color 0.2s; box-shadow: none !important;
}
.hkb-site-search__field::placeholder { color: var(--text-muted); }
.hkb-site-search__field:focus { border-color: var(--gold) !important; }
.hkb-site-search__button {
  font-family: 'Jost', sans-serif; font-size: 0.9rem; font-weight: 700;
  letter-spacing: 0.04em; color: var(--dark) !important; background: var(--gold) !important;
  border: none !important; border-radius: 0 6px 6px 0 !important; padding: 0 28px; cursor: pointer;
  transition: background 0.2s;
}
.hkb-site-search__button:hover { background: var(--gold-light) !important; }
.hkb-site-search__icon { display: none; }
/* Visually hide screen-reader-only labels (e.g. the "Search For" label) */
.hkb-screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Archive: section label (refined eyebrow, no hard rule) ── */
.hkb-archivetitle {
  font-family: 'Jost', sans-serif; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold) !important;
  margin: 0 0 28px; padding: 0; border: none;
}

/* ── Archive: category grid ──
   Flat themed boxes that match the site-wide .card / .portal-card style:
   solid surface, thin token border, 6px radius, no shadow, gold-border
   lift on hover. Uses theme tokens so it auto-flips in light mode exactly
   like the rest of the site. ── */
.hkb-archive {
  display: grid; gap: 22px; align-items: start;
}
.hkb-archive--two-cols   { grid-template-columns: repeat(2, 1fr); }
.hkb-archive--three-cols { grid-template-columns: repeat(3, 1fr); }
.hkb-category {
  background: var(--dark-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 28px 26px 30px;
  transition: border-color 0.2s, transform 0.2s;
}
.hkb-category:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
}

.hkb-categoryhead { margin-bottom: 14px; }
.hkb-categoryhead__title {
  font-family: 'Jost', sans-serif; font-size: 1.08rem; font-weight: 700;
  margin: 0 0 6px; line-height: 1.3;
}
.hkb-categoryhead__title a { color: var(--white); text-decoration: none; transition: color 0.2s; }
.hkb-categoryhead__title a:hover { color: var(--gold); }
.hkb-categoryhead__count {
  font-size: 0.66rem; font-weight: 700; color: var(--text-muted);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.hkb-categoryhead__description {
  font-size: 0.88rem; color: var(--text-muted); line-height: 1.6; margin-top: 10px;
}

/* ── Archive: article links under each category ── */
.hkb-article-list { list-style: none; margin: 10px 0 0; padding: 0; }
.hkb-article-list li { margin: 0; padding: 0; }
.hkb-article-list a {
  display: block; font-size: 0.9rem; color: var(--text-muted);
  text-decoration: none; padding: 8px 0 8px 18px; position: relative;
  transition: color 0.2s;
}
.hkb-article-list a::before {
  content: '\203A'; position: absolute; left: 2px; color: var(--text-muted);
  font-weight: 700; transition: color 0.2s, transform 0.2s;
}
.hkb-article-list a:hover { color: var(--text); }
.hkb-article-list a:hover::before { color: var(--gold); transform: translateX(2px); }
.hkb-category__view-all {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold); text-decoration: none; transition: gap 0.2s, color 0.2s;
}
.hkb-category__view-all:hover { color: var(--gold-light); gap: 10px; }
.hkb-uncatlist { list-style: none; margin: 0; padding: 0; }

/* ── Archive: clean, uniform category cards ──
   Equal-height flex cards; the whole card links to its category (see theme.js),
   so we drop the noisy single-article lists and pin a uniform "View all" CTA to
   the bottom of every card. ── */
.hkb-archive { align-items: stretch; }
.hkb-archive .hkb-category { display: flex; flex-direction: column; }
.hkb-archive .hkb-article-list { display: none; }
.hkb-categoryhead { margin-bottom: 0; }
.hkb-categoryhead__description { margin-top: 12px; }
.hkb-archive .hkb-category__view-all { margin-top: auto; padding-top: 18px; }
.kb-cat-clickable { cursor: pointer; }
/* Remove the orphaned Uncategorized block from the landing page */
.hkb-template-archive .hkb-uncatlist { display: none; }

/* ── KB landing: site-style cards (custom hkb-archive.php override) ──
   Reuses the global .card look; just makes the card a block-level link and
   adds the full-width Sales & Marketing catch-all. ── */
/* ── KB landing: labeled sections ── */
.kb-section { margin-bottom: 44px; }
.kb-section:last-child { margin-bottom: 0; }
.kb-section-head {
  font-family: 'Jost', sans-serif; font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold) !important;
  margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
}

.kb-cards { margin-top: 0; }
.kb-card { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.kb-card .card-title { transition: color 0.2s; }
.kb-card:hover .card-title { color: var(--gold); }

.kb-cards--wide { grid-template-columns: 1fr; margin-top: 0; }
.kb-card--wide { display: block; }
.kb-card-wide__note { font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; margin: 0 0 12px; }
.kb-card-wide__link { font-size: 0.85rem; font-weight: 600; color: var(--gold); }
.kb-card--wide:hover .kb-card-wide__link { color: var(--gold-light); }

/* ── KB landing: view switcher (Cards ⇄ Index) ── */
.kb-view-toggle {
  display: inline-flex; gap: 2px; margin: 0 0 26px; padding: 3px;
  background: var(--dark-3); border: 1px solid var(--border); border-radius: 999px;
}
.kb-view-btn {
  font-family: 'Jost', sans-serif; font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.02em; color: var(--text-muted); background: transparent;
  border: none; cursor: pointer; padding: 7px 16px; border-radius: 999px; transition: all 0.2s;
}
.kb-view-btn:hover { color: var(--text); }
.kb-view-btn.is-active { background: var(--gold); color: var(--dark); }

/* Show exactly one view; html.kb-view-<name> is set early (anti-flash) + by theme.js. */
.kb-view { display: none; }
html.kb-view-compact .kb-view--compact { display: block; }
html.kb-view-cards   .kb-view--cards   { display: block; }
html.kb-view-sidebar .kb-view--sidebar { display: block; }
html.kb-view-index   .kb-view--index   { display: block; }

/* ── KB landing: Index layout (link-dense, flows in columns) ── */
.kb-index-grid { columns: 3; column-gap: 40px; }
.kb-index-cat { break-inside: avoid; margin: 0 0 22px; }
.kb-index-cat-title { font-family: 'Jost', sans-serif; font-size: 1rem; font-weight: 600; margin: 0 0 8px; }
.kb-index-cat-title a { color: var(--white); text-decoration: none; transition: color 0.2s; }
.kb-index-cat-title a:hover { color: var(--gold); }
.kb-index-list { list-style: none; margin: 0; padding: 0; }
.kb-index-list li { margin: 0; }
.kb-index-list a {
  display: block; font-size: 0.875rem; line-height: 1.45; color: var(--text-muted);
  text-decoration: none; padding: 3px 0; transition: color 0.15s;
}
.kb-index-list a:hover { color: var(--gold); }
.kb-index-all { display: inline-block; margin-top: 6px; font-size: 0.78rem; font-weight: 600; color: var(--aqua); text-decoration: none; }
.kb-index-all:hover { color: var(--gold); }
@media (max-width: 1024px) { .kb-index-grid { columns: 2; } }
@media (max-width: 600px)  { .kb-index-grid { columns: 1; } }

/* ── KB view B: rich cards (icon + count + preview + view all) ── */
.kb-rcard { display: flex; flex-direction: column; gap: 14px; }
.kb-rcard-head { display: flex; align-items: center; gap: 14px; }
.kb-rcard-ic {
  width: 44px; height: 44px; flex: none; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(150deg, rgba(201,168,76,0.18), rgba(0,168,157,0.12)); color: var(--gold);
}
.kb-rcard-heat { display: flex; flex-direction: column; }
.kb-rcard-title { font-weight: 700; color: var(--white); font-size: 1.05rem; line-height: 1.2; transition: color 0.2s; }
.kb-rcard:hover .kb-rcard-title { color: var(--gold); }
.kb-rcard-count { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 4px; }
.kb-rcard-list { list-style: none; margin: 0; padding: 0; flex: 1; }
.kb-rcard-list li { font-size: 0.875rem; color: var(--text-muted); line-height: 1.5; padding: 4px 0 4px 16px; position: relative; }
.kb-rcard-list li::before { content: '\203A'; position: absolute; left: 2px; color: var(--gold); font-weight: 700; }
.kb-rcard-all { font-size: 0.8rem; font-weight: 600; color: var(--gold); margin-top: auto; }
.kb-rcard:hover .kb-rcard-all { color: var(--gold-light); }

/* ── KB view C: docs sidebar (landing-scoped) ── */
.kb-docs { display: grid; grid-template-columns: 240px 1fr; gap: 44px; align-items: start; }
.kb-docs-nav { position: sticky; top: 90px; }
.kb-docs-group { margin-bottom: 20px; }
.kb-docs-grouplabel { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.kb-docs-nav ul { list-style: none; margin: 0; padding: 0; }
.kb-docs-nav li a { display: block; font-size: 0.875rem; color: var(--text-muted); text-decoration: none; padding: 4px 0 4px 12px; border-left: 2px solid transparent; transition: color 0.15s, border-color 0.15s; }
.kb-docs-nav li a:hover { color: var(--white); border-left-color: var(--gold); }
.kb-docs-main .kb-section:first-child { margin-top: 0; }
.kb-docs-main .kb-index-grid { columns: 2; }
@media (max-width: 860px) { .kb-docs { grid-template-columns: 1fr; } .kb-docs-nav { position: static; } .kb-docs-main .kb-index-grid { columns: 1; } }
.kb-card-wide__list { list-style: none; margin: 4px 0 0; padding: 0; columns: 2; column-gap: 28px; }
.kb-card-wide__list li {
  font-size: 0.88rem; color: var(--text-muted); line-height: 1.55;
  padding: 5px 0 5px 16px; position: relative; break-inside: avoid;
}
.kb-card-wide__list li::before { content: '\203A'; position: absolute; left: 0; color: var(--gold); font-weight: 700; }
@media (max-width: 768px) {
  .kb-card--wide { grid-template-columns: 1fr; gap: 18px; }
  .kb-card-wide__list { columns: 1; }
}

/* ═══════════════════════════════════════════════════════════
   CATEGORY / TAXONOMY PAGE  (.hkb-template-category)
   ═══════════════════════════════════════════════════════════ */
/* Force dark bg (body class is tax-ht_kb_category / ht-kb, not hkb-template-*) */
body.tax-ht_kb_category,
body.ht-kb,
body.search { background: var(--dark) !important; }

/* Subheader band that holds the search — match the hero band, clear the nav */
.hkb-subheader {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 60%, rgba(30,75,200,0.30) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(30,75,200,0.22) 0%, transparent 50%),
    var(--dark) !important;
  border-bottom: 1px solid var(--border);
  padding: 120px 0 40px !important;
}
html.light-mode .hkb-subheader {
  background:
    radial-gradient(ellipse at 20% 60%, rgba(0,136,144,0.14) 0%, transparent 55%),
    var(--dark) !important;
}
.hkb-subheader .hkb-container { position: relative; z-index: 2; }
.hkb-subheader .hkb-site-search { max-width: 620px; margin: 0 auto; }

/* Category page heading */
.hkb-categoryheader {
  margin: 0 0 28px; padding-bottom: 20px; border-bottom: 1px solid var(--border);
}
.hkb-categoryheader__title {
  font-family: 'Jost', sans-serif; font-size: 1.7rem; font-weight: 700;
  color: var(--white); margin: 0; line-height: 1.2;
}
.hkb-categoryheader__description {
  font-size: 0.95rem; color: var(--text-muted); line-height: 1.6; margin-top: 10px;
}

/* Subcategory list — clean readable rows (not the boxy default) */
.hkb-subcats--two-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 44px; }
.hkb-subcats .hkb-categoryhead { margin: 0; padding: 0; }
.hkb-subcats .hkb-categoryhead__title,
.hkb-subcats__cat-title { font-size: 1.05rem; font-weight: 600; margin: 0 0 4px; line-height: 1.3; }
.hkb-subcats .hkb-categoryhead__title a,
.hkb-subcats__cat-title a { color: var(--text) !important; text-decoration: none; transition: color 0.2s; }
.hkb-subcats .hkb-categoryhead__title a:hover,
.hkb-subcats__cat-title a:hover { color: var(--gold) !important; }
.hkb-subcats .hkb-categoryhead__count {
  font-size: 0.64rem; font-weight: 700; color: var(--text-muted) !important;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.hkb-subcats .hkb-categoryhead__description {
  font-size: 0.86rem; color: var(--text-muted) !important; line-height: 1.6; margin-top: 8px;
}

/* ── Breadcrumb (matches the portal Asset Library crumb trail) ── */
.hkb-breadcrumbs-wrap {
  background: transparent; border-bottom: none;
  padding: 40px 0 4px; /* breathing room below the search band, like the portal */
}
/* (breadcrumb is moved below the subheader by theme.js on all KB pages, so the
   subheader's own 120px top already clears the fixed header — no special case) */
.hkb-breadcrumbs {
  max-width: 1140px; margin: 0 auto; padding: 0 60px;
  font-size: 0.85rem; color: var(--text-muted) !important;
  background: none; list-style: none;
  display: flex; flex-wrap: wrap; align-items: center;
}
.hkb-breadcrumbs li { display: inline-flex; align-items: center; margin: 0; padding: 0; }
.hkb-breadcrumbs li::before { content: none; } /* kill any default list marker */
.hkb-breadcrumbs li:not(:last-child)::after {
  content: '\203A'; /* › */ margin: 0 10px; color: var(--text-muted); font-weight: 700;
}
.hkb-breadcrumbs li:last-child { color: var(--text-muted) !important; } /* current page, muted — matches portal */
.hkb-breadcrumbs meta { display: none; }
.hkb-breadcrumbs a { color: var(--gold) !important; text-decoration: none; }
.hkb-breadcrumbs a:hover { color: var(--gold-light) !important; }

.hkb-article__title {
  font-family: 'Jost', sans-serif; font-size: 2rem; font-weight: 700;
  color: var(--white); line-height: 1.2; margin: 0 0 28px;
}
.hkb-article__content { font-size: 0.98rem; line-height: 1.75; color: var(--text); }
.hkb-article__content h2,
.hkb-article__content h3,
.hkb-article__content h4 {
  font-family: 'Jost', sans-serif; color: var(--white); font-weight: 700;
  margin: 32px 0 12px; line-height: 1.3;
}
.hkb-article__content h2 { font-size: 1.4rem; }
.hkb-article__content h3 { font-size: 1.15rem; }
.hkb-article__content h4 { font-size: 1rem; }
.hkb-article__content p { margin: 0 0 16px; }
.hkb-article__content a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.hkb-article__content a:hover { color: var(--gold-light); }
.hkb-article__content ul,
.hkb-article__content ol { margin: 0 0 16px; padding-left: 24px; }
.hkb-article__content li { margin-bottom: 6px; }
.hkb-article__content img {
  max-width: 100%; height: auto; border-radius: 6px;
  border: 1px solid var(--border); margin: 12px 0;
}
.hkb-article__content code {
  font-family: Consolas, Monaco, monospace; font-size: 0.88em;
  background: var(--dark-4); color: var(--gold);
  padding: 2px 6px; border-radius: 3px;
}
.hkb-article__content pre {
  background: var(--dark-4); border: 1px solid var(--border);
  border-radius: 6px; padding: 16px 18px; overflow-x: auto; margin: 0 0 16px;
}
.hkb-article__content pre code { background: none; color: var(--text); padding: 0; }
.hkb-article__content table {
  width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 0.9rem;
}
.hkb-article__content th,
.hkb-article__content td {
  border: 1px solid var(--border); padding: 10px 14px; text-align: left;
}
.hkb-article__content th { background: var(--dark-3); color: var(--white); font-weight: 700; }
.hkb-article__content blockquote {
  border-left: 3px solid var(--gold); margin: 0 0 16px; padding: 4px 0 4px 18px;
  color: var(--text-muted);
}

/* ── Related articles + feedback ── */
.hkb-article-related, .hkb-feedback {
  margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--border);
}
.hkb-article-related__title, .hkb-feedback__title {
  font-family: 'Jost', sans-serif; font-size: 1.1rem; font-weight: 700;
  color: var(--white); margin: 0 0 16px;
}
.hkb-article-related a { color: var(--gold); text-decoration: none; }
.hkb-article-related a:hover { color: var(--gold-light); }

/* ── Sidebar ── */
.hkb-mainpage__sidebar { font-size: 0.9rem; }
.hkb-sticky { position: sticky; top: 100px; }

/* Widget container — force dark card over plugin's light box */
.hkb-mainpage__sidebar .widget,
.hkb-mainpage__sidebar .hkb_widget_articles,
.hkb-mainpage__sidebar .hkb_widget_toc,
.hkb-mainpage__sidebar .hkb_widget_exit {
  background: var(--dark-3) !important; border: 1px solid var(--border) !important;
  border-radius: 6px !important; padding: 22px 20px !important; margin-bottom: 20px !important;
  box-shadow: none !important;
}
html.light-mode .hkb-mainpage__sidebar .widget,
html.light-mode .hkb-mainpage__sidebar .hkb_widget_exit {
  box-shadow: 0 2px 16px rgba(0,0,0,0.07) !important;
}

/* Widget titles — gold uppercase label */
.hkb-mainpage__sidebar .widget-title,
.hkb_widget_toc__title,
.hkb_widget_exit__title {
  font-family: 'Jost', sans-serif; font-size: 0.72rem !important; font-weight: 700 !important;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold) !important;
  margin: 0 0 14px !important;
}

/* Article entry links inside widgets — readable muted text */
.hkb-mainpage__sidebar a,
.hkb-widget__entry-title {
  color: var(--text-muted) !important; text-decoration: none; transition: color 0.2s;
  text-transform: none; letter-spacing: normal; font-weight: 400;
}
.hkb-mainpage__sidebar a:hover,
.hkb-widget__entry-title:hover { color: var(--gold) !important; }
.hkb-mainpage__sidebar ul { list-style: none; margin: 0; padding: 0; }
.hkb-mainpage__sidebar li { margin-bottom: 10px; line-height: 1.4; }

/* ── Exit / Need Support widget ── */
.hkb_widget_exit { text-align: center; }
.hkb_widget_exit__title { text-align: center; }
.hkb_widget_exit__content { color: var(--text-muted) !important; font-size: 0.88rem; margin-bottom: 16px; }
.hkb_widget_exit__btn {
  display: inline-block; background: var(--gold) !important; color: var(--dark) !important;
  border-radius: 4px !important; padding: 11px 24px; font-size: 0.85rem; font-weight: 700;
  letter-spacing: 0.04em; text-decoration: none; transition: background 0.2s; border: none !important;
}
.hkb_widget_exit__btn:hover { background: var(--gold-light) !important; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .hkb-mainpage--sidebarright { grid-template-columns: 1fr; }
  .hkb-archive--three-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .hkb-archive--two-cols,
  .hkb-archive--three-cols { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .hkb-searchbox--hero { grid-template-columns: 1fr; gap: 28px; }
  .hkb-hero-blurb { max-width: 100%; }
}
@media (max-width: 768px) {
  .hkb-container { padding: 0 24px; }
  .hkb-searchbox-wrapper { padding: 110px 0 40px !important; }
  .hkb-searchbox__title,
  .hkb-searchbox--hero .hkb-searchbox__title { font-size: 1.7rem; }
  .hkb-breadcrumbs { padding: 0 24px; }
  .hkb-article__title { font-size: 1.6rem; }
}

/* ═══════════════════════════════════════════════════════════
   KB SUB-PAGE REFINEMENTS
   ═══════════════════════════════════════════════════════════ */

/* ── Remove the sidebars (Categories + Need Support) for now ──
   Reversible: delete this block to bring the sidebar back. ── */
.hkb-mainpage__sidebar { display: none !important; }
.hkb-mainpage--sidebarright,
.hkb-mainpage--sidebarleft { grid-template-columns: 1fr !important; }

/* ── Article links: match site text (white in dark, near-black in light),
   no blue, no visited tint; gold on hover. ── */
.hkb-articlepreview__title a,
.hkb-articlepreview__title a:visited,
.hkb-articlelist a,
.hkb-articlelist a:visited {
  color: var(--white) !important; text-decoration: none;
}
.hkb-articlepreview__title a:hover,
.hkb-articlelist a:hover { color: var(--gold) !important; }

/* ── Category page: article previews — full list, site-matched type ── */
.hkb-article-grid { display: block; margin-top: 8px; }
.hkb-articlepreview { padding: 22px 0; border-top: 1px solid var(--border); }
.hkb-articlepreview:first-child { border-top: none; padding-top: 6px; }
.hkb-articlepreview__title {
  font-family: 'Jost', sans-serif; font-size: 1.15rem; font-weight: 600;
  line-height: 1.3; margin: 0 0 6px;
}
.hkb-articlepreview__excerpt {
  font-family: 'Jost', sans-serif; font-size: 0.92rem; line-height: 1.65;
  color: var(--text-muted); margin: 0;
}

/* Pagination (Next / page numbers) */
.hkb-mainpage__main .page-numbers,
.hkb-mainpage__main .page-numbers:visited,
.hkb-mainpage__main .nav-links a,
.hkb-mainpage__main .hkb-pagination a,
.hkb-mainpage__main a.next,
.hkb-mainpage__main a.prev {
  color: var(--white) !important; text-decoration: none;
}
.hkb-mainpage__main .page-numbers:hover { color: var(--gold) !important; }

/* ── Breadcrumb: lighter, integrated (drop the heavy band) ── */
.hkb-breadcrumbs-wrap { background: transparent !important; border-bottom: none !important; }

/* ═══════════════════════════════════════════════════════════
   PARTNER PORTAL — ASSET LIBRARY (SharePoint downloads)
   ═══════════════════════════════════════════════════════════ */
.asset-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 22px; font-size: 0.85rem; }
.asset-crumb { color: var(--gold); text-decoration: none; }
.asset-crumb:hover { color: var(--gold-light); }
.asset-crumb--current { color: var(--text-muted); }
.asset-crumb-sep { color: var(--text-muted); }

/* Card grid — same flat themed box recipe as .card / .portal-card.
   Uses theme tokens so it auto-flips in light/dark. */
.asset-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch;
}
.asset-card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--dark-3); border: 1px solid var(--border);
  border-radius: 6px; padding: 24px 22px;
  text-decoration: none; color: inherit;
  transition: border-color 0.2s, transform 0.2s;
}
.asset-card:hover { border-color: var(--gold); transform: translateY(-3px); }
.asset-card-icon { font-size: 1.7rem; line-height: 1; }
.asset-card-name { font-weight: 600; color: var(--white); line-height: 1.35; word-break: break-word; }
.asset-card:hover .asset-card-name { color: var(--gold); }
.asset-card-meta { font-size: 0.8rem; color: var(--text-muted); }
/* Folder cards: the "Open" affordance pinned to the bottom */
.asset-card-action { margin-top: auto; padding-top: 6px; color: var(--gold); font-size: 0.8rem; font-weight: 600; }
/* File cards: download button pinned to the bottom-left */
.asset-card-dl {
  margin-top: auto; align-self: flex-start;
  background: var(--gold); color: var(--dark);
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em;
  padding: 9px 18px; border-radius: 4px; text-decoration: none; transition: background 0.2s;
}
.asset-card-dl:hover { background: var(--gold-light); }
.asset-card-dl--disabled { background: var(--dark-4); color: var(--text-muted); cursor: default; }
.asset-card:hover .asset-card-dl--disabled { /* keep neutral on hover */ background: var(--dark-4); }

.asset-notice {
  background: var(--dark-3); border: 1px solid var(--border); border-radius: 6px;
  padding: 15px 20px; color: var(--text-muted); display: block;
  /* Was flex-column, which made every text node and inline <strong> its own
     row — so "Click <strong>New ticket</strong> to open your first case"
     broke across three lines. Block lets inline content flow; the stacked
     heading+body notices keep their layout via the two rules below. */
  margin-bottom: 22px; font-size: 0.92rem;
}
.asset-notice--error { border-color: rgba(240,73,62,0.4); }
.asset-notice strong { color: var(--white); font-weight: 600; }
/* No .asset-notice uses a leading <strong> as a heading, and :first-child
   ignores text nodes — so this rule only ever hit an INLINE <strong> mid
   sentence and forced it onto its own line. Removed. */
.asset-notice > span { display: block; }

@media (max-width: 1024px) { .asset-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .asset-grid { grid-template-columns: 1fr; } }
.asset-notice--ok { border-color: rgba(0,168,157,0.45); }

/* ═══════════════════════════════════════════════════════════
   PARTNER PORTAL — SUPPORT TICKETS
   ═══════════════════════════════════════════════════════════ */
.ticket-listhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.ticket-detail-title { font-size: 1.4rem; color: var(--white); margin: 0; }
.ticket-detailbar { margin-bottom: 14px; }
.ticket-ref { font-size: 0.8rem; color: var(--text-muted); margin: 4px 0 22px; }
.ticket-detail-head { display: flex; align-items: center; gap: 14px; margin-top: 6px; }

/* Status badge */
.ticket-badge {
  display: inline-block; align-self: flex-start; font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--border);
}
.ticket-badge--open    { color: var(--aqua); border-color: rgba(0,168,157,0.5); }
.ticket-badge--pending { color: var(--gold); border-color: rgba(201,168,76,0.5); }
.ticket-badge--closed  { color: var(--text-muted); }

/* Ticket cards reuse .asset-card; tweak for badge-on-top layout */
.ticket-card .asset-card-name { margin-top: 4px; }

/* Thread */
.ticket-thread { display: flex; flex-direction: column; gap: 16px; margin: 8px 0 30px; }
.ticket-msg { border: 1px solid var(--border); border-radius: 8px; padding: 16px 18px; background: var(--dark-3); max-width: 88%; }
.ticket-msg--you   { align-self: flex-end; border-color: rgba(201,168,76,0.35); }
.ticket-msg--agent { align-self: flex-start; background: var(--dark-2); }
.ticket-msg-meta { display: flex; gap: 12px; align-items: baseline; margin-bottom: 8px; }
.ticket-msg-who  { font-weight: 700; font-size: 0.85rem; color: var(--white); }
.ticket-msg--agent .ticket-msg-who { color: var(--gold); }
.ticket-msg-date { font-size: 0.72rem; color: var(--text-muted); }
.ticket-msg-body { font-size: 0.92rem; line-height: 1.6; color: var(--text); }
.ticket-msg-body p { margin: 0 0 10px; } .ticket-msg-body p:last-child { margin: 0; }

/* Forms */
.ticket-form { display: flex; flex-direction: column; gap: 8px; max-width: 720px; }
.ticket-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin-top: 8px; }
/* Conditional technical fields: `display: contents` keeps the label+control as
   direct flex items (layout unchanged); `.is-hidden` removes them when the
   inquiry isn't Technical Support. Toggled by theme.js. */
.ticket-tech-field { display: contents; }
.ticket-tech-field.is-hidden { display: none; }
.ticket-form input:not([type="submit"]), .ticket-form textarea, .ticket-form select {
  width: 100%; background: var(--dark-4); border: 1px solid var(--border); color: var(--white);
  border-radius: 6px; padding: 12px 14px; font-family: 'Jost', sans-serif; font-size: 0.95rem;
}
html:not(.light-mode) .ticket-form input[type="date"] { color-scheme: dark; }
.ticket-form select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 18px, calc(100% - 13px) 18px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 38px; }
.ticket-form input:not([type="submit"]):focus, .ticket-form textarea:focus, .ticket-form select:focus { outline: none; border-color: var(--gold); }

/* Detail-view structured fields */
.ticket-fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 28px; margin: 0 0 24px; padding: 18px 20px; background: var(--dark-3); border: 1px solid var(--border); border-radius: 8px; }
.ticket-field { display: flex; flex-direction: column; gap: 2px; }
.ticket-field dt { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin: 0; }
.ticket-field dd { margin: 0; font-size: 0.9rem; color: var(--white); }
@media (max-width: 600px) { .ticket-fields { grid-template-columns: 1fr; } }
.ticket-form textarea { resize: vertical; }
.ticket-form .btn-primary { border: none; cursor: pointer; align-self: flex-start; margin-top: 12px; }
.ticket-foot { font-size: 0.8rem; color: var(--text-muted); margin: 6px 0 0; }
.ticket-form--reply { margin-top: 10px; }

/* ═══════════════════════════════════════════════════════════
   CHAT WITH TRUSTEDEXPERT  (template-trusted-expert.php)
   Open WebUI–style framed assistant, portal-gated.
   ═══════════════════════════════════════════════════════════ */
/* Full-bleed animated backdrop — the "surrounding black" becomes the hero animation */
.te-bg-anim {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
  background: var(--dark);
}
.te-bg-anim .hero-bg,
.te-bg-anim .hero-grid { position: absolute; inset: 0; }

.te-wrap {
  position: relative; z-index: 1; /* sit above the animated backdrop */
  max-width: 1180px; margin: 0 auto;
  padding: 120px 24px 48px; /* clear the fixed header */
  display: flex; flex-direction: column;
  min-height: 100vh;
}
.te-bar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; margin-bottom: 20px;
}
.te-eyebrow {
  display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 6px;
}
.te-title { font-size: 2rem; line-height: 1.1; color: var(--white); font-weight: 700; text-wrap: balance; }
.te-title span { color: var(--gold); white-space: nowrap; }
.te-sub { margin-top: 8px; color: var(--text-muted); font-size: 0.95rem; text-wrap: pretty; }
.te-badge {
  flex: none; align-self: center;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold); border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 12px; background: rgba(201,168,76,0.08);
}

/* The chat stage — fills remaining height like an app shell */
.te-stage {
  flex: 1; min-height: 560px; height: calc(100vh - 300px);
  border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
  background: var(--dark-2);
  /* column, not row: an <iframe> is a replaced element, so row-axis
     align-items stretching and height:100% both fail to size it (it
     collapses to the 150px default). As a column flex item, flex:1
     sizes its height directly. */
  display: flex; flex-direction: column;
  box-shadow: 0 18px 60px rgba(0,0,0,0.35);
}
.te-frame { flex: 1; width: 100%; border: 0; display: block; background: var(--dark-2); }

/* "Not yet connected" placeholder */
.te-empty {
  margin: auto; text-align: center; max-width: 1040px; padding: 48px 28px;
}
.te-empty-ic {
  width: 64px; height: 64px; margin: 0 auto 22px; border-radius: 16px;
  display: grid; place-items: center; color: var(--gold);
  background: linear-gradient(150deg, rgba(201,168,76,0.18), rgba(0,168,157,0.12));
}
.te-empty-ic svg { width: 32px; height: 32px; }
.te-empty-title { font-size: 1.4rem; color: var(--white); font-weight: 700; margin-bottom: 12px; text-wrap: balance; }
.te-empty-text { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; margin-bottom: 12px; text-wrap: balance; }
.te-empty-text a { color: var(--gold); text-decoration: none; font-weight: 600; }
.te-empty-text a:hover { color: var(--gold-light); }

@media (max-width: 600px) {
  .te-wrap { padding: 100px 16px 32px; }
  .te-title { font-size: 1.55rem; }
  .te-badge { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   PARTNER PORTAL — FEEDBACK BOARD  (template-portal-feedback.php)
   Reuses .deal-table / .deal-badge / .ticket-* patterns; only the
   vote button + a couple of spacing tweaks are new.
   ═══════════════════════════════════════════════════════════ */
.feedback-desc { max-width: 720px; margin: 4px 0 22px; }
.feedback-vote-form { margin: 0 0 34px; }
.feedback-vote {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 10px 18px; border-radius: 999px; background: var(--dark-3);
  border: 1px solid var(--border); color: var(--text);
  font-family: 'Jost', sans-serif; font-size: 0.9rem; font-weight: 600;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.feedback-vote:hover { border-color: var(--gold); color: var(--white); }
.feedback-vote-caret { font-size: 0.7rem; line-height: 1; color: var(--text-muted); transition: color 0.15s; }
.feedback-vote:hover .feedback-vote-caret { color: var(--gold); }
.feedback-vote-count { font-size: 1.05rem; font-weight: 700; color: var(--white); }
.feedback-vote--on {
  background: rgba(201,168,76,0.10); border-color: rgba(201,168,76,0.55); color: var(--gold);
}
.feedback-vote--on .feedback-vote-caret,
.feedback-vote--on .feedback-vote-count { color: var(--gold); }
.feedback-comments-head {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 14px;
}
.feedback-votes-cell { font-weight: 700; color: var(--white); }

/* Duplicate-check interstitial · staff status control · shareable link */
.feedback-dupes { margin: 0 0 26px; }
.feedback-dupe-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.feedback-dupe { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; background: var(--dark-3); border: 1px solid var(--border); border-radius: 10px; }
.feedback-dupe-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.feedback-dupe-title { font-weight: 600; color: var(--text); text-decoration: none; }
.feedback-dupe-title:hover { color: var(--gold); }
.feedback-dupe-meta { font-size: 0.8rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: 8px; }
.feedback-dupe-vote { margin: 0; flex: none; }
.feedback-status-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 22px; padding: 12px 14px; background: rgba(201,168,76,0.06); border: 1px solid rgba(201,168,76,0.30); border-radius: 10px; }
.feedback-status-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.feedback-status-form select { padding: 7px 10px; }
.feedback-status-btn { padding: 8px 16px; border-radius: 8px; border: 1px solid var(--gold); background: transparent; color: var(--gold); font-weight: 600; cursor: pointer; font-family: 'Jost', sans-serif; }
.feedback-status-btn:hover { background: var(--gold); color: #0d0d0d; }
.feedback-permalink { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 20px; }
.feedback-permalink-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.feedback-permalink-input { flex: 1 1 280px; min-width: 0; padding: 8px 12px; background: var(--dark-3); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 0.85rem; }
.feedback-permalink-copy { padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--dark-3); color: var(--text); font-weight: 600; cursor: pointer; white-space: nowrap; font-family: 'Jost', sans-serif; }
.feedback-permalink-copy:hover { border-color: var(--gold); color: var(--gold); }

/* ═══════════════════════════════════════════════════════════
   AGENT CONSOLE  (template-portal-queue.php)
   Staff-facing shared ticket queue. Reuses .deal-table*, .ticket-*
   and the existing tokens; only the tabs, the action bar, the
   internal-note style and the staff hero badge are new.
   ═══════════════════════════════════════════════════════════ */

/* Staff badge on the portal hero — aqua, so a staff context never reads
   as the gold partner badge. Text uses var(--aqua) so light mode follows. */
.portal-badge--agent {
  background: rgba(0,168,157,0.12);
  border-color: rgba(0,168,157,0.40);
  color: var(--aqua);
}

/* Queue tabs */
.console-tabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 22px; padding: 0 0 14px;
  border-bottom: 1px solid var(--border);
}
.console-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px;
  background: var(--dark-3); border: 1px solid var(--border);
  color: var(--text-muted); text-decoration: none;
  font-size: 0.85rem; font-weight: 600;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.console-tab:hover { border-color: var(--gold); color: var(--text); }
.console-tab.is-active {
  background: rgba(201,168,76,0.10);
  border-color: rgba(201,168,76,0.55);
  color: var(--gold);
}
.console-tab-count {
  font-size: 0.72rem; font-weight: 700; line-height: 1;
  padding: 3px 7px; border-radius: 999px;
  background: rgba(138,138,154,0.18); color: var(--text-muted);
}
.console-tab.is-active .console-tab-count { background: rgba(201,168,76,0.18); color: var(--gold); }

/* Filter bar: the shared .deal-table-tools plus assignment scopes */
.console-tools { align-items: center; }
.console-scopes { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.console-scope {
  padding: 7px 13px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--dark-3);
  color: var(--text-muted); text-decoration: none;
  font-size: 0.82rem; font-weight: 600;
}
.console-scope:hover { border-color: var(--gold); color: var(--text); }
.console-scope.is-active { border-color: rgba(0,168,157,0.45); color: var(--aqua); background: rgba(0,168,157,0.08); }

/* Table tweaks */
.console-table td { vertical-align: top; }
.console-cell-sub { display: block; font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }
.console-replies {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 0.7rem; font-weight: 700;
  background: rgba(138,138,154,0.18); color: var(--text-muted);
}

/* Staff action bar — assign + status, one row */
.console-actionbar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px;
  margin: 0 0 26px; padding: 14px 16px;
  background: rgba(201,168,76,0.06);
  border: 1px solid rgba(201,168,76,0.30);
  border-radius: 10px;
}
.console-actionform { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.console-actionlabel {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gold);
}
.console-actionform select {
  padding: 8px 12px; border-radius: 6px;
  background: var(--dark-4); border: 1px solid var(--border);
  color: var(--white); font-family: 'Jost', sans-serif; font-size: 0.9rem;
}
.console-actionform select:focus { outline: none; border-color: var(--gold); }
.console-actionbtn {
  padding: 8px 16px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--dark-3); color: var(--text);
  font-family: 'Jost', sans-serif; font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.console-actionbtn:hover { border-color: var(--gold); color: var(--gold); }
.console-actionbtn--primary { border-color: var(--gold); color: var(--gold); }
.console-actionbtn--primary:hover { background: var(--gold); color: #0d0d0d; }

/* Internal note — deliberately unlike a customer-visible message.
   Full width, amber/gold tint, left accent rail. */
.console-note {
  align-self: stretch; max-width: 100%;
  padding: 14px 18px; border-radius: 8px;
  background: rgba(201,168,76,0.07);
  border: 1px solid rgba(201,168,76,0.30);
  border-left: 3px solid var(--gold);
}
.console-note .ticket-msg-who { color: var(--gold); }
.console-note-badge {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gold); border: 1px solid rgba(201,168,76,0.40);
  background: rgba(201,168,76,0.10);
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.console-note .ticket-msg-meta { flex-wrap: wrap; }

/* Composer: reply and internal note are two separate, distinct forms */
.console-composer { display: flex; flex-direction: column; gap: 26px; }
.console-composer-form { margin: 0; }
.console-composer-hint { font-size: 0.8rem; color: var(--text-muted); margin: 0; }
.console-note-form {
  padding: 16px 18px; border-radius: 10px;
  background: rgba(201,168,76,0.05);
  border: 1px dashed rgba(201,168,76,0.40);
}
.console-note-label { margin-top: 0; }
.console-note-btn {
  align-self: flex-start; margin-top: 4px;
  padding: 10px 20px; border-radius: 8px;
  border: 1px solid var(--gold); background: transparent; color: var(--gold);
  font-family: 'Jost', sans-serif; font-size: 0.88rem; font-weight: 600; cursor: pointer;
}
.console-note-btn:hover { background: var(--gold); color: #0d0d0d; }

@media (max-width: 700px) {
  .console-actionbar { flex-direction: column; align-items: stretch; }
  .console-actionform { justify-content: space-between; }
}

/* ── STAFF TOOLS (portal section, staff only) ──
   Aqua-accented so internal tooling reads as distinct from the partner-facing
   gold. Pairs with .portal-badge--agent on the hero. */
.portal-section--agent { border-top: 1px solid rgba(0,176,185,0.22); }
.portal-section-label--agent { color: var(--aqua); }
.portal-card--agent:hover { border-color: rgba(0,176,185,0.45); }
.portal-card--agent .portal-card-link { color: var(--aqua); }
/* Staff Tools cards sit on the same 5-up rhythm as Quick Actions above, so a
   lone card stays 1/5 width instead of stretching the full row. */
.portal-section--agent .portal-cards { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1024px) {
  .portal-section--agent .portal-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .portal-section--agent .portal-cards { grid-template-columns: 1fr; }
}

/* ── LINKS ON DARK PORTAL SURFACES ──
   Ticket/console content links were unstyled, so they fell back to the browser's
   default blue — unreadable on our dark cards (e.g. the requester email in the
   Agent Console). Use the brand aqua, which has a light-mode variant too.
   Inline-styled links inside forwarded email HTML keep their own colours. */
.ticket-fields a,
.ticket-msg-body a,
.ticket-ref a,
.deal-callout a,
.console-actionbar a {
  color: var(--aqua);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;
}
.ticket-fields a:hover,
.ticket-msg-body a:hover,
.ticket-ref a:hover,
.deal-callout a:hover,
.console-actionbar a:hover { color: var(--gold); }

/* Logged-out header avatar: a generic person icon linking to the portal sign-in,
   so the header slot isn't an empty circle for guests. */
.user-avatar--guest { text-decoration: none; }
.user-avatar--guest svg { display: block; width: 15px; height: 15px; }

/* ═══════════════════════════════════════════════════════════
   PARTNER MANAGEMENT  (template-portal-partners.php)
   Staff-facing partner user accounts. Reuses .deal-table*,
   .deal-badge, .ticket-* and .console-actionbtn; only the
   checkbox rows are new — the shared `.ticket-form input`
   rule would otherwise stretch a checkbox to the full width.
   ═══════════════════════════════════════════════════════════ */
.pm-check { display: flex; align-items: flex-start; gap: 11px; margin-top: 16px; }
.ticket-form .pm-check input[type="checkbox"] {
  width: auto; flex: none; margin: 3px 0 0; padding: 0;
  accent-color: var(--gold); cursor: pointer;
}
.pm-check-text { display: flex; flex-direction: column; gap: 3px; }
.pm-check-label { color: var(--white); font-size: 0.92rem; font-weight: 600; cursor: pointer; }
.pm-check-hint { color: var(--text-muted); font-size: 0.82rem; line-height: 1.5; margin: 0; }
/* Invitation opt-in: gold-tinted so "this sends an email" never reads as
   just another checkbox. Off by default until go-live. */
.pm-check--invite {
  padding: 13px 15px; border-radius: 10px;
  background: rgba(201,168,76,0.06); border: 1px solid rgba(201,168,76,0.30);
}
/* Password reset sits apart from the details form — a separate action, not a field. */
.pm-reset-form { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--border); }
.pm-reset-form .console-actionbtn { align-self: flex-start; margin-top: 10px; }

/* ── DEAL DESK ──
   The intake decision panel is a full-width form rather than the Agent Console's
   single-row action bar; everything else reuses the console/deal classes. */
.deal-decision { display: block; }
.deal-decision-form { max-width: 720px; }
.console-actionbtn--danger { border-color: rgba(240,73,62,0.45); color: var(--tomato); }
.console-actionbtn--danger:hover { background: var(--tomato); color: #0d0d0d; border-color: var(--tomato); }
.deal-group--partner { color: var(--aqua); }

/* Header controls share one pill height. Left to content, the sun glyph, the
   "Aurora" text and the avatar each measured differently (28.4 / 26.5 / 29.0px);
   an explicit height makes the three read as one set. Widths stay content-sized. */
.header-actions .mode-toggle,
.header-actions .anim-toggle,
.header-actions .user-avatar {
  height: 30px;
  box-sizing: border-box;
  line-height: 1;
}
@media (max-width: 768px) {
  .header-actions .mode-toggle,
  .header-actions .anim-toggle,
  .header-actions .user-avatar { height: 28px; }
}

/* ── CONVERSATION LAYOUT (Teams-style) ──
   Each viewer sees THEMSELVES on the right and the other party on the left, so
   who-said-what reads at a glance. The same message class therefore aligns
   opposite ways on the two pages: on the partner's page Onclave is the other
   party; in the Agent Console the partner is. Bubbles are narrowed so the
   alignment is actually legible — at 88% wide it read as one column. */
.ticket-msg { max-width: 72%; }

/* Agent Console — staff are "us", so Onclave sits right, the partner left. */
.ticket-thread--staff .ticket-msg--agent {
  align-self: flex-end;
  background: rgba(201,168,76,0.08);
  border-color: rgba(201,168,76,0.35);
}
.ticket-thread--staff .ticket-msg--you {
  align-self: flex-start;
  background: var(--dark-2);
  border-color: var(--border);
}
.ticket-thread--staff .ticket-msg--you .ticket-msg-who { color: var(--aqua); }

/* Internal notes sit OUTSIDE the conversation entirely — full width, centred,
   so they never read as something the partner was sent. */
.ticket-thread .console-note { align-self: stretch; max-width: 100%; }

@media (max-width: 768px) {
  .ticket-msg { max-width: 90%; }
}

/* Composers follow the conversation: your reply box sits on the side your own
   messages appear (right, in both perspectives); the internal-note box spans the
   full width like the notes it creates, keeping it outside the conversation. */
.ticket-form--reply { margin-left: auto; max-width: 72%; }
.console-note-form { max-width: 100%; margin-left: 0; }
@media (max-width: 768px) {
  .ticket-form--reply { max-width: 100%; }
}

/* ── PORTAL CARDS: one height across both rows ──
   A hard `height` clipped the copy, so use a MINIMUM height instead: every card
   is at least this tall (equalising the two rows) and can still grow rather than
   cut text off. Descriptions are kept to two short lines so growth never fires. */
.portal-card {
  min-height: 200px;
  padding: 20px 22px;
  gap: 8px;
}
.portal-card-desc { margin: 0; }
.portal-card-link { margin-top: auto; }
@media (max-width: 1024px) { .portal-card { min-height: 190px; } }
@media (max-width: 768px)  { .portal-card { min-height: 0; } }
/* ═══════════════════════════════════════════════════════════════════════════
   AGENT CONSOLE — LIVE TOASTS
   Injected by theme.js when the 30s queue poll sees a ticket id it hasn't seen
   before. Bottom-right, stacked, self-dismissing. The wrap ignores pointer
   events so it never steals a click from the queue underneath it; each toast
   takes them back.
   ═══════════════════════════════════════════════════════════════════════════ */

.console-toast-wrap {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 4000;
  display: flex;
  flex-direction: column-reverse; /* newest lands on top of the stack */
  gap: 10px;
  width: 340px;
  max-width: calc(100vw - 48px);
  pointer-events: none;
}

.console-toast {
  pointer-events: auto;
  position: relative;
  padding: 14px 40px 14px 16px;
  background: var(--dark-3);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.38);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  animation: console-toast-in 220ms ease-out both;
}
.console-toast:hover {
  border-color: rgba(201, 168, 76, 0.45);
  border-left-color: var(--gold);
}
.console-toast:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

.console-toast-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: 5px;
}
.console-toast-num {
  color: var(--gold);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.console-toast-type {
  color: var(--text-muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.console-toast-subject {
  color: var(--white);
  font-size: 0.9rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.console-toast-close {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 26px;
  height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1;
  cursor: pointer;
}
.console-toast-close:hover {
  color: var(--tomato);
  background: var(--dark-2);
}
.console-toast-close:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 1px;
}

@keyframes console-toast-in {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: none; }
}

/* A toast that slides in under someone's cursor is exactly the kind of motion
   people turn off. Honour the preference: appear, don't travel. */
@media (prefers-reduced-motion: reduce) {
  .console-toast { animation: none; }
}

html.light-mode .console-toast {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}

/* Phones: full width minus a margin, so a toast never crowds the footer edge. */
@media (max-width: 768px) {
  .console-toast-wrap {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    max-width: none;
  }
  .console-toast { padding: 12px 38px 12px 14px; }
}

/* New-ticket form: fields taken from the account are shown, not editable, and
   short hints explain the ambiguous ones. */
.ticket-derived {
  padding: 10px 14px; border-radius: 8px;
  background: var(--dark-3); border: 1px dashed var(--border);
  color: var(--text); font-size: 0.92rem;
}
.ticket-hint { font-size: 0.78rem; color: var(--text-muted); margin: 4px 0 0; }

/* ── PORTAL CARD SIZING ──
   Five cards inside the 1140px container left ~168px of text width, so
   "Chat with TrustedExpert" wrapped. Widen the container on portal sections
   only, tighten the gutters, and ease the title down a notch — that yields
   ~194px of text width, which fits the longest title on one line. */
.portal-section .container { max-width: 1240px; }
.portal-cards { gap: 18px; }
.portal-card { padding: 20px; }
.portal-card-title { font-size: 0.95rem; line-height: 1.3; }
@media (max-width: 1280px) {
  .portal-section .container { max-width: 1140px; }
  .portal-card-title { font-size: 0.92rem; }
}

/* Listhead with no heading — keep the action on the right. */
.ticket-listhead--end { justify-content: flex-end; }

/* ── STICKY FOOTER ──
   Short pages (a near-empty table) left the footer floating mid-screen. Push it
   to the bottom of the viewport when content is shorter than the window; on long
   pages it scrolls away as normal. NOT a fixed footer — it never overlays content.
   Safe as a body-level flex container: the header and mega-menu are position:fixed,
   so they're out of flow and unaffected. */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > #site-footer { margin-top: auto; }
/* ═══════════════════════════════════════════════════════════════════════════
   AGENT CONSOLE — DASHBOARD STRIP, AGING MARKERS, QUEUE SETTINGS
   (template-portal-queue.php)

   Four tiles above the tabs, an idle chip in the table, and the in-portal
   Settings view. Everything is built from the existing tokens and the existing
   .console-* / .deal-table* / .ticket-form vocabulary, so light mode follows for
   free. ONE deliberate colour rule: only the things somebody has to act on go
   --tomato. A queue where every number is red is a queue nobody reads.
   ═══════════════════════════════════════════════════════════════════════════ */

.console-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 22px;
}
.console-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border-radius: 10px;
  background: var(--dark-3);
  border: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
}
.console-stat-num {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  color: var(--white);
}
.console-stat-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* The one-line explanation under each label: sentence case, so it reads as
   English rather than as a second heading. */
.console-stat-sub {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
  opacity: 0.85;
}

/* Aging is the only tile that is a link — it is the only one with somewhere to
   go — so it is the only one that reacts to a cursor. */
.console-stat--action { cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.console-stat--action:hover { border-color: var(--gold); }

/* Non-zero aging: tomato. Zero stays neutral, on purpose. */
.console-stat--alert {
  background: rgba(240, 73, 62, 0.07);
  border-color: rgba(240, 73, 62, 0.45);
}
.console-stat--alert .console-stat-num,
.console-stat--alert .console-stat-label { color: var(--tomato); }
.console-stat--alert:hover { border-color: var(--tomato); }

@media (max-width: 900px) {
  .console-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .console-stats { grid-template-columns: 1fr; }
  .console-stat { padding: 13px 15px; }
  .console-stat-num { font-size: 1.6rem; }
}

/* "3d idle" beside the status badge. Small, tomato, and only ever present on a
   row that has actually crossed the threshold. */
.console-idle {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--tomato);
  border: 1px solid rgba(240, 73, 62, 0.40);
  background: rgba(240, 73, 62, 0.08);
}

/* The Aging scope sits with Everyone / Unassigned / Mine but marks itself in
   tomato when it is the active one, matching the tile it came from. */
.console-scope--aging.is-active {
  border-color: rgba(240, 73, 62, 0.45);
  color: var(--tomato);
  background: rgba(240, 73, 62, 0.08);
}

/* Settings link in the console header — a peer of "Back to Portal", boxed so it
   reads as a place to go rather than a piece of the sentence above it. */
.console-settings-link {
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.console-settings-link:hover { border-color: var(--gold); }

/* ── Queue settings view ── */
.console-settings-lead {
  max-width: 720px;
  margin: 0 0 26px;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--text-muted);
}
.console-settings-lead strong { color: var(--white); font-weight: 600; }

.console-settings-form { max-width: 640px; }
/* Each field is label -> one line of helper text -> input, so the groups need
   air between them and none inside them. */
.console-settings-form .ticket-label { margin-top: 22px; }
.console-settings-form .console-composer-hint { margin: 0 0 2px; max-width: 560px; }
/* A day count is two or three characters; the shared .ticket-form input rule
   would stretch it across the whole form. */
.ticket-form input[type="number"].console-settings-num {
  width: 110px;
  flex: none;
}
.console-settings-form .pm-check { margin-top: 26px; }
.console-settings-form .btn-primary { margin-top: 22px; }

/* Read-only values for staff who are not administrators. */
.console-settings-readonly { max-width: 640px; }

/* Queue settings sits on the filter row, pushed to the far right so it reads as
   a tool for the view rather than another scope filter. */
.console-tools { flex-wrap: wrap; }
.console-tools .console-settings-link { margin-left: auto; }
/* ═══════════════════════════════════════════════════════════════════════════
   ── TICKET ATTACHMENTS ──
   (inc/ticket-attachments.php, rendered in template-portal-tickets.php and
   template-portal-queue.php)

   Built entirely from the existing tokens and the .ticket-* vocabulary, so
   light mode follows for free. Every chip is a LINK to the download handler —
   there is no file URL anywhere in the markup, by design.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The list under a message. Wraps, and never widens the bubble it sits in. */
.ticket-att-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--border);
}

/* One attachment: icon · name · size, as a single compact chip. */
.ticket-att {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--dark-4);
  color: var(--text);
  text-decoration: none;
  font-size: 0.82rem;
  line-height: 1.3;
  transition: border-color 0.2s, color 0.2s;
}
.ticket-att:hover,
.ticket-att:focus-visible { border-color: var(--gold); color: var(--gold); }

.ticket-att-icon { font-size: 0.95rem; line-height: 1; flex: none; }

/* A long log filename must truncate rather than push the chip off the bubble. */
.ticket-att-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 260px;
  font-weight: 600;
}

.ticket-att-size {
  flex: none;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.ticket-att:hover .ticket-att-size { color: inherit; }

@media (max-width: 600px) { .ticket-att-name { max-width: 160px; } }

/* ── The composer's file input ──
   The shared `.ticket-form input` rule paints a full-width boxed control, which
   is far too heavy for an optional picker. Keep it compact and quiet: this is
   the least important control on the form. */
.ticket-form input[type="file"].ticket-att-input {
  width: auto;
  max-width: 100%;
  padding: 8px 10px;
  font-size: 0.82rem;
  color: var(--text-muted);
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 6px;
  cursor: pointer;
}
.ticket-form input[type="file"].ticket-att-input:hover { border-color: var(--gold); }
.ticket-form input[type="file"].ticket-att-input:focus { outline: none; border-color: var(--gold); }
.ticket-form input[type="file"].ticket-att-input::file-selector-button {
  margin-right: 10px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--dark-4);
  color: var(--text);
  font-family: 'Jost', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.ticket-form input[type="file"].ticket-att-input::file-selector-button:hover { border-color: var(--gold); color: var(--gold); }

/* "(optional)" rides in the uppercase gold label, so drop it out of that voice. */
.ticket-att-optional {
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text-muted);
}

/* Image attachments show a small preview; the tile still downloads on click.
   Inline serving is image-only and every image was re-encoded server-side. */
.ticket-att-thumb {
  width: 44px; height: 44px; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--border); display: block; flex: none; background: var(--dark-3);
}
.ticket-att { align-items: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   AGENT CONSOLE — WAVE 2
   canned replies · tags · priority · merge · snooze
   (inc/ticket-queue.php + template-portal-queue.php)

   Built from the tokens and the .console-* / .ticket-* vocabulary already in
   this file, so both the dark and the light palette above carry it. Nothing
   here introduces a new colour: gold = the staff voice, aqua = active, tomato =
   act on this, muted = parked.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Visually hidden label text. Used by the tag input and the snooze date field,
   both of which are labelled by the control beside them for a sighted reader. */
.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Priority ─────────────────────────────────────────────────────────────────
   A .ticket-badge in a second dimension: STATUS says where the ticket is in its
   life, PRIORITY says how loudly it is asking. Only the two that mean "act"
   take a colour; normal and low stay deliberately quiet so a queue of normal
   tickets does not read as a wall of badges. */
.console-prio { font-weight: 700; }
.console-prio--urgent {
  color: var(--tomato);
  border-color: rgba(240,73,62,0.55);
  background: rgba(240,73,62,0.10);
}
.console-prio--high {
  color: var(--gold);
  border-color: rgba(201,168,76,0.50);
  background: rgba(201,168,76,0.08);
}
.console-prio--normal { color: var(--text-muted); }
.console-prio--low    { color: var(--text-muted); opacity: 0.7; }

/* Priority pills on the filter row, beside the assignment scopes. */
.console-prios { margin-left: 2px; }
.console-scope--prio-urgent.is-active {
  border-color: rgba(240,73,62,0.45);
  color: var(--tomato);
  background: rgba(240,73,62,0.08);
}
.console-scope--prio-high.is-active {
  border-color: rgba(201,168,76,0.50);
  color: var(--gold);
  background: rgba(201,168,76,0.10);
}

/* ── Tags ─────────────────────────────────────────────────────────────────────
   Free-form staff labels. Chips, not badges: they are LINKS that filter the
   queue, so they get a hover state and a pointer. */
.console-tagbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: -14px 0 26px; padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--dark-3);
}
.console-tagbar .console-actionlabel { margin-right: 2px; }
.console-tag-none { font-size: 0.82rem; color: var(--text-muted); }

/* A chip is the label plus its own remove form, sitting as one pill. */
.console-tag {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--dark-4);
  padding: 2px 4px 2px 11px;
}
.console-tag-link {
  font-size: 0.78rem; font-weight: 600;
  color: var(--text); text-decoration: none;
}
.console-tag-link:hover { color: var(--gold); }
.console-tag-rm { display: inline-flex; margin: 0; }
.console-tag-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0;
  border: 0; border-radius: 999px;
  background: transparent; color: var(--text-muted);
  font-size: 0.95rem; line-height: 1; cursor: pointer;
}
.console-tag-x:hover { background: rgba(240,73,62,0.14); color: var(--tomato); }

.console-tag-add { gap: 6px; }
.ticket-form input[type="text"].console-tag-input,
.console-tag-input {
  width: 170px; flex: none;
  padding: 7px 12px; border-radius: 6px;
  background: var(--dark-4); border: 1px solid var(--border);
  color: var(--white);
  font-family: 'Jost', sans-serif; font-size: 0.85rem;
}
.console-tag-input:focus { outline: none; border-color: var(--gold); }

/* Chips under the subject in the list table — smaller again, and wrapping. */
.console-tagrow { display: block; margin-top: 5px; }
.console-tag-chip {
  display: inline-block; margin: 3px 4px 0 0;
  padding: 1px 9px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--dark-4);
  color: var(--text-muted); text-decoration: none;
  font-size: 0.7rem; font-weight: 600; white-space: nowrap;
}
.console-tag-chip:hover { border-color: var(--gold); color: var(--gold); }
.console-tag-chip.is-active { border-color: rgba(0,168,157,0.45); color: var(--aqua); }

/* The "Tag: foo ×" pill that shows a tag filter is on and clears it. */
.console-scope--tagfilter { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Snooze + merge bar ───────────────────────────────────────────────────────
   A second action bar under the first. Deliberately NOT gold: these two take a
   ticket OUT of the queue rather than changing what it says, so they read as
   quieter and sit apart from assign / status / priority. */
.console-actionbar--quiet {
  background: var(--dark-3);
  border-color: var(--border);
  margin-top: -14px;
}
.console-actionhint {
  flex-basis: 100%;
  font-size: 0.76rem;
  color: var(--text-muted);
}
.console-snooze-date,
.console-merge-input {
  padding: 8px 12px; border-radius: 6px;
  background: var(--dark-4); border: 1px solid var(--border);
  color: var(--white);
  font-family: 'Jost', sans-serif; font-size: 0.85rem;
}
.console-snooze-date:focus,
.console-merge-input:focus { outline: none; border-color: var(--gold); }
.console-merge-input { width: 130px; }
.console-merge-form { align-items: center; }

/* "snoozed" beside the status badge in the list — muted, because a sleeping
   ticket is the one thing on the row that needs no attention. */
.console-snoozed-flag {
  display: inline-block; margin-left: 6px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 0.68rem; font-weight: 700; white-space: nowrap;
  color: var(--text-muted);
  border: 1px solid var(--border);
  background: var(--dark-4);
}
.console-scope--snoozed.is-active {
  border-color: var(--border);
  color: var(--text);
  background: var(--dark-4);
}

/* ── Banners on the detail view ───────────────────────────────────────────────
   State the ticket is IN, above everything else on the page. */
.console-merged-banner,
.console-snooze-banner {
  margin: 0 0 20px; padding: 13px 16px;
  border-radius: 10px;
  font-size: 0.88rem; line-height: 1.6;
  color: var(--text);
}
.console-merged-banner {
  border: 1px solid rgba(240,73,62,0.35);
  background: rgba(240,73,62,0.07);
  border-left: 3px solid var(--tomato);
}
.console-merged-banner strong { color: var(--tomato); }
/* On the SURVIVING ticket the same fact is informational, not a dead end. */
.console-merged-banner--target {
  border-color: rgba(0,168,157,0.35);
  background: rgba(0,168,157,0.07);
  border-left-color: var(--aqua);
}
.console-merged-banner--target strong { color: var(--aqua); }
.console-merged-link {
  display: inline-block; margin-left: 6px;
  color: var(--gold); text-decoration: none; font-weight: 600;
}
.console-merged-link:hover { text-decoration: underline; }
.console-snooze-banner {
  border: 1px solid var(--border);
  background: var(--dark-3);
  border-left: 3px solid var(--text-muted);
  color: var(--text-muted);
}
.console-snooze-banner strong { color: var(--text); }

/* ── Canned replies ───────────────────────────────────────────────────────────
   The picker in the composer, and the admin list in Queue settings. */
.console-canned-label { margin-top: 4px; }
.ticket-form select.console-canned-select,
.console-canned-select {
  width: 100%; max-width: 420px;
  margin-bottom: 12px;
  padding: 8px 12px; border-radius: 6px;
  background: var(--dark-4); border: 1px solid var(--border);
  color: var(--white);
  font-family: 'Jost', sans-serif; font-size: 0.9rem;
}
.console-canned-select:focus { outline: none; border-color: var(--gold); }

.console-settings-subhead {
  margin: 44px 0 6px;
  font-size: 1.05rem; color: var(--white);
}
.console-canned-list {
  list-style: none; margin: 0 0 24px; padding: 0;
  max-width: 720px;
  display: flex; flex-direction: column; gap: 10px;
}
.console-canned-item {
  padding: 13px 16px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--dark-3);
}
.console-canned-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.console-canned-title { font-weight: 600; color: var(--white); }
.console-canned-actions { display: inline-flex; align-items: center; gap: 8px; }
/* The Edit control is an <a> wearing the button's clothes. */
.console-canned-actions .console-actionbtn {
  text-decoration: none; display: inline-block; line-height: 1.3;
}
.console-canned-body {
  margin: 8px 0 0;
  font-size: 0.85rem; line-height: 1.6; color: var(--text-muted);
}
.console-canned-form { margin-top: 4px; }
.console-canned-cancel {
  margin-left: 14px;
  font-size: 0.85rem; color: var(--text-muted); text-decoration: none;
}
.console-canned-cancel:hover { color: var(--gold); }

@media (max-width: 700px) {
  .console-actionbar--quiet { flex-direction: column; align-items: stretch; }
  .console-merge-input,
  .console-tag-input { width: 100%; }
  .console-tagbar { align-items: flex-start; }
}

/* ── AGENT CONSOLE: ACTIONS DRAWER ──
   Staff controls slide in from the right instead of stacking three bars above
   the conversation. The drawer is a real dialog: backdrop, Escape, focus trap. */
.console-actions-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px; border-radius: 20px; cursor: pointer;
  background: rgba(201,168,76,0.12); border: 1.5px solid var(--gold);
  color: var(--gold); font-family: 'Jost', sans-serif; font-size: 0.82rem; font-weight: 600;
  margin: 0 0 22px;
}
.console-actions-toggle:hover { background: rgba(201,168,76,0.24); }
.console-drawer-backdrop {
  position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,0.5);
  opacity: 0; transition: opacity 0.2s ease;
}
.console-drawer-backdrop.is-open { opacity: 1; }
.console-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 310;
  width: min(460px, 92vw); overflow-y: auto;
  background: var(--dark-2); border-left: 1px solid var(--border);
  box-shadow: -12px 0 40px rgba(0,0,0,0.45);
  transform: translateX(100%); transition: transform 0.22s ease;
}
.console-drawer.is-open { transform: translateX(0); }
.console-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px; border-bottom: 1px solid var(--border); position: sticky; top: 0;
  background: var(--dark-2); z-index: 1;
}
.console-drawer-title {
  font-family: 'Jost', sans-serif; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold);
}
.console-drawer-close {
  background: none; border: none; color: var(--text-muted);
  font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 4px;
}
.console-drawer-close:hover { color: var(--white); }
.console-drawer-body { padding: 20px 22px 40px; display: flex; flex-direction: column; gap: 18px; }
/* Inside the drawer the bars stack naturally — drop their boxed chrome. */
.console-drawer-body .console-actionbar {
  display: flex; flex-direction: column; align-items: stretch; gap: 14px;
  background: none; border: none; padding: 0; margin: 0;
}
.console-drawer-body .console-actionform { flex-wrap: wrap; }
body.console-drawer-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .console-drawer, .console-drawer-backdrop { transition: none; }
}

/* ── INTERNAL NOTES: not a message ──
   Notes were tinted rgba(gold,0.07) while agent replies are rgba(gold,0.08) —
   effectively the same colour, so only the pill distinguished them. Gold now
   means "Onclave's messages", so notes must not read as gold at all. Give them
   a distinctly warmer amber, a DASHED border (nothing was sent), and no bubble
   rounding on the accent edge, so they read as annotation rather than dialogue. */
.ticket-thread .console-note {
  background: rgba(226,168,81,0.14);
  border: 1px dashed rgba(226,168,81,0.55);
  border-left: 4px solid #e2a851;
  border-radius: 4px;
}
.ticket-thread .console-note .ticket-msg-who { color: #e2a851; }
.ticket-thread .console-note .ticket-msg-body { color: var(--text); }
.console-note-badge {
  color: #e2a851;
  border-color: rgba(226,168,81,0.55);
  background: rgba(226,168,81,0.12);
}

/* ── ACTIONS DRAWER: sections + alignment ──
   Inside the drawer every control stacks full width under a section heading, so
   the panel reads as a form rather than a row of mismatched widgets. */
.console-drawer-section {
  font-family: 'Jost', sans-serif; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
  margin: 6px 0 0; padding-top: 18px; border-top: 1px solid var(--border);
}
.console-drawer-section:first-of-type { padding-top: 0; border-top: none; margin-top: 0; }
.console-drawer-body .console-actionform {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin: 0;
}
.console-drawer-body .console-actionform select,
.console-drawer-body .console-actionform input[type="text"],
.console-drawer-body .console-actionform input[type="date"],
.console-drawer-body .console-actionbtn {
  width: 100%; box-sizing: border-box;
}
.console-drawer-body .console-actionlabel {
  font-size: 0.72rem; letter-spacing: 0.08em; color: var(--text-muted); margin: 0;
}
.console-drawer-body .console-actionhint { font-size: 0.76rem; line-height: 1.5; margin: 2px 0 0; }
/* Tag chips wrap above their input rather than sitting inline with it. */
.console-drawer-body .console-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.console-drawer-body .console-actionbar,
.console-drawer-body .console-actionbar--quiet {
  display: flex; flex-direction: column; align-items: stretch; gap: 14px;
  background: none; border: none; padding: 0; margin: 0;
}

/* Actions sits on the ticket title row, pushed right — it had its own row of
   empty space before. The head wraps on narrow screens rather than squashing. */
.ticket-detail-head { flex-wrap: wrap; gap: 10px; }
.ticket-detail-head .console-actions-toggle { margin: 0 0 0 auto; }
@media (max-width: 600px) {
  .ticket-detail-head .console-actions-toggle { margin-left: 0; }
}

/* ── THREAD COLOUR LANGUAGE ──
   Gold replies sat too close to the amber internal note. Aqua already means
   "Onclave staff" across the portal (the Onclave Agent badge, Staff Tools), so
   Onclave's messages speak in aqua on BOTH pages. That leaves three unmistakable
   states: aqua = we said it, neutral/gold = the partner said it, dashed amber =
   nobody was sent it. */
.ticket-msg--agent {
  background: rgba(0,176,185,0.10);
  border-color: rgba(0,176,185,0.38);
}
.ticket-msg--agent .ticket-msg-who { color: var(--aqua); }

/* Agent Console: the partner is the other party — keep their side neutral so the
   aqua reads as ours, not theirs. */
.ticket-thread--staff .ticket-msg--you {
  background: var(--dark-2);
  border-color: var(--border);
}
.ticket-thread--staff .ticket-msg--you .ticket-msg-who { color: var(--white); }

/* Partner's own page: their messages stay gold — the partner-facing accent. */
.ticket-thread--partner .ticket-msg--you {
  background: rgba(201,168,76,0.10);
  border-color: rgba(201,168,76,0.35);
}
.ticket-thread--partner .ticket-msg--you .ticket-msg-who { color: var(--gold); }

/* ── ACTIONS DRAWER: hierarchy ──
   Every section header was echoed by an identical inner label ("STATUS" above a
   "Status" label), and headers were the same size as the labels they headed.
   Make headers clearly dominant, and hide the now-redundant inner labels
   visually while keeping them for screen readers. */
.console-drawer-body .console-drawer-section {
  font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em;
  text-transform: none; color: var(--white);
  margin: 0; padding-top: 22px; border-top: 1px solid var(--border);
}
.console-drawer-body .console-drawer-section:first-of-type {
  padding-top: 0; border-top: none;
}
.console-drawer-body .console-actionlabel {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* The tag bar is a plain group in the drawer, not a boxed widget. */
.console-drawer-body .console-tagbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  background: none; border: none; padding: 0; margin: 0;
}
.console-drawer-body .console-tagbar .console-tag-add { width: 100%; }
.console-drawer-body .console-tag-none { font-size: 0.82rem; color: var(--text-muted); }

/* The aqua reply rule above was a single class, but the Teams-layout rule that
   set the gold background is `.ticket-thread--staff .ticket-msg--agent` — two
   classes, so it kept winning and only the name turned aqua. Match the
   specificity explicitly on both threads. */
.ticket-thread--staff .ticket-msg--agent,
.ticket-thread--partner .ticket-msg--agent {
  background: rgba(0,176,185,0.10);
  border-color: rgba(0,176,185,0.38);
}
.ticket-thread--staff .ticket-msg--agent .ticket-msg-who,
.ticket-thread--partner .ticket-msg--agent .ticket-msg-who { color: var(--aqua); }

/* ── ACTIONS DRAWER: compact rows ──
   Stacking every control and button full width made five toggles fill the whole
   panel — you couldn't take the ticket's state in at a glance. Put the control
   and its button on one row: the field grows, the button sits to its right. */
.console-drawer-body .console-actionform {
  flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px;
}
.console-drawer-body .console-actionform select,
.console-drawer-body .console-actionform input[type="text"],
.console-drawer-body .console-actionform input[type="date"] {
  flex: 1 1 140px; width: auto; min-width: 0;
}
.console-drawer-body .console-actionbtn {
  width: auto; flex: 0 0 auto; white-space: nowrap;
}
/* Standalone actions (Assign to me) keep the full row — they have no field. */
.console-drawer-body .console-actionform--solo .console-actionbtn { width: 100%; }
.console-drawer-body .console-actionhint { flex: 1 1 100%; margin: 0; }
.console-drawer-body .console-actionbar,
.console-drawer-body .console-actionbar--quiet { gap: 10px; }
.console-drawer-body .console-drawer-section { padding-top: 16px; }
.console-drawer-body { gap: 14px; }

/* ── KB ADMIN ──
   /kb-admin/ (template-portal-kb.php) reuses .ticket-form, .ticket-label,
   .ticket-hint, .deal-table*, .asset-notice, .btn-primary and .console-actionbtn
   wholesale. Only the handful of things with no existing class live here. */

/* The article body is the point of the page — give it real room, and a
   monospace face so the author can see the HTML they are writing. */
.ticket-form textarea.kba-content {
  min-height: 460px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.86rem;
  line-height: 1.65;
  tab-size: 2;
}
.ticket-form textarea.kba-excerpt { min-height: 84px; }

/* Required-field marker on the labels. */
.kba-req { color: var(--tomato); margin-left: 2px; }

/* Draft marker sitting inline after a title in the list table — .deal-badge
   supplies the look, this just seats it next to the text. */
.kba-pill { margin-left: 8px; vertical-align: middle; }

/* The article's live URL, echoed under the edit form's heading. */
.kba-url { color: var(--text-muted); word-break: break-all; }

/* The trash form deliberately does NOT carry .ticket-form: that class is bound
   by theme.js's double-submit guard, which would disable the button even when
   the operator cancels the confirm dialog. Same stacked shape, kept apart. */
.kba-dangerform {
  display: flex; flex-direction: column; gap: 8px;
  max-width: 720px; margin-top: 34px;
  padding-top: 26px; border-top: 1px solid var(--border);
}
.kba-dangerform .ticket-hint { margin-bottom: 4px; }
.kba-dangerform .console-actionbtn { align-self: flex-start; cursor: pointer; }

/* ── TRUSTEDEXPERT LOG (moved out of template-portal-expert-log.php) ── */


/* ── TRUSTEDEXPERT LOG ── (relocated from template-portal-expert-log.php) */
/* ── TrustedExpert Log — panels ── */
.tel-panel {
  margin: 0 0 24px;
  padding: 18px 20px;
  border-radius: 10px;
  background: var(--dark-3);
  border: 1px solid var(--border);
}
.tel-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.tel-panel-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--white);
}
.tel-panel-sub {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 14px;
}

/* ── Ranked unanswered questions ── */
.tel-top-list { list-style: none; margin: 0; padding: 0; }
.tel-top-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid rgba(201, 168, 76, 0.12);
}
.tel-top-row:first-child { border-top: 0; }
.tel-top-count {
  flex: 0 0 auto;
  min-width: 34px;
  padding: 3px 8px;
  border-radius: 6px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--tomato);
  background: rgba(240, 73, 62, 0.09);
  border: 1px solid rgba(240, 73, 62, 0.35);
}
.tel-top-q { flex: 1 1 auto; min-width: 0; color: var(--text); font-size: 0.92rem; }
.tel-top-q a { color: var(--text); text-decoration: none; }
.tel-top-q a:hover { color: var(--gold); }
.tel-top-kb {
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gold);
  text-decoration: none;
  white-space: nowrap;
}
.tel-top-kb:hover { color: var(--gold-light); text-decoration: underline; }

/* ── Active-filter chips ── */
.tel-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 16px; }
.tel-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--text);
  background: rgba(201, 168, 76, 0.08);
  border: 1px solid var(--border);
}
.tel-chip-clear { font-size: 0.78rem; color: var(--gold); text-decoration: none; }
.tel-chip-clear:hover { text-decoration: underline; }

/* ── Table cells ── */
.tel-cell-q { max-width: 520px; }
.tel-cell-sub { display: block; margin-top: 3px; font-size: 0.76rem; color: var(--text-muted); }

/* ── Pagination ── */
.tel-pager { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 16px; }
.tel-pager-link {
  padding: 6px 12px;
  border-radius: 7px;
  border: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--text);
  text-decoration: none;
}
.tel-pager-link:hover { border-color: var(--gold); color: var(--gold); }
.tel-pager-at { font-size: 0.8rem; color: var(--text-muted); }

/* ── Detail view ── */
.tel-block {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: 9px;
  background: var(--dark-2);
  border: 1px solid var(--border);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 0.94rem;
  line-height: 1.6;
}
.tel-block--muted { color: var(--text-muted); font-style: italic; }
.tel-sources { list-style: none; margin: 0; padding: 0; }
.tel-sources li { padding: 4px 0; overflow-wrap: anywhere; }
.tel-sources a { color: var(--gold); }

/* ── Integration panel ── */
.tel-code {
  display: block;
  padding: 10px 12px;
  border-radius: 7px;
  background: var(--dark);
  border: 1px solid var(--border);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  color: var(--text);
  overflow-x: auto;
  white-space: pre;
  margin: 0 0 14px;
}
.tel-secret-out {
  border-color: rgba(240, 73, 62, 0.5);
  color: var(--gold-light);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.tel-field-list { list-style: none; margin: 0 0 14px; padding: 0; }
.tel-field-list li { padding: 4px 0; font-size: 0.85rem; color: var(--text-muted); }
.tel-field-list code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--gold);
  margin-right: 6px;
}
.tel-actions { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; margin-top: 6px; }
.tel-actions form { margin: 0; }
.tel-warn {
  display: block;
  max-width: 460px;
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.tel-confirm { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0; max-width: 460px; }
.tel-confirm label { font-size: 0.8rem; color: var(--text-muted); }

@media (max-width: 700px) {
  .tel-top-row { flex-wrap: wrap; }
  .tel-top-kb { margin-left: 48px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   KB ADMIN — CATEGORY / SECTION CHIPS AND THE STRUCTURE EDITOR
   template-portal-kb.php. `ht_kb_category` is two levels: a CATEGORY groups
   sections on the public landing page, a SECTION is what an article is
   filed under. The two chips have to be tellable apart at a glance, so the
   SECTION chip leads (aqua, solid) and the CATEGORY chip sits behind it
   (muted, dashed) — the article lives in the section; the category is context.
   Colours are tokens only, so both themes follow.
   ══════════════════════════════════════════════════════════════════════════ */

.kba-chip {
  display: inline-block;
  margin: 2px 6px 2px 0;
  padding: 1px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--dark-3);
  color: var(--text-muted);
  font-size: 0.74rem;
  line-height: 1.75;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}
a.kba-chip:hover,
a.kba-chip:focus-visible {
  border-color: var(--gold);
  color: var(--gold);
}

/* SECOND fiddle: the category an article's section happens to sit in. */
.kba-chip--cat {
  border-style: dashed;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* THE filing. Solid, coloured, heavier — this is the term on the post. */
.kba-chip--section {
  border-color: var(--aqua);
  color: var(--aqua);
  font-weight: 600;
}

/* An article carrying no section at all (only reachable from wp-admin). */
.kba-chip--none {
  border-style: dashed;
  color: var(--text-muted);
  font-style: italic;
}

/* Active server-side filter, above the table. */
.kba-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
}
.kba-filterbar-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Sections & categories view (?terms=1) ── */
.kba-structure { margin: 6px 0 28px; }
.kba-structure-cat {
  padding: 14px 16px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--dark-3);
}
.kba-structure-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.kba-structure-count {
  font-size: 0.76rem;
  color: var(--text-muted);
}
.kba-structure-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0 0 0 18px;
  border-left: 1px solid var(--border);
}
.kba-structure-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}
.kba-structure-empty { margin: 8px 0 0 18px; }
.kba-structure-note {
  max-width: 620px;
  margin-top: 18px;
  color: var(--text-muted);
}

/* Inline rename — one small form per term, so it never becomes a page mode. */
.kba-renameform {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 0 auto;
}
.kba-renameform input[type="text"] {
  width: 220px;
  max-width: 46vw;
  padding: 3px 8px;
  font-size: 0.8rem;
}
.kba-renameform button {
  font: inherit;          /* a <button> does not inherit the page font on its own */
  font-size: 0.8rem;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

/* The two add-a-term forms sit under the tree. */
.kba-termform {
  max-width: 520px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

@media (max-width: 700px) {
  .kba-renameform { margin-left: 0; width: 100%; }
  .kba-renameform input[type="text"] { flex: 1 1 auto; max-width: none; }
}

/* ── ASSET ADMIN ── (relocated from template-portal-asset-admin.php) */
/* --- BEGIN TEMPORARY INLINE CSS: Asset Admin (move to style.css) --- */

.aa-banner {

  display: flex; gap: 14px; align-items: flex-start;

  background: var(--dark-3); border: 1px solid rgba(240,73,62,0.45);

  border-left: 3px solid var(--tomato);

  border-radius: 6px; padding: 15px 20px; margin-bottom: 22px;

  font-size: 0.86rem; color: var(--text-muted); line-height: 1.55;

}

.aa-banner-icon { font-size: 1.05rem; line-height: 1.35; }

.aa-banner strong { color: var(--white); font-weight: 600; }

.aa-banner code {

  background: rgba(127,127,140,0.16); border-radius: 3px;

  padding: 1px 5px; font-size: 0.92em; color: var(--white);

}



.aa-forms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 26px; }

@media (max-width: 780px) { .aa-forms { grid-template-columns: 1fr; } }

.aa-forms .ticket-form { margin: 0; }

.aa-form-title { font-size: 0.95rem; color: var(--white); font-weight: 600; margin: 0 0 4px; }

.aa-hint { font-size: 0.78rem; color: var(--text-muted); margin: 6px 0 14px; line-height: 1.5; }



.aa-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.aa-actionlink {

  font-size: 0.8rem; color: var(--text-muted); text-decoration: none;

  border-bottom: 1px solid transparent; white-space: nowrap;

}

.aa-actionlink:hover { color: var(--white); border-bottom-color: var(--border); }

.aa-actionlink--danger:hover { color: var(--tomato); border-bottom-color: rgba(240,73,62,0.5); }



.aa-panel {

  background: var(--dark-3); border: 1px solid var(--border);

  border-radius: 6px; padding: 22px 24px; margin-bottom: 26px;

}

.aa-panel--danger { border-color: rgba(240,73,62,0.5); }

.aa-panel .ticket-form { margin: 0; }

.aa-target { font-size: 1.05rem; color: var(--white); font-weight: 600; margin: 0 0 4px; word-break: break-all; }

.aa-target-meta { font-size: 0.78rem; color: var(--text-muted); margin: 0 0 18px; }



.aa-check { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 4px; }

.aa-check input { margin-top: 3px; }

.aa-check label { font-size: 0.84rem; color: var(--text); line-height: 1.5; }



.aa-danger-btn {

  background: var(--tomato); color: #fff; border: 0; border-radius: 4px;

  padding: 11px 22px; font-size: 0.85rem; font-weight: 600; cursor: pointer;

  letter-spacing: 0.02em;

}

.aa-danger-btn:hover { filter: brightness(1.08); }

.aa-cell-icon { margin-right: 9px; opacity: 0.85; }

.aa-empty { font-size: 0.86rem; }

/* --- END TEMPORARY INLINE CSS: Asset Admin --- */
/*
Theme Name: Onclave Networks
Theme URI: https://onclavenetworks.com
Author: Onclave Networks, Inc.
Author URI: https://onclavenetworks.com
Description: Official WordPress theme for Onclave Networks — Zero Trust Security for IT/OT/IoT. Dark theme with gold primary color.
Version: 1.0.0
License: Proprietary
Text Domain: onclave
*/

/* ═══════════════════════════════════════════════════════════
   Onclave Networks — WordPress Theme Stylesheet
   Dark / Gold edition  |  v1.0.0
   ═══════════════════════════════════════════════════════════ */

/* ── RESET & ROOT ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --gold:       #C9A84C;
  --gold-light: #E8C96A;
  --gold-dark:  #A07830;
  --aqua:       #00A89D;
  --tomato:     #F0493E;
  --navy:       #0D2B6B;
  --dark:       #0E0E12;
  --dark-2:     #161620;
  --dark-3:     #1E1E2A;
  --dark-4:     #252535;
  --text:       #E2E2E2;
  --text-muted: #8A8A9A;
  --white:      #FFFFFF;
  --border:     rgba(201,168,76,0.18);
}

html { scroll-behavior: smooth; }
body { font-family: 'Jost', sans-serif; color: var(--text); background: var(--dark); }

/* WordPress admin bar offset */
body.admin-bar #site-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar #site-header { top: 46px; }
}

/* Remove default WordPress block gap */
.wp-site-blocks { padding: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }

/* ── HEADER ── */
#site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 60px; height: 80px;
  background: rgba(14,14,18,0); transition: background 0.3s, border-bottom 0.3s;
  border-bottom: 1px solid transparent;
}
#site-header.scrolled {
  background: rgba(14,14,18,0.96);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
}
.logo { font-size: 1.7rem; font-weight: 700; color: var(--gold); letter-spacing: 0.06em; text-decoration: none; }

/* Primary nav — wp_nav_menu() outputs a <ul> */
#site-header nav { display: flex; align-items: center; gap: 32px; }
/* Mobile animation picker row — hidden on desktop, flex on mobile */
.nav-anim-row { display: none; }
#site-header nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 32px; }
#site-header nav ul li { margin: 0; padding: 0; }
#site-header nav ul li a,
#site-header nav > a {
  color: rgba(255,255,255,0.75); text-decoration: none;
  font-size: 0.9rem; font-weight: 500; transition: color 0.2s; letter-spacing: 0.02em;
}
#site-header nav ul li a:hover,
#site-header nav > a:hover { color: var(--gold); }
#site-header nav ul li.current-menu-item > a,
#site-header nav ul li.current-menu-parent > a,
#site-header nav ul li.current-menu-ancestor > a,
#site-header nav > a.active {
  color: var(--gold);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 2px;
}
#site-header nav ul li { position: relative; }
#site-header nav ul li ul {
  display: none;
  position: absolute; top: 100%; left: 0;
  background: rgba(14,14,18,0.97); border: 1px solid var(--border);
  border-radius: 4px; min-width: 180px; padding: 8px 0;
  z-index: 300;
}
#site-header nav ul li:hover > ul { display: block; }
#site-header nav ul li ul li { display: block; width: 100%; }
#site-header nav ul li ul li a {
  display: block; padding: 9px 18px;
  color: rgba(255,255,255,0.75) !important; font-size: 0.85rem;
  white-space: nowrap;
}
#site-header nav ul li ul li a:hover { color: var(--gold) !important; background: rgba(201,168,76,0.06); }

.btn-contact {
  background: transparent; color: var(--gold) !important;
  border: 1.5px solid var(--gold); border-radius: 4px;
  padding: 9px 22px; font-weight: 600 !important;
  transition: all 0.2s !important; letter-spacing: 0.04em;
  text-decoration: none; font-size: 0.9rem;
}
.btn-contact:hover { background: var(--gold) !important; color: var(--dark) !important; }

.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  color: var(--text); font-size: 1.4rem; line-height: 1; padding: 4px;
}

/* ── HERO ── */
.hero {
  position: relative; min-height: 580px;
  display: flex; align-items: center;
  background: var(--dark); overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  /* Dark mode fallback (overridden by per-animation navy rules below) */
  background:
    radial-gradient(ellipse at 20% 60%, rgba(201,168,76,0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(201,168,76,0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(201,168,76,0.14) 0%, transparent 50%);
}
/* Dark mode navy glow — all animations */
html[data-hero-anim="off"]       .hero-bg,
html[data-hero-anim="aurora"]    .hero-bg,
html[data-hero-anim="particles"] .hero-bg,
html[data-hero-anim="radar"]     .hero-bg,
html[data-hero-anim="hex"]       .hero-bg,
html[data-hero-anim="circuit"]   .hero-bg,
html[data-hero-anim="stream"]    .hero-bg {
  background:
    radial-gradient(ellipse at 20% 60%, rgba(30,75,200,0.30) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(30,75,200,0.22) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(30,75,200,0.16) 0%, transparent 50%);
}

.hero-grid {
  position: absolute; inset: 0;
  overflow: hidden;
}
.hero-line { display: none; }
.hero-content { position: relative; z-index: 2; padding: 150px 80px 80px; max-width: 720px; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.72rem; font-weight: 700; color: var(--gold);
  letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 20px;
}
.hero-eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--gold); }
.hero-content h1 { font-size: 3rem; font-weight: 700; color: var(--white); line-height: 1.12; margin-bottom: 20px; }
.hero-sub-headline { display: block; font-size: 1.6rem; font-weight: 400; color: var(--text-muted); white-space: nowrap; margin-top: 8px; }
.hero-content h1 em { color: var(--gold); font-style: normal; }
.hero-content p { font-size: 1.05rem; color: var(--text-muted); margin-bottom: 38px; font-weight: 300; line-height: 1.7; white-space: nowrap; }
.hero-buttons { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

.page-hero { min-height: 340px; }
.page-hero .hero-content { padding: 140px 80px 60px; }
.page-hero .hero-content h1 { font-size: 2.3rem; white-space: nowrap; }

/* ── BUTTONS ── */
.btn-primary {
  display: inline-block; background: var(--gold); color: var(--dark);
  border-radius: 4px; padding: 13px 30px; font-size: 0.9rem;
  font-weight: 700; text-decoration: none; transition: all 0.2s;
  letter-spacing: 0.04em; font-family: 'Jost', sans-serif;
}
.btn-primary:hover { background: var(--gold-light); color: var(--dark); }

.btn-ghost {
  display: inline-block; color: rgba(255,255,255,0.6);
  font-size: 0.9rem; font-weight: 500; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.btn-ghost:hover { color: var(--gold); border-color: var(--gold); }

.btn-outline {
  display: inline-block; border: 1.5px solid var(--gold); color: var(--gold);
  border-radius: 4px; padding: 12px 28px; font-size: 0.88rem;
  font-weight: 600; text-decoration: none; transition: all 0.2s;
  letter-spacing: 0.04em; font-family: 'Jost', sans-serif;
}
.btn-outline:hover { background: var(--gold); color: var(--dark); }

.btn-outline-dark {
  display: inline-block; border: 1.5px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.7);
  border-radius: 4px; padding: 12px 28px; font-size: 0.88rem;
  font-weight: 600; text-decoration: none; transition: all 0.2s; font-family: 'Jost', sans-serif;
}
.btn-outline-dark:hover { border-color: var(--gold); color: var(--gold); }

.btn-dark {
  display: inline-block; background: var(--dark); color: var(--gold);
  border-radius: 4px; padding: 13px 34px; font-size: 0.9rem;
  font-weight: 700; text-decoration: none; transition: all 0.2s; font-family: 'Jost', sans-serif;
}
.btn-dark:hover { background: var(--dark-2); }

/* ── SECTION UTILITIES ── */
.section-rule       { width: 36px; height: 2px; background: var(--gold); margin: 0 auto 20px; }
.section-rule-left  { width: 36px; height: 2px; background: var(--gold); margin: 0 0 20px; }
.section-rule-aqua  { width: 36px; height: 2px; background: var(--aqua); margin: 0 0 20px; }

.section { padding: 56px 60px 32px; }
.section-dark  { background: var(--dark); }
.section-dark2 { background: var(--dark-2); }
.section-dark3 { background: var(--dark-3); }
.section-centered { text-align: center; }

.section h2 { font-size: 1.85rem; font-weight: 700; line-height: 1.25; }
.section-dark  h2,
.section-dark2 h2,
.section-dark3 h2 { color: var(--white); }
.section h2 span { color: var(--gold); }

.section-lead { font-size: 0.98rem; line-height: 1.8; max-width: 760px; margin: 0 auto 52px; color: var(--text-muted); font-weight: 300; }

.container { max-width: 1140px; margin: 0 auto; }

/* ── VALUE CARDS ── */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card {
  background: var(--dark-3); border: 1px solid var(--border);
  border-radius: 6px; padding: 30px 26px 34px;
  transition: border-color 0.2s, transform 0.2s;
}
.card:hover { border-color: var(--gold); transform: translateY(-3px); }
.card-title { font-size: 1.05rem; font-weight: 700; color: var(--white); margin-bottom: 6px; }
.card-sub {
  font-size: 0.68rem; font-weight: 700; color: var(--gold);
  letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.card ul { list-style: none; margin: 0; padding: 0; }
.card ul li {
  font-size: 0.88rem; color: var(--text-muted); line-height: 1.55;
  padding: 4px 0 4px 16px; position: relative;
}
.card ul li::before { content: '\203A'; position: absolute; left: 0; color: var(--gold); font-weight: 700; }

/* ── SPLIT LAYOUT ── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split-text h2 { color: var(--white); margin-bottom: 16px; }
.split-text p { font-size: 0.95rem; line-height: 1.78; color: var(--text-muted); margin-bottom: 14px; }
.split-image-placeholder {
  width: 100%; aspect-ratio: 4/3; border-radius: 6px;
  background: var(--dark-3); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 0.8rem; letter-spacing: 0.1em;
}

/* ── WHITEPAPER CARDS (teaser) ── */
.wp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.wp-card {
  background: var(--dark-3); border: 1px solid var(--border);
  border-radius: 6px; padding: 26px 22px 22px;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color 0.2s;
}
.wp-card:hover { border-color: var(--gold); }
.wp-tag { font-size: 0.68rem; font-weight: 700; color: var(--aqua); letter-spacing: 0.12em; text-transform: uppercase; }
.wp-card p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.55; flex: 1; }
.wp-link { font-size: 0.7rem; font-weight: 700; color: var(--gold); text-decoration: none; letter-spacing: 0.08em; text-transform: uppercase; }
.wp-link:hover { color: var(--gold-light); }

/* ── ICEBERG ── */
.iceberg-wrap {
  display: grid; grid-template-columns: 55% 45%; align-items: center;
  background: linear-gradient(180deg, #0a1a2e 0%, #061220 50%, #030a14 100%);
  overflow: hidden;
}
.iceberg-image-col { display: flex; align-items: center; justify-content: center; padding: 32px 16px 32px 32px; }

/* Image wrapper — needed to layer waterline + scanner on top of img */
.iceberg-img-wrap {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}
.iceberg-img {
  width: 480px; height: auto; display: block; flex-shrink: 0;
  animation: iceberg-float 6s ease-in-out infinite;
}
@keyframes iceberg-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}


/* Scanner — sweeps down from top, stops at waterline */
.iceberg-scanner {
  position: absolute;
  left: 0; right: 0;
  top: 0; height: 3px;
  background: linear-gradient(90deg, transparent, rgba(0,175,186,0.9), transparent);
  animation: iceberg-scan 4s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(0,175,186,0.6);
}
@keyframes iceberg-scan {
  0%   { top: 0%;   opacity: 0; }
  5%   { opacity: 1; }
  95%  { top: 100%; opacity: 0.9; }
  100% { top: 100%; opacity: 0; }
}

.iceberg-caption {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  padding: 48px 32px 48px 16px;
  overflow: hidden;
}
.iceberg-caption h2 { color: var(--white); font-size: 1.9rem; line-height: 1.25; margin: 0; position: relative; z-index: 1; }
.iceberg-caption p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.72; font-weight: 300; margin: 0; position: relative; z-index: 1; }

/* Threat canvas — fills caption behind text */
.iceberg-threat-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* Stats row */
.iceberg-stats {
  display: flex; gap: 32px; position: relative; z-index: 1;
}
.iceberg-stat { display: flex; flex-direction: column; gap: 4px; }
.iceberg-stat-num {
  font-size: 2.2rem; font-weight: 700; color: var(--gold); line-height: 1;
  font-family: 'Jost', sans-serif;
}
.iceberg-stat-label {
  font-size: 0.78rem; color: rgba(255,255,255,0.45); line-height: 1.4; max-width: 130px;
}

/* ── ONCLAVE DIFFERENCE ── */
.difference-wrap { max-width: 820px; display: flex; flex-direction: column; align-items: flex-start; gap: 0; }

/* ── WHITEPAPERS SECTION ── */
.section-wp { background: linear-gradient(135deg, #0d1f2d 0%, #0a1520 100%); }

/* ── PARTNER PORTAL ── */
.portal-hero {
  min-height: 320px;
  border-bottom: 1px solid var(--border);
  padding: 120px 80px 48px;
}
.portal-hero-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
  flex-wrap: wrap;
  position: relative; z-index: 1;
}
.portal-eyebrow {
  font-size: 0.72rem; font-weight: 700; color: var(--aqua);
  letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 12px;
}
.portal-welcome h1 {
  font-size: 2.4rem; font-weight: 700; color: var(--white);
  margin: 0 0 8px; line-height: 1.15;
}
.portal-welcome h1 span { color: var(--gold); }
.portal-company { font-size: 1rem; color: var(--text-muted); font-weight: 300; }
.portal-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.portal-badge {
  display: inline-block; background: rgba(201,168,76,0.12);
  border: 1px solid rgba(201,168,76,0.35); color: var(--gold);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 5px 14px; border-radius: 20px;
}
.portal-since { font-size: 0.8rem; color: var(--text-muted); }
.portal-logout {
  font-size: 0.8rem; color: var(--text-muted); text-decoration: none;
  transition: color 0.2s;
}
.portal-logout:hover { color: var(--gold); }

.portal-section { padding-top: 52px; padding-bottom: 52px; }
/* Section labels are GOLD (partner-facing). Aqua is reserved for staff surfaces
   — see .portal-section-label--agent and .portal-badge--agent. */
.portal-section-label {
  font-size: 0.72rem; font-weight: 700; color: var(--gold);
  letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 24px;
}

/* Quick action cards */
.portal-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px;
}
/* Deal-registration status badges (reuse the ticket-badge shape) */
.deal-badge {
  display: inline-block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border);
  align-self: flex-start;
}
.deal-badge--pending    { color: var(--gold);       border-color: rgba(201,168,76,0.40); background: rgba(201,168,76,0.08); }
.deal-badge--approved   { color: var(--aqua);       border-color: rgba(0,168,157,0.40);  background: rgba(0,168,157,0.08); }
.deal-badge--active     { color: #3E7BD6;           border-color: rgba(62,123,214,0.40); background: rgba(62,123,214,0.10); }
.deal-badge--attention  { color: #E8912C;           border-color: rgba(232,145,44,0.40); background: rgba(232,145,44,0.10); }
.deal-badge--hold       { color: var(--text-muted); border-color: var(--border);         background: rgba(138,138,154,0.10); }
.deal-badge--done       { color: #3BA55D;           border-color: rgba(59,165,93,0.45);  background: rgba(59,165,93,0.10); }
.deal-badge--declined   { color: var(--tomato);     border-color: rgba(240,73,62,0.40);  background: rgba(240,73,62,0.08); }
/* "Needs more info" callout on the partner deal detail / resubmit view */
.deal-callout {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding: 16px 20px; border-radius: 10px; margin: 6px 0 24px;
  border: 1px solid rgba(232,145,44,0.45); background: rgba(232,145,44,0.09);
}
.deal-callout strong { color: #E8912C; font-weight: 700; }
.deal-callout span { color: var(--white); opacity: 0.9; }
.deal-callout-cta { margin-left: auto; white-space: nowrap; }
@media (max-width: 640px) { .deal-callout-cta { margin-left: 0; width: 100%; text-align: center; } }
/* Section headings inside the deal-registration form */
.deal-group {
  font-size: 1.05rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--gold); margin: 28px 0 8px; padding-top: 18px; border-top: 1px solid var(--border);
}
.deal-group:first-of-type { border-top: none; padding-top: 0; margin-top: 2px; }
/* Per-section colours from the brand palette */
.deal-group--reseller      { color: #00A89D; border-top-color: rgba(0,168,157,0.35); }
.deal-group--prospect      { color: #C9A84C; border-top-color: rgba(201,168,76,0.35); }
.deal-group--milestones    { color: #F0493E; border-top-color: rgba(240,73,62,0.35); }
.deal-group--qualification { color: #3E7BD6; border-top-color: rgba(62,123,214,0.35); }
/* Two-column deal-registration form so all fields fit on one page.
   `.ticket-form.deal-form` (2 classes) beats `.ticket-form` no matter the source order. */
.ticket-form.deal-form { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 30px; max-width: 940px; }
.deal-form .deal-group { grid-column: 1 / -1; }
.deal-form .deal-field { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.deal-form .deal-field--wide { grid-column: 1 / -1; }
.deal-form > .btn-primary { grid-column: 1 / -1; margin-top: 20px; }
@media (max-width: 640px) { .ticket-form.deal-form { grid-template-columns: 1fr; } }
/* Partner "My Deals" — sortable / filterable table */
.deal-table-tools { display: flex; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.deal-table-search, .deal-table-filter {
  background: var(--dark-4); border: 1px solid var(--border); color: var(--white);
  border-radius: 6px; padding: 9px 13px; font-family: 'Jost', sans-serif; font-size: 0.9rem;
}
.deal-table-search { flex: 1; min-width: 200px; }
.deal-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
.deal-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.deal-table th {
  text-align: left; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); padding: 12px 16px; border-bottom: 1px solid var(--border);
  cursor: pointer; user-select: none; white-space: nowrap; background: var(--dark-3);
}
.deal-table th[data-sort]:hover { color: var(--gold); }
.deal-table th[aria-sort]::after { content: ' \2195'; opacity: 0.45; }
.deal-table th[aria-sort="ascending"]::after  { content: ' \2191'; opacity: 1; color: var(--gold); }
.deal-table th[aria-sort="descending"]::after { content: ' \2193'; opacity: 1; color: var(--gold); }
.deal-table td { padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--white); vertical-align: middle; }
.deal-table tbody tr:last-child td { border-bottom: none; }
.deal-table tbody tr { cursor: pointer; transition: background 0.15s; }
.deal-table tbody tr:hover { background: var(--dark-3); }
.deal-table-view { color: var(--gold); text-decoration: none; white-space: nowrap; }
.deal-table tbody tr:hover .deal-table-view { color: var(--gold-light); }
/* Asset Library list view — reuses .deal-table; only the extras below are asset-specific. */
.asset-cell-icon { margin-right: 9px; }
.asset-cell-name { font-weight: 500; }
/* File rows don't navigate on row-click, so don't imply they do. */
.asset-table tbody tr:not([data-href]) { cursor: default; }
.deal-table-view--disabled { color: var(--text-muted); cursor: not-allowed; }
.deal-table tbody tr:hover .deal-table-view--disabled { color: var(--text-muted); }
.portal-card {
  position: relative;
  background: var(--dark-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 28px 24px;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color 0.2s, transform 0.2s;
}
.portal-card:hover {
  border-color: var(--gold); transform: translateY(-3px);
}
.portal-card--coming { opacity: 0.65; }
.portal-card--coming:hover { transform: none; border-color: var(--border); cursor: default; }
.portal-card-badge {
  position: absolute; top: 14px; right: 14px;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
  background: var(--dark-3); border: 1px solid var(--border);
  padding: 3px 8px; border-radius: 10px;
}
.portal-card-icon { font-size: 1.6rem; line-height: 1; }
.portal-card-title { font-size: 1rem; font-weight: 600; color: var(--white); margin: 0; }
.portal-card-desc { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; flex: 1; }
.portal-card-link { font-size: 0.82rem; font-weight: 600; color: var(--gold); margin-top: 4px; }

/* Two-column layout */
.portal-two-col { display: grid; grid-template-columns: 1fr 340px; gap: 52px; align-items: start; }

/* Announcements */
.portal-announcement-list { display: flex; flex-direction: column; gap: 28px; }
.portal-announcement { border-left: 2px solid var(--border); padding-left: 20px; }
.portal-announcement-date { font-size: 0.75rem; color: var(--aqua); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px; }
.portal-announcement-title { font-size: 0.95rem; font-weight: 600; color: var(--white); margin-bottom: 6px; }
.portal-announcement-body { font-size: 0.85rem; color: var(--text-muted); line-height: 1.65; }

/* Account team */
.portal-team-card {
  background: var(--dark-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 24px;
  display: flex; gap: 16px; align-items: flex-start;
  margin-bottom: 16px;
}
.portal-team-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(201,168,76,0.15); border: 1px solid rgba(201,168,76,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 700; color: var(--gold);
  flex-shrink: 0; letter-spacing: 0.05em;
}
.portal-team-info { display: flex; flex-direction: column; gap: 4px; }
.portal-team-name { font-size: 0.95rem; font-weight: 600; color: var(--white); }
.portal-team-role { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 4px; }
.portal-team-email,
.portal-team-phone {
  font-size: 0.82rem; color: var(--aqua); text-decoration: none; display: block;
  transition: color 0.2s;
}
.portal-team-email:hover,
.portal-team-phone:hover { color: var(--white); }
.portal-team-avatar--sales {
  background: rgba(0,210,200,0.12); border-color: rgba(0,210,200,0.3);
  color: var(--aqua);
}
.portal-team-note { font-size: 0.78rem; color: var(--text-muted); line-height: 1.6; }

/* Portal responsive */
@media (max-width: 1024px) {
  .portal-cards { grid-template-columns: repeat(2, 1fr); }
  .portal-two-col { grid-template-columns: 1fr; }
  .portal-meta { align-items: flex-start; }
}
@media (max-width: 768px) {
  .portal-hero { padding: 110px 24px 40px; }
  .portal-cards { grid-template-columns: 1fr; }
}

/* ── PLATFORM BAND ── */
.platform-band h2 { color: var(--white); margin-bottom: 20px; }

/* ── FEATURE GRID ── */
.feature-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.feature-item { display: flex; gap: 16px; }
.feature-icon {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 4px;
  background: var(--dark-4); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-size: 1.1rem;
}
.feature-item h3 { font-size: 0.98rem; font-weight: 700; color: var(--white); margin-bottom: 6px; }
.feature-item p { font-size: 0.86rem; color: var(--text-muted); line-height: 1.6; }

/* ── STATS BAR ── */
.stats-bar { display: grid; grid-template-columns: repeat(3, 1fr); }
.stat { padding: 40px 20px; text-align: center; border-right: 1px solid var(--border); }
.stat:last-child { border-right: none; }
.stat-number { font-size: 2.8rem; font-weight: 700; color: var(--gold); }
.stat-label { font-size: 0.82rem; color: var(--text-muted); margin-top: 6px; letter-spacing: 0.04em; }

/* ── CTA BAND ── */
.cta-band {
  background: var(--dark-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  text-align: center; padding: 80px 60px; position: relative; overflow: hidden;
}
.cta-band::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(201,168,76,0.05) 0%, transparent 65%);
}
.cta-band h2 { font-size: 2rem; color: var(--white); font-weight: 700; margin-bottom: 12px; position: relative; }
.cta-band p { color: var(--text-muted); font-size: 0.98rem; font-weight: 300; max-width: 580px; margin: 0 auto 36px; position: relative; }
.cta-band .btn-primary { position: relative; }

/* ── BLOCKQUOTE ── */
.blockquote {
  border-left: 3px solid var(--gold); padding: 16px 20px;
  margin: 20px 0; background: var(--dark-3); border-radius: 0 4px 4px 0;
}
.blockquote p { font-style: italic; color: var(--text-muted); font-size: 0.92rem; line-height: 1.7; }
.blockquote cite { font-size: 0.78rem; color: var(--gold); font-style: normal; display: block; margin-top: 8px; }

/* ── TEAM GRID ── */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.team-card { text-align: center; }
.team-avatar {
  width: 110px; height: 110px; border-radius: 4px;
  background: var(--dark-3); border: 1px solid var(--border);
  margin: 0 auto 16px; display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; color: var(--gold); font-weight: 700;
}
.team-name { font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: 4px; }
.team-title { font-size: 0.82rem; color: var(--text-muted); }

/* ── CONTACT FORM ── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; letter-spacing: 0.06em; text-transform: uppercase; }
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%; padding: 12px 16px; background: var(--dark-3);
  border: 1px solid var(--border); border-radius: 4px;
  font-family: 'Jost', sans-serif; font-size: 0.9rem; color: var(--text);
  transition: border-color 0.2s;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-muted); }
.form-group input:focus,
.form-group textarea:focus { outline: none; border-color: var(--gold); }
.form-group textarea { height: 140px; resize: vertical; }
.form-group select { color: var(--text-muted); }
.contact-info h3 { font-size: 1.1rem; font-weight: 700; color: var(--white); margin-bottom: 20px; }
.contact-detail { display: flex; gap: 12px; margin-bottom: 18px; align-items: flex-start; }
.contact-detail-icon { color: var(--gold); font-size: 1rem; margin-top: 2px; }
.contact-detail p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.5; }
.contact-detail strong { color: var(--text); }

/* ── TESTIMONIALS ── */
.testimonial-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.testimonial {
  background: var(--dark-3); border: 1px solid var(--border);
  border-left: 3px solid var(--gold); padding: 28px 24px; border-radius: 0 6px 6px 0;
}
.testimonial-quote { font-size: 0.92rem; line-height: 1.72; color: var(--text-muted); margin-bottom: 16px; font-style: italic; }
.testimonial-author { font-size: 0.85rem; font-weight: 700; color: var(--white); }
.testimonial-role { font-size: 0.78rem; color: var(--gold); }

/* ── INDUSTRY GRID ── */
.industry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.industry-card {
  background: var(--dark-3); border: 1px solid var(--border); border-radius: 6px;
  overflow: hidden; transition: border-color 0.2s, transform 0.2s;
}
.industry-card:hover { border-color: var(--gold); transform: translateY(-3px); }
.industry-card-top { height: 80px; background: var(--dark-4); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--border); }
.industry-abbr { font-size: 1.3rem; font-weight: 700; color: var(--gold); letter-spacing: 0.08em; }
.industry-card-body { padding: 20px; }
.industry-card-body h3 { font-size: 0.98rem; font-weight: 700; color: var(--white); margin-bottom: 8px; }
.industry-card-body p { font-size: 0.84rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 12px; }
.industry-stat { font-size: 0.78rem; color: var(--aqua); line-height: 1.5; border-left: 2px solid var(--aqua); padding-left: 10px; margin-top: 12px; }

/* ── WHITEPAPER FULL PAGE ── */
.wp-full-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.wp-full-card {
  background: var(--dark-3); border: 1px solid var(--border); border-radius: 6px;
  display: flex; flex-direction: column; transition: border-color 0.2s, transform 0.2s;
}
.wp-full-card:hover { border-color: var(--gold); transform: translateY(-3px); }
.wp-full-card-top { padding: 26px 22px 22px; flex: 1; }
.wp-full-card-bottom { padding: 16px 22px; border-top: 1px solid var(--border); }

/* ── FILTER BAR ── */
.filter-bar { display: flex; gap: 10px; margin-bottom: 40px; flex-wrap: wrap; }
.filter-btn {
  padding: 7px 18px; border: 1px solid var(--border); border-radius: 4px;
  font-family: 'Jost', sans-serif; font-size: 0.8rem; font-weight: 600;
  color: var(--text-muted); background: transparent; cursor: pointer; transition: all 0.2s; letter-spacing: 0.04em;
}
.filter-btn:hover,
.filter-btn.active { border-color: var(--gold); color: var(--gold); background: rgba(201,168,76,0.08); }

/* ── PARTNER / GENERIC LOGIN ── */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--dark); padding: 100px 20px 40px;
  background-image: radial-gradient(ellipse at 30% 60%, rgba(201,168,76,0.05) 0%, transparent 50%);
}

/* Login page with hero animation — reuses .hero system */
.login-hero {
  min-height: 100vh !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 80px 20px 20px;
}
.login-hero .hero-bg {
  background:
    radial-gradient(ellipse at 25% 50%, rgba(201,168,76,0.07) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 30%, rgba(0,168,157,0.07) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 90%, rgba(240,73,62,0.04) 0%, transparent 50%);
}

.login-box {
  position: relative; z-index: 2;
  background: rgba(22,22,32,0.88); border: 1px solid var(--border); border-radius: 8px;
  padding: 48px 44px; width: 100%; max-width: 440px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ── ULTIMATE MEMBER FORM OVERRIDES (partner login) ── */
/* Hide UM's own form header — we supply our own title above */
.um-login-wrap .um .um-form-title,
.um-login-wrap .um .um-header,
.um-login-wrap .um-col-1 > .um-field:first-child .um-field-label:empty { display: none; }

/* Dark inputs */
.um-login-wrap .um input[type="text"],
.um-login-wrap .um input[type="password"],
.um-login-wrap .um input[type="email"] {
  background: var(--dark-3) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 4px !important;
  padding: 10px 14px !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 0.9rem !important;
}
.um-login-wrap .um input[type="text"]:focus,
.um-login-wrap .um input[type="password"]:focus,
.um-login-wrap .um input[type="email"]:focus {
  border-color: var(--gold) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(201,168,76,0.15) !important;
}

/* Field labels */
.um-login-wrap .um .um-field-label label {
  color: var(--text-muted) !important;
  font-size: 0.82rem !important;
  font-family: 'Jost', sans-serif !important;
  font-weight: 500 !important;
}

/* Gold login button */
.um-login-wrap .um .um-button,
.um-login-wrap .um input[type="submit"] {
  background: var(--gold) !important;
  color: var(--dark) !important;
  border: none !important;
  border-radius: 4px !important;
  font-family: 'Jost', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.04em !important;
  padding: 13px 30px !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}
.um-login-wrap .um .um-button:hover,
.um-login-wrap .um input[type="submit"]:hover {
  background: var(--gold-light) !important;
}

/* Checkbox + remember me */
.um-login-wrap .um .um-field-checkbox label,
.um-login-wrap .um .um-field-checkbox { color: var(--text-muted) !important; font-size: 0.82rem !important; }

/* Forgot password link */
.um-login-wrap .um .um-lost-password a {
  color: var(--gold) !important; font-size: 0.8rem !important; text-decoration: none !important;
}
.um-login-wrap .um .um-lost-password a:hover { color: var(--gold-light) !important; }

/* Remove UM's own box-shadow / card wrapper */
.um-login-wrap .um { box-shadow: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important; }
.login-logo { font-size: 1.6rem; font-weight: 700; color: var(--gold); margin-bottom: 8px; }
.login-title { font-size: 1.2rem; font-weight: 700; color: var(--white); margin-bottom: 4px; }
.login-sub { font-size: 0.84rem; color: var(--text-muted); margin-bottom: 32px; }
.login-forgot { font-size: 0.78rem; color: var(--gold); text-decoration: none; float: right; margin-top: -14px; margin-bottom: 20px; display: block; }
.login-forgot:hover { color: var(--gold-light); }
.login-footer { text-align: center; margin-top: 24px; font-size: 0.8rem; color: var(--text-muted); }
.login-footer a { color: var(--gold); text-decoration: none; }

/* ── BREADCRUMB ── */
.breadcrumb { padding: 12px 60px; background: var(--dark-2); border-bottom: 1px solid var(--border); }
.breadcrumb a { color: var(--gold); text-decoration: none; font-size: 0.8rem; }
.breadcrumb span { color: var(--text-muted); font-size: 0.8rem; margin: 0 6px; }
.breadcrumb .current { color: var(--text-muted); font-size: 0.8rem; }

/* ── FAQ ── */
.faq-item { border-bottom: 1px solid var(--border); padding: 22px 0; }
.faq-q { font-size: 0.98rem; font-weight: 600; color: var(--white); margin-bottom: 10px; }
.faq-a { font-size: 0.88rem; line-height: 1.7; color: var(--text-muted); }

/* ── STUB PAGES ── */
.stub {
  min-height: 50vh; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 16px; padding: 120px 60px 60px; text-align: center;
}
.stub h1 { font-size: 1.8rem; color: var(--white); }
.stub p { color: var(--text-muted); font-size: 0.95rem; }

/* ── GENERIC PAGE CONTENT ── */
.page-content { padding: 60px; max-width: 900px; margin: 0 auto; }
.page-content h1, .page-content h2, .page-content h3 { color: var(--white); margin-bottom: 12px; }
.page-content p { font-size: 0.95rem; line-height: 1.78; color: var(--text-muted); margin-bottom: 18px; }
.page-content a { color: var(--gold); text-decoration: none; }
.page-content a:hover { color: var(--gold-light); }

/* ── FOOTER ── */
#site-footer { background: var(--dark-2); border-top: 1px solid var(--border); }
.footer-top {
  display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 40px;
  padding: 48px 60px 36px; border-bottom: 1px solid var(--border);
}
.footer-logo { font-size: 1.5rem; font-weight: 700; color: var(--gold); margin-bottom: 6px; text-decoration: none; display: block; letter-spacing: 0.05em; }
.footer-tagline { font-size: 0.8rem; color: var(--text-muted); letter-spacing: 0.04em; }
.footer-desc { font-size: 0.78rem; color: var(--text-muted); margin-top: 8px; line-height: 1.5; max-width: 220px; }

.footer-nav { display: flex; align-items: center; justify-content: center; }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: center; }
.footer-nav li { margin: 0; padding: 0; list-style: none; }
.footer-nav a { color: var(--text-muted); text-decoration: none; font-size: 0.84rem; transition: color 0.2s; }
.footer-nav a:hover { color: var(--gold); }

.footer-right { text-align: right; }
.footer-phone { font-size: 0.95rem; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.footer-linkedin { font-size: 0.82rem; color: var(--text-muted); }
.footer-linkedin a { color: var(--gold); text-decoration: none; }
.footer-linkedin a:hover { color: var(--gold-light); }
.footer-bottom { padding: 20px 60px; text-align: center; }
.footer-bottom p { color: var(--text-muted); font-size: 0.78rem; font-weight: 500; margin-bottom: 4px; }
.footer-tm { color: rgba(255,255,255,0.2); font-size: 0.72rem; font-style: italic; }

/* ── FAQ ── */
.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 0; }
.faq-item { border-bottom: 1px solid var(--border); padding: 28px 0; }
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-q { font-size: 1.05rem; font-weight: 600; color: var(--white); margin-bottom: 12px; }
.faq-a { font-size: 1rem; color: var(--text-muted); line-height: 1.75; }

/* ── WORDPRESS ALIGNMENT ── */
.alignfull  { width: 100vw; margin-left: calc(50% - 50vw); }
.alignwide  { max-width: 1200px; width: 100%; margin-left: auto; margin-right: auto; }
.aligncenter { text-align: center; }

/* ── LEADERSHIP TEAM BIOS ── */
.team-grid-full {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px 32px;
}
.team-card-full {
  background: var(--dark-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: border-color 0.2s;
}
.team-card-full:hover { border-color: var(--gold); }
.team-card-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.team-card-header .team-avatar {
  margin: 0;
  flex-shrink: 0;
}
.team-bio { color: var(--text-muted); font-size: 1rem; line-height: 1.75; }
.team-bio p { margin: 0 0 12px; }
.team-bio p:last-child { margin-bottom: 0; }

/* ── TESTIMONIALS ── */
.testimonials-grid {
  columns: 2;
  column-gap: 32px;
}
.testimonial-card {
  background: var(--dark-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  break-inside: avoid;
  margin-bottom: 32px;
}
.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: 16px;
  left: 24px;
  font-size: 4rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.3;
  font-family: Georgia, serif;
}
.testimonial-quote {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.75;
  padding-top: 28px;
}
.testimonial-quote p { margin: 0 0 12px; }
.testimonial-quote p:last-child { margin-bottom: 0; }
.testimonial-author {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.testimonial-role {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.5;
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .split { grid-template-columns: 1fr; gap: 40px; }
  .iceberg { grid-template-columns: 1fr; }
  .iceberg-text { padding: 40px; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-top { grid-template-columns: 1fr; text-align: center; }
  .footer-right { text-align: center; }
  .footer-nav { justify-content: center; }
  .footer-nav ul { justify-content: center; }
}

@media (max-width: 768px) {
  #site-header { padding: 0 24px; }
  #site-header nav { display: none; flex-direction: column; align-items: flex-start; }
  #site-header nav.open { display: flex; position: absolute; top: 80px; left: 0; right: 0; background: rgba(14,14,18,0.98); padding: 20px 24px; border-bottom: 1px solid var(--border); gap: 16px; }
  /* Override desktop align-items:center + use gap for consistent spacing */
  #site-header nav ul { flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; }
  /* Contact + Partner Login — no extra margin, gap on parent handles spacing */
  #site-header nav > a { display: block; width: 100%; font-size: 0.9rem; margin: 0; }
  .nav-toggle { display: block; }
  /* Anim toggle stays visible on mobile — compact size to fit header */
  .header-actions .anim-toggle { min-width: 0; padding: 5px 10px; font-size: 0.72rem; }

  .hero-content { padding: 110px 24px 60px; }
  .hero-content h1 { font-size: 2rem; }
  .page-hero .hero-content h1 { white-space: normal; }
  .hero-content p { white-space: normal; }
  .hero-sub-headline { white-space: normal; font-size: 1.3rem; }

  .section { padding: 60px 24px; }
  .cards { grid-template-columns: 1fr; }
  .wp-grid { grid-template-columns: 1fr; }
  .wp-full-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .team-grid-full { grid-template-columns: 1fr; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .testimonials-grid { columns: 1; }
  .industry-grid { grid-template-columns: 1fr 1fr; }
  .stats-bar { grid-template-columns: 1fr; }
  .stat { border-right: none; border-bottom: 1px solid var(--border); }
  .stat:last-child { border-bottom: none; }

  .breadcrumb { padding: 12px 24px; }
  .footer-top { padding: 40px 24px 28px; }
  .footer-bottom { padding: 20px 24px; }
  .cta-band { padding: 60px 24px; }
  .login-box { padding: 32px 24px; }
}

@media (max-width: 480px) {
  .hero-content h1 { font-size: 1.7rem; }
  .team-grid { grid-template-columns: 1fr; }
  .industry-grid { grid-template-columns: 1fr; }
  .hero-buttons { flex-direction: column; align-items: flex-start; }
  .cards { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   THEME TOGGLE BUTTON
   ═══════════════════════════════════════════════════════════ */
.mode-toggle {
  background: none;
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 20px;
  padding: 6px 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  transition: border-color 0.2s, color 0.2s;
  flex-shrink: 0;
  min-width: 52px;
}
.mode-toggle:hover { border-color: var(--gold); color: var(--gold); }
.mode-toggle-icon { font-size: 0.9rem; line-height: 1; display: inline-block; width: 16px; text-align: center; }

/* Dark mode (default): show sun, hide moon */
html:not(.light-mode) .mode-icon-moon { display: none; }
/* Light mode: show moon, hide sun */
html.light-mode .mode-icon-sun { display: none; }

@media (max-width: 768px) {
  .mode-toggle { padding: 5px 10px; font-size: 0.72rem; }
}

/* ── HEADER ACTIONS GROUP ── */
.header-actions {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.anim-toggle {
  background: none;
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 20px;
  padding: 6px 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  transition: border-color 0.2s, color 0.2s;
  flex-shrink: 0;
  min-width: 100px;
}
.anim-toggle:hover { border-color: var(--aqua); color: var(--aqua); }
/* anim-toggle visible on mobile — see mobile media block above */

/* ═══════════════════════════════════════════════════════════
   HERO ANIMATION SYSTEM  (html[data-hero-anim="..."])
   ═══════════════════════════════════════════════════════════ */

/* — OFF — */
html[data-hero-anim="off"] .hero-grid { display: none; }

/* — PARTICLES / STREAM — canvas injected by JS — */
html[data-hero-anim="particles"] .hero-grid,
html[data-hero-anim="stream"]    .hero-grid { position: absolute; inset: 0; overflow: hidden; }

/* — RADAR — */
/* Rings — SVG circles, fill:none so no opacity accumulation */
html[data-hero-anim="radar"] .hero-grid::after {
  content: '';
  position: absolute;
  width: 800px; height: 800px;
  right: -120px; top: 50%;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Ccircle cx='400' cy='400' r='80'  fill='none' stroke='rgba(201,168,76,0.35)' stroke-width='1'/%3E%3Ccircle cx='400' cy='400' r='160' fill='none' stroke='rgba(201,168,76,0.26)' stroke-width='1'/%3E%3Ccircle cx='400' cy='400' r='240' fill='none' stroke='rgba(201,168,76,0.18)' stroke-width='1'/%3E%3Ccircle cx='400' cy='400' r='320' fill='none' stroke='rgba(201,168,76,0.11)' stroke-width='1'/%3E%3Ccircle cx='400' cy='400' r='395' fill='none' stroke='rgba(201,168,76,0.06)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat; background-position: center;
  border-radius: 50%;
  overflow: hidden;
}
/* Sweep — a circle the same size, rotating around its own center */
html[data-hero-anim="radar"] .hero-grid::before {
  content: '';
  position: absolute;
  width: 800px; height: 800px;
  right: -120px; top: 50%;
  transform: translateY(-50%) rotate(0deg);
  border-radius: 50%;
  overflow: hidden;
  background: conic-gradient(from 0deg, rgba(201,168,76,0.28) 0deg, transparent 55deg);
  animation: hero-radar 8s linear infinite;
}
@keyframes hero-radar {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}

/* — HEX GRID — */
html[data-hero-anim="hex"] .hero-grid::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg,   transparent, transparent 29px, rgba(0,175,186,0.15) 30px),
    repeating-linear-gradient(60deg,  transparent, transparent 29px, rgba(0,175,186,0.15) 30px),
    repeating-linear-gradient(120deg, transparent, transparent 29px, rgba(0,175,186,0.15) 30px);
}
html[data-hero-anim="hex"] .hero-grid::before {
  content: '';
  position: absolute; width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,175,186,0.16) 0%, transparent 70%);
  top: 50%; left: 60%; transform: translate(-50%,-50%);
  animation: hex-sweep 12s ease-in-out infinite alternate;
}
@keyframes hex-sweep {
  from { transform: translate(-50%,-50%) scale(1);   opacity: 0.6; }
  to   { transform: translate(-30%,-40%) scale(1.3); opacity: 1;   }
}

/* — AURORA — */
html[data-hero-anim="aurora"] .hero-grid::after {
  content: '';
  position: absolute; width: 700px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,175,186,0.13) 0%, transparent 70%);
  top: 10%; left: 40%;
  filter: blur(65px);
  animation: aurora-a 13s ease-in-out infinite alternate;
}
html[data-hero-anim="aurora"] .hero-grid::before {
  content: '';
  position: absolute; width: 500px; height: 350px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(201,168,76,0.10) 0%, transparent 70%);
  top: 40%; left: 55%;
  filter: blur(70px);
  animation: aurora-b 17s ease-in-out infinite alternate;
}
@keyframes aurora-a {
  from { transform: translate(0,0)    scale(1);    opacity: 0.7; }
  to   { transform: translate(80px,40px) scale(1.2); opacity: 1;   }
}
@keyframes aurora-b {
  from { transform: translate(0,0)     scale(1);    opacity: 0.5; }
  to   { transform: translate(-60px,30px) scale(1.15); opacity: 0.9; }
}

/* — GRID SWEEP (circuit) — */
html[data-hero-anim="circuit"] .hero-grid::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle, rgba(201,168,76,0.30) 1px, transparent 1px),
    linear-gradient(rgba(201,168,76,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.06) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px, 60px 60px;
}
html[data-hero-anim="circuit"] .hero-grid::before {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(to bottom, transparent, rgba(201,168,76,0.45) 30%, rgba(201,168,76,0.45) 70%, transparent);
  animation: circuit-scan 3.5s ease-in-out infinite;
}
@keyframes circuit-scan {
  0%   { left: -2px; opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════
   LIGHT MODE — html.light-mode overrides
   ═══════════════════════════════════════════════════════════ */

/* ── CSS VARIABLE OVERRIDES ──
   LIGHT THEME COLOR PASS (2026-06): tomato-forward body + teal footer + teal accents.
   RESET TO PLAIN WHITE → `git checkout light-plain-white -- style.css functions.php`
   (git tag light-plain-white = last all-white light mode), then redeploy.
   Manual reset: set the four tokens below back to
   --dark #FFFFFF; --dark-2 #FAFAFA; --dark-3 #FFFFFF; --dark-4 #EDEDED;
   revert #site-footer to `background: var(--dark-2)`, the hero-bg glow + eyebrows
   to teal/tomato as before, and drop the card hover tint. */
html.light-mode {
  --gold:       #F0493E;
  --gold-light: #F57069;
  --gold-dark:  #C43228;
  --aqua:       #008890;
  --dark:       #FAF6F4;  /* warm paper — page + base sections */
  --dark-2:     #FCEDE9;  /* tomato-tinted alternating band */
  --dark-3:     #FFFFFF;  /* cards stay white so they lift off the page */
  --dark-4:     #EEDAD5;  /* deeper warm chip/avatar tint */
  --text:       #1A1A1A;
  --text-muted: #666666;
  --white:      #1A1A1A;
  --border:     rgba(0,0,0,0.09);
}

/* ── HEADINGS (use var(--white) which stays white — override broadly) ── */
html.light-mode h1,
html.light-mode h2,
html.light-mode h3,
html.light-mode h4,
html.light-mode h5 { color: var(--text); }

/* Non-heading elements that also use var(--white) for text */
html.light-mode .card-title,
html.light-mode .team-name,
html.light-mode .login-title { color: var(--text); }

/* Cards — white background + shadow for depth instead of gray fill */
html.light-mode .card,
html.light-mode .wp-card,
html.light-mode .wp-full-card,
html.light-mode .team-card-full,
html.light-mode .testimonial-card,
html.light-mode .industry-card,
html.light-mode .portal-card,
html.light-mode .portal-team-card {
  background: #FFFFFF;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
  border-color: rgba(0,0,0,0.08);
}

/* Restore hover trim in light mode (higher specificity needed to override above) */
html.light-mode .card:hover,
html.light-mode .wp-card:hover,
html.light-mode .wp-full-card:hover,
html.light-mode .team-card-full:hover,
html.light-mode .industry-card:hover,
html.light-mode .portal-card:hover {
  border-color: var(--gold);
  background: #FFF7F4;
}

/* ── Tier 3 accents (light mode): teal eyebrows ── */
html.light-mode .hero-eyebrow { color: var(--aqua); }
html.light-mode .hero-eyebrow::before { background: var(--aqua); }


/* Gold/accent spans inside headings stay as accent color */
html.light-mode .section h2 span,
html.light-mode .hero-content h1 em { color: var(--gold); }

/* ── HEADER ── */
html.light-mode #site-header {
  background: rgba(255,255,255,0);
}
html.light-mode #site-header.scrolled {
  background: rgba(255,255,255,0.97);
  border-bottom: 1px solid var(--border);
}
html.light-mode #site-header nav ul li a,
html.light-mode #site-header nav > a {
  color: rgba(26,26,42,0.65);
}
html.light-mode #site-header nav ul li ul {
  background: rgba(255,255,255,0.98);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
html.light-mode #site-header nav ul li ul li a {
  color: rgba(26,26,42,0.65) !important;
}
html.light-mode #site-header nav ul li ul li a:hover {
  color: var(--gold) !important;
  background: rgba(240,73,62,0.06);
}
/* Nav pill — light mode */
html.light-mode #site-header nav {
  background: rgba(240,240,248,0.82);
  border-color: rgba(26,26,42,0.12);
}
html.light-mode #site-header nav ul li a:hover,
html.light-mode #site-header nav > a:hover {
  background: rgba(26,26,42,0.07);
  color: var(--gold-dark);
}
html.light-mode #site-header nav ul li.current-menu-item > a,
html.light-mode #site-header nav ul li.current-menu-parent > a,
html.light-mode #site-header nav ul li.current-menu-ancestor > a,
html.light-mode #site-header nav > a.active {
  background: rgba(26,26,42,0.07);
  color: var(--gold-dark);
}

/* Mega-menu — light mode */
html.light-mode .mega-menu {
  background: rgba(252,252,255,0.98);
  border-color: rgba(26,26,42,0.1);
  box-shadow: 0 24px 60px rgba(0,0,0,0.12);
}
html.light-mode .mega-col {
  border-right-color: rgba(26,26,42,0.08);
}
html.light-mode .mega-col-header {
  color: rgba(26,26,42,0.9);
  border-bottom-color: rgba(26,26,42,0.1);
}
html.light-mode .mega-col a {
  color: rgba(26,26,42,0.55);
}
html.light-mode .mega-col a:hover { color: var(--gold-dark); }

html.light-mode .mode-toggle {
  border-color: rgba(26,26,42,0.2);
}

/* ── MOBILE NAV OPEN ── */
html.light-mode #site-header nav.open {
  background: rgba(255,255,255,0.98);
  border-bottom: 1px solid var(--border);
}

/* ── HERO ── */
/* Default glow (off, aurora, hex, radar, data stream) = aqua */
html.light-mode .hero-bg {
  background:
    radial-gradient(ellipse at 20% 60%, rgba(240,73,62,0.16) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(240,73,62,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(240,73,62,0.09) 0%, transparent 50%);
}
/* Light mode: tomato BG override for Particles and Grid Sweep */
html.light-mode[data-hero-anim="particles"] .hero-bg,
html.light-mode[data-hero-anim="circuit"]   .hero-bg {
  background:
    radial-gradient(ellipse at 20% 60%, rgba(240,73,62,0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(240,73,62,0.16) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(240,73,62,0.12) 0%, transparent 50%);
}
/* Light mode animation scopes */
html.light-mode[data-hero-anim="radar"] .hero-grid::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Ccircle cx='400' cy='400' r='80'  fill='none' stroke='rgba(0,120,130,0.35)' stroke-width='1'/%3E%3Ccircle cx='400' cy='400' r='160' fill='none' stroke='rgba(0,120,130,0.26)' stroke-width='1'/%3E%3Ccircle cx='400' cy='400' r='240' fill='none' stroke='rgba(0,120,130,0.18)' stroke-width='1'/%3E%3Ccircle cx='400' cy='400' r='320' fill='none' stroke='rgba(0,120,130,0.11)' stroke-width='1'/%3E%3Ccircle cx='400' cy='400' r='395' fill='none' stroke='rgba(0,120,130,0.06)' stroke-width='1'/%3E%3C/svg%3E");
}
html.light-mode[data-hero-anim="radar"] .hero-grid::before {
  background: conic-gradient(from 0deg, rgba(0,120,130,0.30) 0deg, transparent 55deg);
}
html.light-mode[data-hero-anim="hex"] .hero-grid::after {
  background-image:
    repeating-linear-gradient(0deg,   transparent, transparent 29px, rgba(0,120,130,0.12) 30px),
    repeating-linear-gradient(60deg,  transparent, transparent 29px, rgba(0,120,130,0.12) 30px),
    repeating-linear-gradient(120deg, transparent, transparent 29px, rgba(0,120,130,0.12) 30px);
}
/* Hex: aqua grid lines (kept), tomato pulse blob */
html.light-mode[data-hero-anim="hex"] .hero-grid::before {
  background: radial-gradient(circle, rgba(240,73,62,0.14) 0%, transparent 70%);
}
/* Grid Sweep: aqua dots + tomato scan line */
html.light-mode[data-hero-anim="circuit"] .hero-grid::after {
  background-image:
    radial-gradient(circle, rgba(0,120,130,0.28) 1px, transparent 1px),
    linear-gradient(rgba(0,120,130,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,120,130,0.06) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px, 60px 60px;
}
html.light-mode[data-hero-anim="circuit"] .hero-grid::before {
  background: linear-gradient(to bottom, transparent, rgba(240,73,62,0.42) 30%, rgba(240,73,62,0.42) 70%, transparent);
}
/* Aurora: aqua primary + tomato secondary (already correct — keep) */
html.light-mode[data-hero-anim="aurora"] .hero-grid::after {
  background: radial-gradient(ellipse, rgba(0,120,130,0.15) 0%, transparent 70%);
}
html.light-mode[data-hero-anim="aurora"] .hero-grid::before {
  background: radial-gradient(ellipse, rgba(240,73,62,0.12) 0%, transparent 70%);
}
html.light-mode .anim-toggle { border-color: rgba(0,0,0,0.18); }

/* ── BUTTONS ── */
html.light-mode .btn-ghost {
  color: rgba(26,26,42,0.6);
  border-bottom-color: rgba(26,26,42,0.25);
}
html.light-mode .btn-ghost:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
html.light-mode .btn-outline-dark {
  border-color: rgba(26,26,42,0.25);
  color: rgba(26,26,42,0.65);
}
html.light-mode .btn-outline-dark:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* ── ICEBERG SECTION ── */
html.light-mode .iceberg-wrap {
  background: linear-gradient(180deg, #dde8f0 0%, #ccdde8 50%, #bbcfdf 100%);
}

/* ── WHITEPAPERS SECTION ── */
html.light-mode .section-wp {
  background: linear-gradient(135deg, #edf2f7 0%, #e3ecf4 100%);
}

/* ── CTA BAND ── */
html.light-mode .cta-band::before {
  background: radial-gradient(ellipse at center, rgba(240,73,62,0.06) 0%, transparent 65%);
}

/* ── FOOTER — deep-teal anchor (light mode) ── */
html.light-mode #site-footer {
  background: #0F5E63;
  border-top-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.82);
}
html.light-mode #site-footer .footer-logo { color: #FFFFFF; }
html.light-mode #site-footer .footer-tagline,
html.light-mode #site-footer .footer-phone,
html.light-mode #site-footer .footer-nav a { color: rgba(255,255,255,0.82); }
html.light-mode #site-footer .footer-nav a:hover { color: var(--gold-light); }
html.light-mode #site-footer .footer-tm { color: rgba(255,255,255,0.5); }

/* ── PARTNER LOGIN ── */
html.light-mode .login-wrap {
  background-image: radial-gradient(ellipse at 30% 60%, rgba(240,73,62,0.05) 0%, transparent 50%);
}

/* ── FILTER BUTTONS ── */
html.light-mode .filter-btn:hover,
html.light-mode .filter-btn.active {
  background: rgba(240,73,62,0.08);
}

/* ── FORMS ── */
html.light-mode .form-group input,
html.light-mode .form-group textarea,
html.light-mode .form-group select {
  background: var(--dark-3);
  color: var(--text);
  border-color: var(--border);
}
html.light-mode .form-group input::placeholder,
html.light-mode .form-group textarea::placeholder { color: var(--text-muted); }

/* ═══════════════════════════════════════════════════════════
   NAV PILL + MEGA MENU  (feature/mega-menu-nav)
   ═══════════════════════════════════════════════════════════ */

/* ── NAV PILL ── */
#site-header nav {
  background: rgba(22,22,32,0.78);
  border: 1px solid rgba(201,168,76,0.14);
  border-radius: 40px;
  padding: 5px 6px;
  gap: 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* Remove ul gap — spacing lives on the anchor padding now */
#site-header nav ul { gap: 0; }

/* Center the nav pill on the page (desktop only — mobile keeps its dropdown).
   Grid with equal 1fr side columns forces the nav (auto, center) to the exact
   viewport center regardless of logo / actions widths. */
@media (min-width: 769px) {
  #site-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  #site-header > .logo { justify-self: start; }
  #site-header > nav { justify-self: center; }
  #site-header > .header-actions { justify-self: end; }
}

/* All nav anchors: pill-item padding + rounded hover */
#site-header nav ul li a,
#site-header nav > a {
  padding: 7px 16px !important;
  border-radius: 30px;
  transition: background 0.2s, color 0.2s !important;
}
#site-header nav ul li a:hover,
#site-header nav > a:hover {
  background: rgba(201,168,76,0.10);
  color: var(--gold);
}

/* Active/current page: gold pill, no underline */
#site-header nav ul li.current-menu-item > a,
#site-header nav ul li.current-menu-parent > a,
#site-header nav ul li.current-menu-ancestor > a,
#site-header nav > a.active {
  color: var(--gold);
  background: rgba(201,168,76,0.10);
  border-bottom: none !important;
  padding-bottom: 7px !important;
}

/* Suppress old per-item dropdowns — mega-menu handles everything */
#site-header nav ul li:hover > ul { display: none !important; }

/* ── MEGA MENU PANEL ── */
.mega-menu {
  position: fixed;
  top: 88px;               /* just below header, small gap */
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: min(1280px, calc(100vw - 64px));
  background: rgba(14,14,20,0.97);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 36px 8px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  z-index: 199;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  /* Hidden state */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.mega-menu.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.mega-col {
  padding: 0 28px;
  border-right: 1px solid rgba(201,168,76,0.08);
}
.mega-col:last-child { border-right: none; }

.mega-col-header {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.mega-col a {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  text-decoration: none;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 7px 0;
  font-weight: 500;
  transition: color 0.15s;
  font-family: 'Jost', sans-serif;
}
.mega-col a:hover { color: var(--gold); }

/* ── MOBILE: strip pill, hide mega ── */
@media (max-width: 768px) {
  #site-header nav {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  #site-header nav ul li a,
  #site-header nav > a {
    padding: 0 !important;
    border-radius: 0 !important;
  }
  #site-header nav ul li.current-menu-item > a,
  #site-header nav > a.active {
    background: none !important;
    border-bottom: 2px solid var(--gold) !important;
    padding-bottom: 2px !important;
  }
  .mega-menu { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   DEMO — CENTERED HEROES  (branch: demo/centered-heroes)
   To revert: git checkout main -- style.css  then redeploy
   ═══════════════════════════════════════════════════════════ */

/* Main hero content block */
.hero-content {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
/* Hide the decorative left-side gold rule on the eyebrow */
.hero-eyebrow { justify-content: center; }
.hero-eyebrow::before { display: none; }
/* Allow text to wrap when centered */
.hero-content p,
.hero-sub-headline { white-space: normal; }
/* Center the CTA buttons */
.hero-buttons { justify-content: center; }

/* Page-level heroes (interior pages) */
.page-hero .hero-content h1 { white-space: normal; }

/* Partner portal hero — stack vertically and center */
.portal-hero-inner {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.portal-meta { align-items: center; }

/* ── USER AVATAR + DROPDOWN ── */
.user-avatar-wrap {
  position: relative;
}
.user-avatar {
  /* Pill, matching .mode-toggle / .anim-toggle beside it — gold marks it as the
     account control rather than a display preference. */
  border-radius: 20px;
  padding: 6px 13px;
  line-height: 1.35;
  background: rgba(201,168,76,0.15);
  border: 1.5px solid var(--gold);
  color: var(--gold);
  font-family: 'Jost', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
}
.user-avatar:hover,
.user-avatar-wrap.open .user-avatar {
  background: rgba(201,168,76,0.28);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.18);
}

/* Light mode avatar */
html.light-mode .user-avatar {
  background: rgba(240,73,62,0.10);
  border-color: var(--gold);
  color: var(--gold);
}
html.light-mode .user-avatar:hover,
html.light-mode .user-avatar-wrap.open .user-avatar {
  background: rgba(240,73,62,0.20);
  box-shadow: 0 0 0 3px rgba(240,73,62,0.15);
}

/* Dropdown panel */
.user-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 200px;
  background: rgba(14,14,20,0.97);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 0 8px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 300;
}
.user-avatar-wrap.open .user-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Light mode dropdown */
html.light-mode .user-dropdown {
  background: rgba(252,252,255,0.98);
  border-color: rgba(26,26,42,0.1);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}

.user-dropdown-name {
  padding: 0 16px 2px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}
.user-dropdown-company {
  padding: 0 16px 10px;
  font-size: 0.75rem;
  color: var(--gold);
  letter-spacing: 0.03em;
}
.user-dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 0 0 6px;
}
.user-dropdown-link {
  display: block;
  padding: 7px 16px;
  font-size: 0.82rem;
  color: var(--text);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.user-dropdown-link:hover {
  background: rgba(201,168,76,0.08);
  color: var(--gold);
}
html.light-mode .user-dropdown-link:hover {
  background: rgba(240,73,62,0.07);
  color: var(--gold);
}
.user-dropdown-signout {
  color: var(--text-muted);
  margin-top: 2px;
}
.user-dropdown-signout:hover {
  color: var(--tomato) !important;
  background: rgba(240,73,62,0.07) !important;
}

/* Guests get a real, clickable login pill in the same slot as the logged-in
   avatar (superseded the old invisible-spacer treatment). */
.user-avatar-wrap--guest .user-avatar {
  cursor: pointer;
}

/* Mobile — keep avatar visible but compact */
@media (max-width: 768px) {
  .user-avatar { width: 30px; height: 30px; font-size: 0.65rem; }
  .user-dropdown { right: 0; min-width: 180px; }
}

/* ═══════════════════════════════════════════════════════════
   HEROIC KNOWLEDGE BASE — theme integration (dark + light)
   All colors use theme tokens, so light-mode flips automatically.
   ═══════════════════════════════════════════════════════════ */

/* ── Layout containers ── */
.hkb-container { max-width: 1140px; margin: 0 auto; padding: 0 60px; }
/* Force theme background over the plugin's hardcoded white */
body.hkb-template-archive,
body.hkb-template-single,
body.hkb-template-category { background: var(--dark) !important; }
.hkb-mainpage-wrapper,
.hkb-fullwcontainer { background: var(--dark) !important; }
.hkb-mainpage-wrapper { padding: 48px 0 72px; }
.hkb-mainpage--sidebarright {
  display: grid; grid-template-columns: 1fr 300px; gap: 48px; align-items: start;
}
.hkb-mainpage__main { min-width: 0; }

/* ── Search header band (mirrors the page-hero) ── */
.hkb-searchbox-wrapper,
.hkb-searchbox-wrapper[data-hkb-header-type] {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 60%, rgba(30,75,200,0.30) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(30,75,200,0.22) 0%, transparent 50%),
    var(--dark) !important;
  border-bottom: 1px solid var(--border);
  padding: 190px 0 70px !important;
}
/* Animation layer injected by theme.js — sits behind the search content */
.hkb-searchbox-wrapper .hero-grid { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.hkb-searchbox-wrapper > .hkb-container { position: relative; z-index: 2; }
html.light-mode .hkb-searchbox-wrapper,
html.light-mode .hkb-searchbox-wrapper[data-hkb-header-type] {
  background:
    radial-gradient(ellipse at 20% 60%, rgba(0,136,144,0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(0,136,144,0.10) 0%, transparent 50%),
    var(--dark) !important;
}
.hkb-searchbox--center { text-align: center; }
.hkb-searchbox__title {
  font-family: 'Jost', sans-serif;
  font-size: 2.3rem; font-weight: 700; color: var(--white) !important;
  margin: 0 0 24px; line-height: 1.15;
}
.hkb-site-search {
  position: relative; display: flex; max-width: 620px; margin: 0 auto;
}

/* ── Two-column hero layout (blurb left, search right) ── */
.hkb-searchbox--hero {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px;
  align-items: center; text-align: left;
  /* Release Heroic's ~620px search-box cap so both columns fill the container */
  max-width: none !important; width: 100%; margin: 0 !important;
}
.hkb-searchbox--hero .hkb-hero-left { text-align: left; }
.hkb-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.72rem; font-weight: 700; color: var(--gold);
  letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 18px;
}
.hkb-hero-eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--gold); }
.hkb-searchbox--hero .hkb-searchbox__title {
  text-align: left; font-size: 2.6rem; margin: 0 0 16px;
}
.hkb-hero-blurb {
  font-size: 1rem; color: var(--text-muted); line-height: 1.7;
  font-weight: 300; margin: 0; max-width: 92%;
}
.hkb-searchbox--hero .hkb-site-search { max-width: none; width: 100%; margin: 0; }
.hkb-site-search__field {
  flex: 1; font-family: 'Jost', sans-serif; font-size: 0.95rem;
  color: var(--text) !important; background: var(--dark-4) !important;
  border: 1px solid var(--border) !important; border-radius: 6px 0 0 6px !important;
  padding: 14px 18px; outline: none; transition: border-color 0.2s; box-shadow: none !important;
}
.hkb-site-search__field::placeholder { color: var(--text-muted); }
.hkb-site-search__field:focus { border-color: var(--gold) !important; }
.hkb-site-search__button {
  font-family: 'Jost', sans-serif; font-size: 0.9rem; font-weight: 700;
  letter-spacing: 0.04em; color: var(--dark) !important; background: var(--gold) !important;
  border: none !important; border-radius: 0 6px 6px 0 !important; padding: 0 28px; cursor: pointer;
  transition: background 0.2s;
}
.hkb-site-search__button:hover { background: var(--gold-light) !important; }
.hkb-site-search__icon { display: none; }
/* Visually hide screen-reader-only labels (e.g. the "Search For" label) */
.hkb-screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Archive: section label (refined eyebrow, no hard rule) ── */
.hkb-archivetitle {
  font-family: 'Jost', sans-serif; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold) !important;
  margin: 0 0 28px; padding: 0; border: none;
}

/* ── Archive: category grid ──
   Flat themed boxes that match the site-wide .card / .portal-card style:
   solid surface, thin token border, 6px radius, no shadow, gold-border
   lift on hover. Uses theme tokens so it auto-flips in light mode exactly
   like the rest of the site. ── */
.hkb-archive {
  display: grid; gap: 22px; align-items: start;
}
.hkb-archive--two-cols   { grid-template-columns: repeat(2, 1fr); }
.hkb-archive--three-cols { grid-template-columns: repeat(3, 1fr); }
.hkb-category {
  background: var(--dark-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 28px 26px 30px;
  transition: border-color 0.2s, transform 0.2s;
}
.hkb-category:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
}

.hkb-categoryhead { margin-bottom: 14px; }
.hkb-categoryhead__title {
  font-family: 'Jost', sans-serif; font-size: 1.08rem; font-weight: 700;
  margin: 0 0 6px; line-height: 1.3;
}
.hkb-categoryhead__title a { color: var(--white); text-decoration: none; transition: color 0.2s; }
.hkb-categoryhead__title a:hover { color: var(--gold); }
.hkb-categoryhead__count {
  font-size: 0.66rem; font-weight: 700; color: var(--text-muted);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.hkb-categoryhead__description {
  font-size: 0.88rem; color: var(--text-muted); line-height: 1.6; margin-top: 10px;
}

/* ── Archive: article links under each category ── */
.hkb-article-list { list-style: none; margin: 10px 0 0; padding: 0; }
.hkb-article-list li { margin: 0; padding: 0; }
.hkb-article-list a {
  display: block; font-size: 0.9rem; color: var(--text-muted);
  text-decoration: none; padding: 8px 0 8px 18px; position: relative;
  transition: color 0.2s;
}
.hkb-article-list a::before {
  content: '\203A'; position: absolute; left: 2px; color: var(--text-muted);
  font-weight: 700; transition: color 0.2s, transform 0.2s;
}
.hkb-article-list a:hover { color: var(--text); }
.hkb-article-list a:hover::before { color: var(--gold); transform: translateX(2px); }
.hkb-category__view-all {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold); text-decoration: none; transition: gap 0.2s, color 0.2s;
}
.hkb-category__view-all:hover { color: var(--gold-light); gap: 10px; }
.hkb-uncatlist { list-style: none; margin: 0; padding: 0; }

/* ── Archive: clean, uniform category cards ──
   Equal-height flex cards; the whole card links to its category (see theme.js),
   so we drop the noisy single-article lists and pin a uniform "View all" CTA to
   the bottom of every card. ── */
.hkb-archive { align-items: stretch; }
.hkb-archive .hkb-category { display: flex; flex-direction: column; }
.hkb-archive .hkb-article-list { display: none; }
.hkb-categoryhead { margin-bottom: 0; }
.hkb-categoryhead__description { margin-top: 12px; }
.hkb-archive .hkb-category__view-all { margin-top: auto; padding-top: 18px; }
.kb-cat-clickable { cursor: pointer; }
/* Remove the orphaned Uncategorized block from the landing page */
.hkb-template-archive .hkb-uncatlist { display: none; }

/* ── KB landing: site-style cards (custom hkb-archive.php override) ──
   Reuses the global .card look; just makes the card a block-level link and
   adds the full-width Sales & Marketing catch-all. ── */
/* ── KB landing: labeled sections ── */
.kb-section { margin-bottom: 44px; }
.kb-section:last-child { margin-bottom: 0; }
.kb-section-head {
  font-family: 'Jost', sans-serif; font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold) !important;
  margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
}

.kb-cards { margin-top: 0; }
.kb-card { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.kb-card .card-title { transition: color 0.2s; }
.kb-card:hover .card-title { color: var(--gold); }

.kb-cards--wide { grid-template-columns: 1fr; margin-top: 0; }
.kb-card--wide { display: block; }
.kb-card-wide__note { font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; margin: 0 0 12px; }
.kb-card-wide__link { font-size: 0.85rem; font-weight: 600; color: var(--gold); }
.kb-card--wide:hover .kb-card-wide__link { color: var(--gold-light); }

/* ── KB landing: view switcher (Cards ⇄ Index) ── */
.kb-view-toggle {
  display: inline-flex; gap: 2px; margin: 0 0 26px; padding: 3px;
  background: var(--dark-3); border: 1px solid var(--border); border-radius: 999px;
}
.kb-view-btn {
  font-family: 'Jost', sans-serif; font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.02em; color: var(--text-muted); background: transparent;
  border: none; cursor: pointer; padding: 7px 16px; border-radius: 999px; transition: all 0.2s;
}
.kb-view-btn:hover { color: var(--text); }
.kb-view-btn.is-active { background: var(--gold); color: var(--dark); }

/* Show exactly one view; html.kb-view-<name> is set early (anti-flash) + by theme.js. */
.kb-view { display: none; }
html.kb-view-compact .kb-view--compact { display: block; }
html.kb-view-cards   .kb-view--cards   { display: block; }
html.kb-view-sidebar .kb-view--sidebar { display: block; }
html.kb-view-index   .kb-view--index   { display: block; }

/* ── KB landing: Index layout (link-dense, flows in columns) ── */
.kb-index-grid { columns: 3; column-gap: 40px; }
.kb-index-cat { break-inside: avoid; margin: 0 0 22px; }
.kb-index-cat-title { font-family: 'Jost', sans-serif; font-size: 1rem; font-weight: 600; margin: 0 0 8px; }
.kb-index-cat-title a { color: var(--white); text-decoration: none; transition: color 0.2s; }
.kb-index-cat-title a:hover { color: var(--gold); }
.kb-index-list { list-style: none; margin: 0; padding: 0; }
.kb-index-list li { margin: 0; }
.kb-index-list a {
  display: block; font-size: 0.875rem; line-height: 1.45; color: var(--text-muted);
  text-decoration: none; padding: 3px 0; transition: color 0.15s;
}
.kb-index-list a:hover { color: var(--gold); }
.kb-index-all { display: inline-block; margin-top: 6px; font-size: 0.78rem; font-weight: 600; color: var(--aqua); text-decoration: none; }
.kb-index-all:hover { color: var(--gold); }
@media (max-width: 1024px) { .kb-index-grid { columns: 2; } }
@media (max-width: 600px)  { .kb-index-grid { columns: 1; } }

/* ── KB view B: rich cards (icon + count + preview + view all) ── */
.kb-rcard { display: flex; flex-direction: column; gap: 14px; }
.kb-rcard-head { display: flex; align-items: center; gap: 14px; }
.kb-rcard-ic {
  width: 44px; height: 44px; flex: none; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(150deg, rgba(201,168,76,0.18), rgba(0,168,157,0.12)); color: var(--gold);
}
.kb-rcard-heat { display: flex; flex-direction: column; }
.kb-rcard-title { font-weight: 700; color: var(--white); font-size: 1.05rem; line-height: 1.2; transition: color 0.2s; }
.kb-rcard:hover .kb-rcard-title { color: var(--gold); }
.kb-rcard-count { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 4px; }
.kb-rcard-list { list-style: none; margin: 0; padding: 0; flex: 1; }
.kb-rcard-list li { font-size: 0.875rem; color: var(--text-muted); line-height: 1.5; padding: 4px 0 4px 16px; position: relative; }
.kb-rcard-list li::before { content: '\203A'; position: absolute; left: 2px; color: var(--gold); font-weight: 700; }
.kb-rcard-all { font-size: 0.8rem; font-weight: 600; color: var(--gold); margin-top: auto; }
.kb-rcard:hover .kb-rcard-all { color: var(--gold-light); }

/* ── KB view C: docs sidebar (landing-scoped) ── */
.kb-docs { display: grid; grid-template-columns: 240px 1fr; gap: 44px; align-items: start; }
.kb-docs-nav { position: sticky; top: 90px; }
.kb-docs-group { margin-bottom: 20px; }
.kb-docs-grouplabel { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.kb-docs-nav ul { list-style: none; margin: 0; padding: 0; }
.kb-docs-nav li a { display: block; font-size: 0.875rem; color: var(--text-muted); text-decoration: none; padding: 4px 0 4px 12px; border-left: 2px solid transparent; transition: color 0.15s, border-color 0.15s; }
.kb-docs-nav li a:hover { color: var(--white); border-left-color: var(--gold); }
.kb-docs-main .kb-section:first-child { margin-top: 0; }
.kb-docs-main .kb-index-grid { columns: 2; }
@media (max-width: 860px) { .kb-docs { grid-template-columns: 1fr; } .kb-docs-nav { position: static; } .kb-docs-main .kb-index-grid { columns: 1; } }
.kb-card-wide__list { list-style: none; margin: 4px 0 0; padding: 0; columns: 2; column-gap: 28px; }
.kb-card-wide__list li {
  font-size: 0.88rem; color: var(--text-muted); line-height: 1.55;
  padding: 5px 0 5px 16px; position: relative; break-inside: avoid;
}
.kb-card-wide__list li::before { content: '\203A'; position: absolute; left: 0; color: var(--gold); font-weight: 700; }
@media (max-width: 768px) {
  .kb-card--wide { grid-template-columns: 1fr; gap: 18px; }
  .kb-card-wide__list { columns: 1; }
}

/* ═══════════════════════════════════════════════════════════
   CATEGORY / TAXONOMY PAGE  (.hkb-template-category)
   ═══════════════════════════════════════════════════════════ */
/* Force dark bg (body class is tax-ht_kb_category / ht-kb, not hkb-template-*) */
body.tax-ht_kb_category,
body.ht-kb,
body.search { background: var(--dark) !important; }

/* Subheader band that holds the search — match the hero band, clear the nav */
.hkb-subheader {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 60%, rgba(30,75,200,0.30) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(30,75,200,0.22) 0%, transparent 50%),
    var(--dark) !important;
  border-bottom: 1px solid var(--border);
  padding: 120px 0 40px !important;
}
html.light-mode .hkb-subheader {
  background:
    radial-gradient(ellipse at 20% 60%, rgba(0,136,144,0.14) 0%, transparent 55%),
    var(--dark) !important;
}
.hkb-subheader .hkb-container { position: relative; z-index: 2; }
.hkb-subheader .hkb-site-search { max-width: 620px; margin: 0 auto; }

/* Category page heading */
.hkb-categoryheader {
  margin: 0 0 28px; padding-bottom: 20px; border-bottom: 1px solid var(--border);
}
.hkb-categoryheader__title {
  font-family: 'Jost', sans-serif; font-size: 1.7rem; font-weight: 700;
  color: var(--white); margin: 0; line-height: 1.2;
}
.hkb-categoryheader__description {
  font-size: 0.95rem; color: var(--text-muted); line-height: 1.6; margin-top: 10px;
}

/* Subcategory list — clean readable rows (not the boxy default) */
.hkb-subcats--two-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 44px; }
.hkb-subcats .hkb-categoryhead { margin: 0; padding: 0; }
.hkb-subcats .hkb-categoryhead__title,
.hkb-subcats__cat-title { font-size: 1.05rem; font-weight: 600; margin: 0 0 4px; line-height: 1.3; }
.hkb-subcats .hkb-categoryhead__title a,
.hkb-subcats__cat-title a { color: var(--text) !important; text-decoration: none; transition: color 0.2s; }
.hkb-subcats .hkb-categoryhead__title a:hover,
.hkb-subcats__cat-title a:hover { color: var(--gold) !important; }
.hkb-subcats .hkb-categoryhead__count {
  font-size: 0.64rem; font-weight: 700; color: var(--text-muted) !important;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.hkb-subcats .hkb-categoryhead__description {
  font-size: 0.86rem; color: var(--text-muted) !important; line-height: 1.6; margin-top: 8px;
}

/* ── Breadcrumb (matches the portal Asset Library crumb trail) ── */
.hkb-breadcrumbs-wrap {
  background: transparent; border-bottom: none;
  padding: 40px 0 4px; /* breathing room below the search band, like the portal */
}
/* (breadcrumb is moved below the subheader by theme.js on all KB pages, so the
   subheader's own 120px top already clears the fixed header — no special case) */
.hkb-breadcrumbs {
  max-width: 1140px; margin: 0 auto; padding: 0 60px;
  font-size: 0.85rem; color: var(--text-muted) !important;
  background: none; list-style: none;
  display: flex; flex-wrap: wrap; align-items: center;
}
.hkb-breadcrumbs li { display: inline-flex; align-items: center; margin: 0; padding: 0; }
.hkb-breadcrumbs li::before { content: none; } /* kill any default list marker */
.hkb-breadcrumbs li:not(:last-child)::after {
  content: '\203A'; /* › */ margin: 0 10px; color: var(--text-muted); font-weight: 700;
}
.hkb-breadcrumbs li:last-child { color: var(--text-muted) !important; } /* current page, muted — matches portal */
.hkb-breadcrumbs meta { display: none; }
.hkb-breadcrumbs a { color: var(--gold) !important; text-decoration: none; }
.hkb-breadcrumbs a:hover { color: var(--gold-light) !important; }

.hkb-article__title {
  font-family: 'Jost', sans-serif; font-size: 2rem; font-weight: 700;
  color: var(--white); line-height: 1.2; margin: 0 0 28px;
}
.hkb-article__content { font-size: 0.98rem; line-height: 1.75; color: var(--text); }
.hkb-article__content h2,
.hkb-article__content h3,
.hkb-article__content h4 {
  font-family: 'Jost', sans-serif; color: var(--white); font-weight: 700;
  margin: 32px 0 12px; line-height: 1.3;
}
.hkb-article__content h2 { font-size: 1.4rem; }
.hkb-article__content h3 { font-size: 1.15rem; }
.hkb-article__content h4 { font-size: 1rem; }
.hkb-article__content p { margin: 0 0 16px; }
.hkb-article__content a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.hkb-article__content a:hover { color: var(--gold-light); }
.hkb-article__content ul,
.hkb-article__content ol { margin: 0 0 16px; padding-left: 24px; }
.hkb-article__content li { margin-bottom: 6px; }
.hkb-article__content img {
  max-width: 100%; height: auto; border-radius: 6px;
  border: 1px solid var(--border); margin: 12px 0;
}
.hkb-article__content code {
  font-family: Consolas, Monaco, monospace; font-size: 0.88em;
  background: var(--dark-4); color: var(--gold);
  padding: 2px 6px; border-radius: 3px;
}
.hkb-article__content pre {
  background: var(--dark-4); border: 1px solid var(--border);
  border-radius: 6px; padding: 16px 18px; overflow-x: auto; margin: 0 0 16px;
}
.hkb-article__content pre code { background: none; color: var(--text); padding: 0; }
.hkb-article__content table {
  width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 0.9rem;
}
.hkb-article__content th,
.hkb-article__content td {
  border: 1px solid var(--border); padding: 10px 14px; text-align: left;
}
.hkb-article__content th { background: var(--dark-3); color: var(--white); font-weight: 700; }
.hkb-article__content blockquote {
  border-left: 3px solid var(--gold); margin: 0 0 16px; padding: 4px 0 4px 18px;
  color: var(--text-muted);
}

/* ── Related articles + feedback ── */
.hkb-article-related, .hkb-feedback {
  margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--border);
}
.hkb-article-related__title, .hkb-feedback__title {
  font-family: 'Jost', sans-serif; font-size: 1.1rem; font-weight: 700;
  color: var(--white); margin: 0 0 16px;
}
.hkb-article-related a { color: var(--gold); text-decoration: none; }
.hkb-article-related a:hover { color: var(--gold-light); }

/* ── Sidebar ── */
.hkb-mainpage__sidebar { font-size: 0.9rem; }
.hkb-sticky { position: sticky; top: 100px; }

/* Widget container — force dark card over plugin's light box */
.hkb-mainpage__sidebar .widget,
.hkb-mainpage__sidebar .hkb_widget_articles,
.hkb-mainpage__sidebar .hkb_widget_toc,
.hkb-mainpage__sidebar .hkb_widget_exit {
  background: var(--dark-3) !important; border: 1px solid var(--border) !important;
  border-radius: 6px !important; padding: 22px 20px !important; margin-bottom: 20px !important;
  box-shadow: none !important;
}
html.light-mode .hkb-mainpage__sidebar .widget,
html.light-mode .hkb-mainpage__sidebar .hkb_widget_exit {
  box-shadow: 0 2px 16px rgba(0,0,0,0.07) !important;
}

/* Widget titles — gold uppercase label */
.hkb-mainpage__sidebar .widget-title,
.hkb_widget_toc__title,
.hkb_widget_exit__title {
  font-family: 'Jost', sans-serif; font-size: 0.72rem !important; font-weight: 700 !important;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold) !important;
  margin: 0 0 14px !important;
}

/* Article entry links inside widgets — readable muted text */
.hkb-mainpage__sidebar a,
.hkb-widget__entry-title {
  color: var(--text-muted) !important; text-decoration: none; transition: color 0.2s;
  text-transform: none; letter-spacing: normal; font-weight: 400;
}
.hkb-mainpage__sidebar a:hover,
.hkb-widget__entry-title:hover { color: var(--gold) !important; }
.hkb-mainpage__sidebar ul { list-style: none; margin: 0; padding: 0; }
.hkb-mainpage__sidebar li { margin-bottom: 10px; line-height: 1.4; }

/* ── Exit / Need Support widget ── */
.hkb_widget_exit { text-align: center; }
.hkb_widget_exit__title { text-align: center; }
.hkb_widget_exit__content { color: var(--text-muted) !important; font-size: 0.88rem; margin-bottom: 16px; }
.hkb_widget_exit__btn {
  display: inline-block; background: var(--gold) !important; color: var(--dark) !important;
  border-radius: 4px !important; padding: 11px 24px; font-size: 0.85rem; font-weight: 700;
  letter-spacing: 0.04em; text-decoration: none; transition: background 0.2s; border: none !important;
}
.hkb_widget_exit__btn:hover { background: var(--gold-light) !important; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .hkb-mainpage--sidebarright { grid-template-columns: 1fr; }
  .hkb-archive--three-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .hkb-archive--two-cols,
  .hkb-archive--three-cols { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .hkb-searchbox--hero { grid-template-columns: 1fr; gap: 28px; }
  .hkb-hero-blurb { max-width: 100%; }
}
@media (max-width: 768px) {
  .hkb-container { padding: 0 24px; }
  .hkb-searchbox-wrapper { padding: 110px 0 40px !important; }
  .hkb-searchbox__title,
  .hkb-searchbox--hero .hkb-searchbox__title { font-size: 1.7rem; }
  .hkb-breadcrumbs { padding: 0 24px; }
  .hkb-article__title { font-size: 1.6rem; }
}

/* ═══════════════════════════════════════════════════════════
   KB SUB-PAGE REFINEMENTS
   ═══════════════════════════════════════════════════════════ */

/* ── Remove the sidebars (Categories + Need Support) for now ──
   Reversible: delete this block to bring the sidebar back. ── */
.hkb-mainpage__sidebar { display: none !important; }
.hkb-mainpage--sidebarright,
.hkb-mainpage--sidebarleft { grid-template-columns: 1fr !important; }

/* ── Article links: match site text (white in dark, near-black in light),
   no blue, no visited tint; gold on hover. ── */
.hkb-articlepreview__title a,
.hkb-articlepreview__title a:visited,
.hkb-articlelist a,
.hkb-articlelist a:visited {
  color: var(--white) !important; text-decoration: none;
}
.hkb-articlepreview__title a:hover,
.hkb-articlelist a:hover { color: var(--gold) !important; }

/* ── Category page: article previews — full list, site-matched type ── */
.hkb-article-grid { display: block; margin-top: 8px; }
.hkb-articlepreview { padding: 22px 0; border-top: 1px solid var(--border); }
.hkb-articlepreview:first-child { border-top: none; padding-top: 6px; }
.hkb-articlepreview__title {
  font-family: 'Jost', sans-serif; font-size: 1.15rem; font-weight: 600;
  line-height: 1.3; margin: 0 0 6px;
}
.hkb-articlepreview__excerpt {
  font-family: 'Jost', sans-serif; font-size: 0.92rem; line-height: 1.65;
  color: var(--text-muted); margin: 0;
}

/* Pagination (Next / page numbers) */
.hkb-mainpage__main .page-numbers,
.hkb-mainpage__main .page-numbers:visited,
.hkb-mainpage__main .nav-links a,
.hkb-mainpage__main .hkb-pagination a,
.hkb-mainpage__main a.next,
.hkb-mainpage__main a.prev {
  color: var(--white) !important; text-decoration: none;
}
.hkb-mainpage__main .page-numbers:hover { color: var(--gold) !important; }

/* ── Breadcrumb: lighter, integrated (drop the heavy band) ── */
.hkb-breadcrumbs-wrap { background: transparent !important; border-bottom: none !important; }

/* ═══════════════════════════════════════════════════════════
   PARTNER PORTAL — ASSET LIBRARY (SharePoint downloads)
   ═══════════════════════════════════════════════════════════ */
.asset-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 22px; font-size: 0.85rem; }
.asset-crumb { color: var(--gold); text-decoration: none; }
.asset-crumb:hover { color: var(--gold-light); }
.asset-crumb--current { color: var(--text-muted); }
.asset-crumb-sep { color: var(--text-muted); }

/* Card grid — same flat themed box recipe as .card / .portal-card.
   Uses theme tokens so it auto-flips in light/dark. */
.asset-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch;
}
.asset-card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--dark-3); border: 1px solid var(--border);
  border-radius: 6px; padding: 24px 22px;
  text-decoration: none; color: inherit;
  transition: border-color 0.2s, transform 0.2s;
}
.asset-card:hover { border-color: var(--gold); transform: translateY(-3px); }
.asset-card-icon { font-size: 1.7rem; line-height: 1; }
.asset-card-name { font-weight: 600; color: var(--white); line-height: 1.35; word-break: break-word; }
.asset-card:hover .asset-card-name { color: var(--gold); }
.asset-card-meta { font-size: 0.8rem; color: var(--text-muted); }
/* Folder cards: the "Open" affordance pinned to the bottom */
.asset-card-action { margin-top: auto; padding-top: 6px; color: var(--gold); font-size: 0.8rem; font-weight: 600; }
/* File cards: download button pinned to the bottom-left */
.asset-card-dl {
  margin-top: auto; align-self: flex-start;
  background: var(--gold); color: var(--dark);
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em;
  padding: 9px 18px; border-radius: 4px; text-decoration: none; transition: background 0.2s;
}
.asset-card-dl:hover { background: var(--gold-light); }
.asset-card-dl--disabled { background: var(--dark-4); color: var(--text-muted); cursor: default; }
.asset-card:hover .asset-card-dl--disabled { /* keep neutral on hover */ background: var(--dark-4); }

.asset-notice {
  background: var(--dark-3); border: 1px solid var(--border); border-radius: 6px;
  padding: 15px 20px; color: var(--text-muted); display: block;
  /* Was flex-column, which made every text node and inline <strong> its own
     row — so "Click <strong>New ticket</strong> to open your first case"
     broke across three lines. Block lets inline content flow; the stacked
     heading+body notices keep their layout via the two rules below. */
  margin-bottom: 22px; font-size: 0.92rem;
}
.asset-notice--error { border-color: rgba(240,73,62,0.4); }
.asset-notice strong { color: var(--white); font-weight: 600; }
/* removed: :first-child ignores TEXT nodes, so this matched a <strong> mid
   sentence and forced it onto its own line. No notice uses a leading
   <strong> as a heading, so the rule had no legitimate use. */
.asset-notice > span { display: block; }

@media (max-width: 1024px) { .asset-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .asset-grid { grid-template-columns: 1fr; } }
.asset-notice--ok { border-color: rgba(0,168,157,0.45); }

/* ═══════════════════════════════════════════════════════════
   PARTNER PORTAL — SUPPORT TICKETS
   ═══════════════════════════════════════════════════════════ */
.ticket-listhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.ticket-detail-title { font-size: 1.4rem; color: var(--white); margin: 0; }
.ticket-detailbar { margin-bottom: 14px; }
.ticket-ref { font-size: 0.8rem; color: var(--text-muted); margin: 4px 0 22px; }
.ticket-detail-head { display: flex; align-items: center; gap: 14px; margin-top: 6px; }

/* Status badge */
.ticket-badge {
  display: inline-block; align-self: flex-start; font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--border);
}
.ticket-badge--open    { color: var(--aqua); border-color: rgba(0,168,157,0.5); }
.ticket-badge--pending { color: var(--gold); border-color: rgba(201,168,76,0.5); }
.ticket-badge--closed  { color: var(--text-muted); }

/* Ticket cards reuse .asset-card; tweak for badge-on-top layout */
.ticket-card .asset-card-name { margin-top: 4px; }

/* Thread */
.ticket-thread { display: flex; flex-direction: column; gap: 16px; margin: 8px 0 30px; }
.ticket-msg { border: 1px solid var(--border); border-radius: 8px; padding: 16px 18px; background: var(--dark-3); max-width: 88%; }
.ticket-msg--you   { align-self: flex-end; border-color: rgba(201,168,76,0.35); }
.ticket-msg--agent { align-self: flex-start; background: var(--dark-2); }
.ticket-msg-meta { display: flex; gap: 12px; align-items: baseline; margin-bottom: 8px; }
.ticket-msg-who  { font-weight: 700; font-size: 0.85rem; color: var(--white); }
.ticket-msg--agent .ticket-msg-who { color: var(--gold); }
.ticket-msg-date { font-size: 0.72rem; color: var(--text-muted); }
.ticket-msg-body { font-size: 0.92rem; line-height: 1.6; color: var(--text); }
.ticket-msg-body p { margin: 0 0 10px; } .ticket-msg-body p:last-child { margin: 0; }

/* Forms */
.ticket-form { display: flex; flex-direction: column; gap: 8px; max-width: 720px; }
.ticket-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin-top: 8px; }
/* Conditional technical fields: `display: contents` keeps the label+control as
   direct flex items (layout unchanged); `.is-hidden` removes them when the
   inquiry isn't Technical Support. Toggled by theme.js. */
.ticket-tech-field { display: contents; }
.ticket-tech-field.is-hidden { display: none; }
.ticket-form input:not([type="submit"]), .ticket-form textarea, .ticket-form select {
  width: 100%; background: var(--dark-4); border: 1px solid var(--border); color: var(--white);
  border-radius: 6px; padding: 12px 14px; font-family: 'Jost', sans-serif; font-size: 0.95rem;
}
html:not(.light-mode) .ticket-form input[type="date"] { color-scheme: dark; }
.ticket-form select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 18px, calc(100% - 13px) 18px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 38px; }
.ticket-form input:not([type="submit"]):focus, .ticket-form textarea:focus, .ticket-form select:focus { outline: none; border-color: var(--gold); }

/* Detail-view structured fields */
.ticket-fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 28px; margin: 0 0 24px; padding: 18px 20px; background: var(--dark-3); border: 1px solid var(--border); border-radius: 8px; }
.ticket-field { display: flex; flex-direction: column; gap: 2px; }
.ticket-field dt { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin: 0; }
.ticket-field dd { margin: 0; font-size: 0.9rem; color: var(--white); }
@media (max-width: 600px) { .ticket-fields { grid-template-columns: 1fr; } }
.ticket-form textarea { resize: vertical; }
.ticket-form .btn-primary { border: none; cursor: pointer; align-self: flex-start; margin-top: 12px; }
.ticket-foot { font-size: 0.8rem; color: var(--text-muted); margin: 6px 0 0; }
.ticket-form--reply { margin-top: 10px; }

/* ═══════════════════════════════════════════════════════════
   CHAT WITH TRUSTEDEXPERT  (template-trusted-expert.php)
   Open WebUI–style framed assistant, portal-gated.
   ═══════════════════════════════════════════════════════════ */
/* Full-bleed animated backdrop — the "surrounding black" becomes the hero animation */
.te-bg-anim {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
  background: var(--dark);
}
.te-bg-anim .hero-bg,
.te-bg-anim .hero-grid { position: absolute; inset: 0; }

.te-wrap {
  position: relative; z-index: 1; /* sit above the animated backdrop */
  max-width: 1180px; margin: 0 auto;
  padding: 120px 24px 48px; /* clear the fixed header */
  display: flex; flex-direction: column;
  min-height: 100vh;
}
.te-bar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; margin-bottom: 20px;
}
.te-eyebrow {
  display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 6px;
}
.te-title { font-size: 2rem; line-height: 1.1; color: var(--white); font-weight: 700; text-wrap: balance; }
.te-title span { color: var(--gold); white-space: nowrap; }
.te-sub { margin-top: 8px; color: var(--text-muted); font-size: 0.95rem; text-wrap: pretty; }
.te-badge {
  flex: none; align-self: center;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold); border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 12px; background: rgba(201,168,76,0.08);
}

/* The chat stage — fills remaining height like an app shell */
.te-stage {
  flex: 1; min-height: 560px; height: calc(100vh - 300px);
  border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
  background: var(--dark-2);
  /* column, not row: an <iframe> is a replaced element, so row-axis
     align-items stretching and height:100% both fail to size it (it
     collapses to the 150px default). As a column flex item, flex:1
     sizes its height directly. */
  display: flex; flex-direction: column;
  box-shadow: 0 18px 60px rgba(0,0,0,0.35);
}
.te-frame { flex: 1; width: 100%; border: 0; display: block; background: var(--dark-2); }

/* "Not yet connected" placeholder */
.te-empty {
  margin: auto; text-align: center; max-width: 1040px; padding: 48px 28px;
}
.te-empty-ic {
  width: 64px; height: 64px; margin: 0 auto 22px; border-radius: 16px;
  display: grid; place-items: center; color: var(--gold);
  background: linear-gradient(150deg, rgba(201,168,76,0.18), rgba(0,168,157,0.12));
}
.te-empty-ic svg { width: 32px; height: 32px; }
.te-empty-title { font-size: 1.4rem; color: var(--white); font-weight: 700; margin-bottom: 12px; text-wrap: balance; }
.te-empty-text { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; margin-bottom: 12px; text-wrap: balance; }
.te-empty-text a { color: var(--gold); text-decoration: none; font-weight: 600; }
.te-empty-text a:hover { color: var(--gold-light); }

@media (max-width: 600px) {
  .te-wrap { padding: 100px 16px 32px; }
  .te-title { font-size: 1.55rem; }
  .te-badge { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   PARTNER PORTAL — FEEDBACK BOARD  (template-portal-feedback.php)
   Reuses .deal-table / .deal-badge / .ticket-* patterns; only the
   vote button + a couple of spacing tweaks are new.
   ═══════════════════════════════════════════════════════════ */
.feedback-desc { max-width: 720px; margin: 4px 0 22px; }
.feedback-vote-form { margin: 0 0 34px; }
.feedback-vote {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 10px 18px; border-radius: 999px; background: var(--dark-3);
  border: 1px solid var(--border); color: var(--text);
  font-family: 'Jost', sans-serif; font-size: 0.9rem; font-weight: 600;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.feedback-vote:hover { border-color: var(--gold); color: var(--white); }
.feedback-vote-caret { font-size: 0.7rem; line-height: 1; color: var(--text-muted); transition: color 0.15s; }
.feedback-vote:hover .feedback-vote-caret { color: var(--gold); }
.feedback-vote-count { font-size: 1.05rem; font-weight: 700; color: var(--white); }
.feedback-vote--on {
  background: rgba(201,168,76,0.10); border-color: rgba(201,168,76,0.55); color: var(--gold);
}
.feedback-vote--on .feedback-vote-caret,
.feedback-vote--on .feedback-vote-count { color: var(--gold); }
.feedback-comments-head {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 14px;
}
.feedback-votes-cell { font-weight: 700; color: var(--white); }

/* Duplicate-check interstitial · staff status control · shareable link */
.feedback-dupes { margin: 0 0 26px; }
.feedback-dupe-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.feedback-dupe { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; background: var(--dark-3); border: 1px solid var(--border); border-radius: 10px; }
.feedback-dupe-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.feedback-dupe-title { font-weight: 600; color: var(--text); text-decoration: none; }
.feedback-dupe-title:hover { color: var(--gold); }
.feedback-dupe-meta { font-size: 0.8rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: 8px; }
.feedback-dupe-vote { margin: 0; flex: none; }
.feedback-status-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 22px; padding: 12px 14px; background: rgba(201,168,76,0.06); border: 1px solid rgba(201,168,76,0.30); border-radius: 10px; }
.feedback-status-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.feedback-status-form select { padding: 7px 10px; }
.feedback-status-btn { padding: 8px 16px; border-radius: 8px; border: 1px solid var(--gold); background: transparent; color: var(--gold); font-weight: 600; cursor: pointer; font-family: 'Jost', sans-serif; }
.feedback-status-btn:hover { background: var(--gold); color: #0d0d0d; }
.feedback-permalink { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 20px; }
.feedback-permalink-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.feedback-permalink-input { flex: 1 1 280px; min-width: 0; padding: 8px 12px; background: var(--dark-3); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 0.85rem; }
.feedback-permalink-copy { padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--dark-3); color: var(--text); font-weight: 600; cursor: pointer; white-space: nowrap; font-family: 'Jost', sans-serif; }
.feedback-permalink-copy:hover { border-color: var(--gold); color: var(--gold); }

/* ═══════════════════════════════════════════════════════════
   AGENT CONSOLE  (template-portal-queue.php)
   Staff-facing shared ticket queue. Reuses .deal-table*, .ticket-*
   and the existing tokens; only the tabs, the action bar, the
   internal-note style and the staff hero badge are new.
   ═══════════════════════════════════════════════════════════ */

/* Staff badge on the portal hero — aqua, so a staff context never reads
   as the gold partner badge. Text uses var(--aqua) so light mode follows. */
.portal-badge--agent {
  background: rgba(0,168,157,0.12);
  border-color: rgba(0,168,157,0.40);
  color: var(--aqua);
}

/* Queue tabs */
.console-tabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 22px; padding: 0 0 14px;
  border-bottom: 1px solid var(--border);
}
.console-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px;
  background: var(--dark-3); border: 1px solid var(--border);
  color: var(--text-muted); text-decoration: none;
  font-size: 0.85rem; font-weight: 600;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.console-tab:hover { border-color: var(--gold); color: var(--text); }
.console-tab.is-active {
  background: rgba(201,168,76,0.10);
  border-color: rgba(201,168,76,0.55);
  color: var(--gold);
}
.console-tab-count {
  font-size: 0.72rem; font-weight: 700; line-height: 1;
  padding: 3px 7px; border-radius: 999px;
  background: rgba(138,138,154,0.18); color: var(--text-muted);
}
.console-tab.is-active .console-tab-count { background: rgba(201,168,76,0.18); color: var(--gold); }

/* Filter bar: the shared .deal-table-tools plus assignment scopes */
.console-tools { align-items: center; }
.console-scopes { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.console-scope {
  padding: 7px 13px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--dark-3);
  color: var(--text-muted); text-decoration: none;
  font-size: 0.82rem; font-weight: 600;
}
.console-scope:hover { border-color: var(--gold); color: var(--text); }
.console-scope.is-active { border-color: rgba(0,168,157,0.45); color: var(--aqua); background: rgba(0,168,157,0.08); }

/* Table tweaks */
.console-table td { vertical-align: top; }
.console-cell-sub { display: block; font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }
.console-replies {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 0.7rem; font-weight: 700;
  background: rgba(138,138,154,0.18); color: var(--text-muted);
}

/* Staff action bar — assign + status, one row */
.console-actionbar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px;
  margin: 0 0 26px; padding: 14px 16px;
  background: rgba(201,168,76,0.06);
  border: 1px solid rgba(201,168,76,0.30);
  border-radius: 10px;
}
.console-actionform { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.console-actionlabel {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gold);
}
.console-actionform select {
  padding: 8px 12px; border-radius: 6px;
  background: var(--dark-4); border: 1px solid var(--border);
  color: var(--white); font-family: 'Jost', sans-serif; font-size: 0.9rem;
}
.console-actionform select:focus { outline: none; border-color: var(--gold); }
.console-actionbtn {
  padding: 8px 16px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--dark-3); color: var(--text);
  font-family: 'Jost', sans-serif; font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.console-actionbtn:hover { border-color: var(--gold); color: var(--gold); }
.console-actionbtn--primary { border-color: var(--gold); color: var(--gold); }
.console-actionbtn--primary:hover { background: var(--gold); color: #0d0d0d; }

/* Internal note — deliberately unlike a customer-visible message.
   Full width, amber/gold tint, left accent rail. */
.console-note {
  align-self: stretch; max-width: 100%;
  padding: 14px 18px; border-radius: 8px;
  background: rgba(201,168,76,0.07);
  border: 1px solid rgba(201,168,76,0.30);
  border-left: 3px solid var(--gold);
}
.console-note .ticket-msg-who { color: var(--gold); }
.console-note-badge {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gold); border: 1px solid rgba(201,168,76,0.40);
  background: rgba(201,168,76,0.10);
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.console-note .ticket-msg-meta { flex-wrap: wrap; }

/* Composer: reply and internal note are two separate, distinct forms */
.console-composer { display: flex; flex-direction: column; gap: 26px; }
.console-composer-form { margin: 0; }
.console-composer-hint { font-size: 0.8rem; color: var(--text-muted); margin: 0; }
.console-note-form {
  padding: 16px 18px; border-radius: 10px;
  background: rgba(201,168,76,0.05);
  border: 1px dashed rgba(201,168,76,0.40);
}
.console-note-label { margin-top: 0; }
.console-note-btn {
  align-self: flex-start; margin-top: 4px;
  padding: 10px 20px; border-radius: 8px;
  border: 1px solid var(--gold); background: transparent; color: var(--gold);
  font-family: 'Jost', sans-serif; font-size: 0.88rem; font-weight: 600; cursor: pointer;
}
.console-note-btn:hover { background: var(--gold); color: #0d0d0d; }

@media (max-width: 700px) {
  .console-actionbar { flex-direction: column; align-items: stretch; }
  .console-actionform { justify-content: space-between; }
}

/* ── STAFF TOOLS (portal section, staff only) ──
   Aqua-accented so internal tooling reads as distinct from the partner-facing
   gold. Pairs with .portal-badge--agent on the hero. */
.portal-section--agent { border-top: 1px solid rgba(0,176,185,0.22); }
.portal-section-label--agent { color: var(--aqua); }
.portal-card--agent:hover { border-color: rgba(0,176,185,0.45); }
.portal-card--agent .portal-card-link { color: var(--aqua); }
/* Staff Tools cards sit on the same 5-up rhythm as Quick Actions above, so a
   lone card stays 1/5 width instead of stretching the full row. */
.portal-section--agent .portal-cards { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1024px) {
  .portal-section--agent .portal-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .portal-section--agent .portal-cards { grid-template-columns: 1fr; }
}

/* ── LINKS ON DARK PORTAL SURFACES ──
   Ticket/console content links were unstyled, so they fell back to the browser's
   default blue — unreadable on our dark cards (e.g. the requester email in the
   Agent Console). Use the brand aqua, which has a light-mode variant too.
   Inline-styled links inside forwarded email HTML keep their own colours. */
.ticket-fields a,
.ticket-msg-body a,
.ticket-ref a,
.deal-callout a,
.console-actionbar a {
  color: var(--aqua);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;
}
.ticket-fields a:hover,
.ticket-msg-body a:hover,
.ticket-ref a:hover,
.deal-callout a:hover,
.console-actionbar a:hover { color: var(--gold); }

/* Logged-out header avatar: a generic person icon linking to the portal sign-in,
   so the header slot isn't an empty circle for guests. */
.user-avatar--guest { text-decoration: none; }
.user-avatar--guest svg { display: block; width: 15px; height: 15px; }

/* ═══════════════════════════════════════════════════════════
   PARTNER MANAGEMENT  (template-portal-partners.php)
   Staff-facing partner user accounts. Reuses .deal-table*,
   .deal-badge, .ticket-* and .console-actionbtn; only the
   checkbox rows are new — the shared `.ticket-form input`
   rule would otherwise stretch a checkbox to the full width.
   ═══════════════════════════════════════════════════════════ */
.pm-check { display: flex; align-items: flex-start; gap: 11px; margin-top: 16px; }
.ticket-form .pm-check input[type="checkbox"] {
  width: auto; flex: none; margin: 3px 0 0; padding: 0;
  accent-color: var(--gold); cursor: pointer;
}
.pm-check-text { display: flex; flex-direction: column; gap: 3px; }
.pm-check-label { color: var(--white); font-size: 0.92rem; font-weight: 600; cursor: pointer; }
.pm-check-hint { color: var(--text-muted); font-size: 0.82rem; line-height: 1.5; margin: 0; }
/* Invitation opt-in: gold-tinted so "this sends an email" never reads as
   just another checkbox. Off by default until go-live. */
.pm-check--invite {
  padding: 13px 15px; border-radius: 10px;
  background: rgba(201,168,76,0.06); border: 1px solid rgba(201,168,76,0.30);
}
/* Password reset sits apart from the details form — a separate action, not a field. */
.pm-reset-form { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--border); }
.pm-reset-form .console-actionbtn { align-self: flex-start; margin-top: 10px; }

/* ── DEAL DESK ──
   The intake decision panel is a full-width form rather than the Agent Console's
   single-row action bar; everything else reuses the console/deal classes. */
.deal-decision { display: block; }
.deal-decision-form { max-width: 720px; }
.console-actionbtn--danger { border-color: rgba(240,73,62,0.45); color: var(--tomato); }
.console-actionbtn--danger:hover { background: var(--tomato); color: #0d0d0d; border-color: var(--tomato); }
.deal-group--partner { color: var(--aqua); }

/* Header controls share one pill height. Left to content, the sun glyph, the
   "Aurora" text and the avatar each measured differently (28.4 / 26.5 / 29.0px);
   an explicit height makes the three read as one set. Widths stay content-sized. */
.header-actions .mode-toggle,
.header-actions .anim-toggle,
.header-actions .user-avatar {
  height: 30px;
  box-sizing: border-box;
  line-height: 1;
}
@media (max-width: 768px) {
  .header-actions .mode-toggle,
  .header-actions .anim-toggle,
  .header-actions .user-avatar { height: 28px; }
}

/* ── CONVERSATION LAYOUT (Teams-style) ──
   Each viewer sees THEMSELVES on the right and the other party on the left, so
   who-said-what reads at a glance. The same message class therefore aligns
   opposite ways on the two pages: on the partner's page Onclave is the other
   party; in the Agent Console the partner is. Bubbles are narrowed so the
   alignment is actually legible — at 88% wide it read as one column. */
.ticket-msg { max-width: 72%; }

/* Agent Console — staff are "us", so Onclave sits right, the partner left. */
.ticket-thread--staff .ticket-msg--agent {
  align-self: flex-end;
  background: rgba(201,168,76,0.08);
  border-color: rgba(201,168,76,0.35);
}
.ticket-thread--staff .ticket-msg--you {
  align-self: flex-start;
  background: var(--dark-2);
  border-color: var(--border);
}
.ticket-thread--staff .ticket-msg--you .ticket-msg-who { color: var(--aqua); }

/* Internal notes sit OUTSIDE the conversation entirely — full width, centred,
   so they never read as something the partner was sent. */
.ticket-thread .console-note { align-self: stretch; max-width: 100%; }

@media (max-width: 768px) {
  .ticket-msg { max-width: 90%; }
}

/* Composers follow the conversation: your reply box sits on the side your own
   messages appear (right, in both perspectives); the internal-note box spans the
   full width like the notes it creates, keeping it outside the conversation. */
.ticket-form--reply { margin-left: auto; max-width: 72%; }
.console-note-form { max-width: 100%; margin-left: 0; }
@media (max-width: 768px) {
  .ticket-form--reply { max-width: 100%; }
}

/* ── PORTAL CARDS: one height across both rows ──
   A hard `height` clipped the copy, so use a MINIMUM height instead: every card
   is at least this tall (equalising the two rows) and can still grow rather than
   cut text off. Descriptions are kept to two short lines so growth never fires. */
.portal-card {
  min-height: 200px;
  padding: 20px 22px;
  gap: 8px;
}
.portal-card-desc { margin: 0; }
.portal-card-link { margin-top: auto; }
@media (max-width: 1024px) { .portal-card { min-height: 190px; } }
@media (max-width: 768px)  { .portal-card { min-height: 0; } }
/* ═══════════════════════════════════════════════════════════════════════════
   AGENT CONSOLE — LIVE TOASTS
   Injected by theme.js when the 30s queue poll sees a ticket id it hasn't seen
   before. Bottom-right, stacked, self-dismissing. The wrap ignores pointer
   events so it never steals a click from the queue underneath it; each toast
   takes them back.
   ═══════════════════════════════════════════════════════════════════════════ */

.console-toast-wrap {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 4000;
  display: flex;
  flex-direction: column-reverse; /* newest lands on top of the stack */
  gap: 10px;
  width: 340px;
  max-width: calc(100vw - 48px);
  pointer-events: none;
}

.console-toast {
  pointer-events: auto;
  position: relative;
  padding: 14px 40px 14px 16px;
  background: var(--dark-3);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.38);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  animation: console-toast-in 220ms ease-out both;
}
.console-toast:hover {
  border-color: rgba(201, 168, 76, 0.45);
  border-left-color: var(--gold);
}
.console-toast:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

.console-toast-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: 5px;
}
.console-toast-num {
  color: var(--gold);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.console-toast-type {
  color: var(--text-muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.console-toast-subject {
  color: var(--white);
  font-size: 0.9rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.console-toast-close {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 26px;
  height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1;
  cursor: pointer;
}
.console-toast-close:hover {
  color: var(--tomato);
  background: var(--dark-2);
}
.console-toast-close:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 1px;
}

@keyframes console-toast-in {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: none; }
}

/* A toast that slides in under someone's cursor is exactly the kind of motion
   people turn off. Honour the preference: appear, don't travel. */
@media (prefers-reduced-motion: reduce) {
  .console-toast { animation: none; }
}

html.light-mode .console-toast {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}

/* Phones: full width minus a margin, so a toast never crowds the footer edge. */
@media (max-width: 768px) {
  .console-toast-wrap {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    max-width: none;
  }
  .console-toast { padding: 12px 38px 12px 14px; }
}

/* New-ticket form: fields taken from the account are shown, not editable, and
   short hints explain the ambiguous ones. */
.ticket-derived {
  padding: 10px 14px; border-radius: 8px;
  background: var(--dark-3); border: 1px dashed var(--border);
  color: var(--text); font-size: 0.92rem;
}
.ticket-hint { font-size: 0.78rem; color: var(--text-muted); margin: 4px 0 0; }

/* ── PORTAL CARD SIZING ──
   Five cards inside the 1140px container left ~168px of text width, so
   "Chat with TrustedExpert" wrapped. Widen the container on portal sections
   only, tighten the gutters, and ease the title down a notch — that yields
   ~194px of text width, which fits the longest title on one line. */
.portal-section .container { max-width: 1240px; }
.portal-cards { gap: 18px; }
.portal-card { padding: 20px; }
.portal-card-title { font-size: 0.95rem; line-height: 1.3; }
@media (max-width: 1280px) {
  .portal-section .container { max-width: 1140px; }
  .portal-card-title { font-size: 0.92rem; }
}

/* Listhead with no heading — keep the action on the right. */
.ticket-listhead--end { justify-content: flex-end; }

/* ── STICKY FOOTER ──
   Short pages (a near-empty table) left the footer floating mid-screen. Push it
   to the bottom of the viewport when content is shorter than the window; on long
   pages it scrolls away as normal. NOT a fixed footer — it never overlays content.
   Safe as a body-level flex container: the header and mega-menu are position:fixed,
   so they're out of flow and unaffected. */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > #site-footer { margin-top: auto; }
/* ═══════════════════════════════════════════════════════════════════════════
   AGENT CONSOLE — DASHBOARD STRIP, AGING MARKERS, QUEUE SETTINGS
   (template-portal-queue.php)

   Four tiles above the tabs, an idle chip in the table, and the in-portal
   Settings view. Everything is built from the existing tokens and the existing
   .console-* / .deal-table* / .ticket-form vocabulary, so light mode follows for
   free. ONE deliberate colour rule: only the things somebody has to act on go
   --tomato. A queue where every number is red is a queue nobody reads.
   ═══════════════════════════════════════════════════════════════════════════ */

.console-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 22px;
}
.console-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border-radius: 10px;
  background: var(--dark-3);
  border: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
}
.console-stat-num {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  color: var(--white);
}
.console-stat-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* The one-line explanation under each label: sentence case, so it reads as
   English rather than as a second heading. */
.console-stat-sub {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
  opacity: 0.85;
}

/* Aging is the only tile that is a link — it is the only one with somewhere to
   go — so it is the only one that reacts to a cursor. */
.console-stat--action { cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.console-stat--action:hover { border-color: var(--gold); }

/* Non-zero aging: tomato. Zero stays neutral, on purpose. */
.console-stat--alert {
  background: rgba(240, 73, 62, 0.07);
  border-color: rgba(240, 73, 62, 0.45);
}
.console-stat--alert .console-stat-num,
.console-stat--alert .console-stat-label { color: var(--tomato); }
.console-stat--alert:hover { border-color: var(--tomato); }

@media (max-width: 900px) {
  .console-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .console-stats { grid-template-columns: 1fr; }
  .console-stat { padding: 13px 15px; }
  .console-stat-num { font-size: 1.6rem; }
}

/* "3d idle" beside the status badge. Small, tomato, and only ever present on a
   row that has actually crossed the threshold. */
.console-idle {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--tomato);
  border: 1px solid rgba(240, 73, 62, 0.40);
  background: rgba(240, 73, 62, 0.08);
}

/* The Aging scope sits with Everyone / Unassigned / Mine but marks itself in
   tomato when it is the active one, matching the tile it came from. */
.console-scope--aging.is-active {
  border-color: rgba(240, 73, 62, 0.45);
  color: var(--tomato);
  background: rgba(240, 73, 62, 0.08);
}

/* Settings link in the console header — a peer of "Back to Portal", boxed so it
   reads as a place to go rather than a piece of the sentence above it. */
.console-settings-link {
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.console-settings-link:hover { border-color: var(--gold); }

/* ── Queue settings view ── */
.console-settings-lead {
  max-width: 720px;
  margin: 0 0 26px;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--text-muted);
}
.console-settings-lead strong { color: var(--white); font-weight: 600; }

.console-settings-form { max-width: 640px; }
/* Each field is label -> one line of helper text -> input, so the groups need
   air between them and none inside them. */
.console-settings-form .ticket-label { margin-top: 22px; }
.console-settings-form .console-composer-hint { margin: 0 0 2px; max-width: 560px; }
/* A day count is two or three characters; the shared .ticket-form input rule
   would stretch it across the whole form. */
.ticket-form input[type="number"].console-settings-num {
  width: 110px;
  flex: none;
}
.console-settings-form .pm-check { margin-top: 26px; }
.console-settings-form .btn-primary { margin-top: 22px; }

/* Read-only values for staff who are not administrators. */
.console-settings-readonly { max-width: 640px; }

/* Queue settings sits on the filter row, pushed to the far right so it reads as
   a tool for the view rather than another scope filter. */
.console-tools { flex-wrap: wrap; }
.console-tools .console-settings-link { margin-left: auto; }
/* ═══════════════════════════════════════════════════════════════════════════
   ── TICKET ATTACHMENTS ──
   (inc/ticket-attachments.php, rendered in template-portal-tickets.php and
   template-portal-queue.php)

   Built entirely from the existing tokens and the .ticket-* vocabulary, so
   light mode follows for free. Every chip is a LINK to the download handler —
   there is no file URL anywhere in the markup, by design.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The list under a message. Wraps, and never widens the bubble it sits in. */
.ticket-att-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--border);
}

/* One attachment: icon · name · size, as a single compact chip. */
.ticket-att {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--dark-4);
  color: var(--text);
  text-decoration: none;
  font-size: 0.82rem;
  line-height: 1.3;
  transition: border-color 0.2s, color 0.2s;
}
.ticket-att:hover,
.ticket-att:focus-visible { border-color: var(--gold); color: var(--gold); }

.ticket-att-icon { font-size: 0.95rem; line-height: 1; flex: none; }

/* A long log filename must truncate rather than push the chip off the bubble. */
.ticket-att-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 260px;
  font-weight: 600;
}

.ticket-att-size {
  flex: none;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.ticket-att:hover .ticket-att-size { color: inherit; }

@media (max-width: 600px) { .ticket-att-name { max-width: 160px; } }

/* ── The composer's file input ──
   The shared `.ticket-form input` rule paints a full-width boxed control, which
   is far too heavy for an optional picker. Keep it compact and quiet: this is
   the least important control on the form. */
.ticket-form input[type="file"].ticket-att-input {
  width: auto;
  max-width: 100%;
  padding: 8px 10px;
  font-size: 0.82rem;
  color: var(--text-muted);
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 6px;
  cursor: pointer;
}
.ticket-form input[type="file"].ticket-att-input:hover { border-color: var(--gold); }
.ticket-form input[type="file"].ticket-att-input:focus { outline: none; border-color: var(--gold); }
.ticket-form input[type="file"].ticket-att-input::file-selector-button {
  margin-right: 10px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--dark-4);
  color: var(--text);
  font-family: 'Jost', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.ticket-form input[type="file"].ticket-att-input::file-selector-button:hover { border-color: var(--gold); color: var(--gold); }

/* "(optional)" rides in the uppercase gold label, so drop it out of that voice. */
.ticket-att-optional {
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text-muted);
}

/* Image attachments show a small preview; the tile still downloads on click.
   Inline serving is image-only and every image was re-encoded server-side. */
.ticket-att-thumb {
  width: 44px; height: 44px; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--border); display: block; flex: none; background: var(--dark-3);
}
.ticket-att { align-items: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   AGENT CONSOLE — WAVE 2
   canned replies · tags · priority · merge · snooze
   (inc/ticket-queue.php + template-portal-queue.php)

   Built from the tokens and the .console-* / .ticket-* vocabulary already in
   this file, so both the dark and the light palette above carry it. Nothing
   here introduces a new colour: gold = the staff voice, aqua = active, tomato =
   act on this, muted = parked.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Visually hidden label text. Used by the tag input and the snooze date field,
   both of which are labelled by the control beside them for a sighted reader. */
.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Priority ─────────────────────────────────────────────────────────────────
   A .ticket-badge in a second dimension: STATUS says where the ticket is in its
   life, PRIORITY says how loudly it is asking. Only the two that mean "act"
   take a colour; normal and low stay deliberately quiet so a queue of normal
   tickets does not read as a wall of badges. */
.console-prio { font-weight: 700; }
.console-prio--urgent {
  color: var(--tomato);
  border-color: rgba(240,73,62,0.55);
  background: rgba(240,73,62,0.10);
}
.console-prio--high {
  color: var(--gold);
  border-color: rgba(201,168,76,0.50);
  background: rgba(201,168,76,0.08);
}
.console-prio--normal { color: var(--text-muted); }
.console-prio--low    { color: var(--text-muted); opacity: 0.7; }

/* Priority pills on the filter row, beside the assignment scopes. */
.console-prios { margin-left: 2px; }
.console-scope--prio-urgent.is-active {
  border-color: rgba(240,73,62,0.45);
  color: var(--tomato);
  background: rgba(240,73,62,0.08);
}
.console-scope--prio-high.is-active {
  border-color: rgba(201,168,76,0.50);
  color: var(--gold);
  background: rgba(201,168,76,0.10);
}

/* ── Tags ─────────────────────────────────────────────────────────────────────
   Free-form staff labels. Chips, not badges: they are LINKS that filter the
   queue, so they get a hover state and a pointer. */
.console-tagbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: -14px 0 26px; padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--dark-3);
}
.console-tagbar .console-actionlabel { margin-right: 2px; }
.console-tag-none { font-size: 0.82rem; color: var(--text-muted); }

/* A chip is the label plus its own remove form, sitting as one pill. */
.console-tag {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--dark-4);
  padding: 2px 4px 2px 11px;
}
.console-tag-link {
  font-size: 0.78rem; font-weight: 600;
  color: var(--text); text-decoration: none;
}
.console-tag-link:hover { color: var(--gold); }
.console-tag-rm { display: inline-flex; margin: 0; }
.console-tag-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0;
  border: 0; border-radius: 999px;
  background: transparent; color: var(--text-muted);
  font-size: 0.95rem; line-height: 1; cursor: pointer;
}
.console-tag-x:hover { background: rgba(240,73,62,0.14); color: var(--tomato); }

.console-tag-add { gap: 6px; }
.ticket-form input[type="text"].console-tag-input,
.console-tag-input {
  width: 170px; flex: none;
  padding: 7px 12px; border-radius: 6px;
  background: var(--dark-4); border: 1px solid var(--border);
  color: var(--white);
  font-family: 'Jost', sans-serif; font-size: 0.85rem;
}
.console-tag-input:focus { outline: none; border-color: var(--gold); }

/* Chips under the subject in the list table — smaller again, and wrapping. */
.console-tagrow { display: block; margin-top: 5px; }
.console-tag-chip {
  display: inline-block; margin: 3px 4px 0 0;
  padding: 1px 9px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--dark-4);
  color: var(--text-muted); text-decoration: none;
  font-size: 0.7rem; font-weight: 600; white-space: nowrap;
}
.console-tag-chip:hover { border-color: var(--gold); color: var(--gold); }
.console-tag-chip.is-active { border-color: rgba(0,168,157,0.45); color: var(--aqua); }

/* The "Tag: foo ×" pill that shows a tag filter is on and clears it. */
.console-scope--tagfilter { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Snooze + merge bar ───────────────────────────────────────────────────────
   A second action bar under the first. Deliberately NOT gold: these two take a
   ticket OUT of the queue rather than changing what it says, so they read as
   quieter and sit apart from assign / status / priority. */
.console-actionbar--quiet {
  background: var(--dark-3);
  border-color: var(--border);
  margin-top: -14px;
}
.console-actionhint {
  flex-basis: 100%;
  font-size: 0.76rem;
  color: var(--text-muted);
}
.console-snooze-date,
.console-merge-input {
  padding: 8px 12px; border-radius: 6px;
  background: var(--dark-4); border: 1px solid var(--border);
  color: var(--white);
  font-family: 'Jost', sans-serif; font-size: 0.85rem;
}
.console-snooze-date:focus,
.console-merge-input:focus { outline: none; border-color: var(--gold); }
.console-merge-input { width: 130px; }
.console-merge-form { align-items: center; }

/* "snoozed" beside the status badge in the list — muted, because a sleeping
   ticket is the one thing on the row that needs no attention. */
.console-snoozed-flag {
  display: inline-block; margin-left: 6px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 0.68rem; font-weight: 700; white-space: nowrap;
  color: var(--text-muted);
  border: 1px solid var(--border);
  background: var(--dark-4);
}
.console-scope--snoozed.is-active {
  border-color: var(--border);
  color: var(--text);
  background: var(--dark-4);
}

/* ── Banners on the detail view ───────────────────────────────────────────────
   State the ticket is IN, above everything else on the page. */
.console-merged-banner,
.console-snooze-banner {
  margin: 0 0 20px; padding: 13px 16px;
  border-radius: 10px;
  font-size: 0.88rem; line-height: 1.6;
  color: var(--text);
}
.console-merged-banner {
  border: 1px solid rgba(240,73,62,0.35);
  background: rgba(240,73,62,0.07);
  border-left: 3px solid var(--tomato);
}
.console-merged-banner strong { color: var(--tomato); }
/* On the SURVIVING ticket the same fact is informational, not a dead end. */
.console-merged-banner--target {
  border-color: rgba(0,168,157,0.35);
  background: rgba(0,168,157,0.07);
  border-left-color: var(--aqua);
}
.console-merged-banner--target strong { color: var(--aqua); }
.console-merged-link {
  display: inline-block; margin-left: 6px;
  color: var(--gold); text-decoration: none; font-weight: 600;
}
.console-merged-link:hover { text-decoration: underline; }
.console-snooze-banner {
  border: 1px solid var(--border);
  background: var(--dark-3);
  border-left: 3px solid var(--text-muted);
  color: var(--text-muted);
}
.console-snooze-banner strong { color: var(--text); }

/* ── Canned replies ───────────────────────────────────────────────────────────
   The picker in the composer, and the admin list in Queue settings. */
.console-canned-label { margin-top: 4px; }
.ticket-form select.console-canned-select,
.console-canned-select {
  width: 100%; max-width: 420px;
  margin-bottom: 12px;
  padding: 8px 12px; border-radius: 6px;
  background: var(--dark-4); border: 1px solid var(--border);
  color: var(--white);
  font-family: 'Jost', sans-serif; font-size: 0.9rem;
}
.console-canned-select:focus { outline: none; border-color: var(--gold); }

.console-settings-subhead {
  margin: 44px 0 6px;
  font-size: 1.05rem; color: var(--white);
}
.console-canned-list {
  list-style: none; margin: 0 0 24px; padding: 0;
  max-width: 720px;
  display: flex; flex-direction: column; gap: 10px;
}
.console-canned-item {
  padding: 13px 16px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--dark-3);
}
.console-canned-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.console-canned-title { font-weight: 600; color: var(--white); }
.console-canned-actions { display: inline-flex; align-items: center; gap: 8px; }
/* The Edit control is an <a> wearing the button's clothes. */
.console-canned-actions .console-actionbtn {
  text-decoration: none; display: inline-block; line-height: 1.3;
}
.console-canned-body {
  margin: 8px 0 0;
  font-size: 0.85rem; line-height: 1.6; color: var(--text-muted);
}
.console-canned-form { margin-top: 4px; }
.console-canned-cancel {
  margin-left: 14px;
  font-size: 0.85rem; color: var(--text-muted); text-decoration: none;
}
.console-canned-cancel:hover { color: var(--gold); }

@media (max-width: 700px) {
  .console-actionbar--quiet { flex-direction: column; align-items: stretch; }
  .console-merge-input,
  .console-tag-input { width: 100%; }
  .console-tagbar { align-items: flex-start; }
}

/* ── AGENT CONSOLE: ACTIONS DRAWER ──
   Staff controls slide in from the right instead of stacking three bars above
   the conversation. The drawer is a real dialog: backdrop, Escape, focus trap. */
.console-actions-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px; border-radius: 20px; cursor: pointer;
  background: rgba(201,168,76,0.12); border: 1.5px solid var(--gold);
  color: var(--gold); font-family: 'Jost', sans-serif; font-size: 0.82rem; font-weight: 600;
  margin: 0 0 22px;
}
.console-actions-toggle:hover { background: rgba(201,168,76,0.24); }
.console-drawer-backdrop {
  position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,0.5);
  opacity: 0; transition: opacity 0.2s ease;
}
.console-drawer-backdrop.is-open { opacity: 1; }
.console-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 310;
  width: min(460px, 92vw); overflow-y: auto;
  background: var(--dark-2); border-left: 1px solid var(--border);
  box-shadow: -12px 0 40px rgba(0,0,0,0.45);
  transform: translateX(100%); transition: transform 0.22s ease;
}
.console-drawer.is-open { transform: translateX(0); }
.console-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px; border-bottom: 1px solid var(--border); position: sticky; top: 0;
  background: var(--dark-2); z-index: 1;
}
.console-drawer-title {
  font-family: 'Jost', sans-serif; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold);
}
.console-drawer-close {
  background: none; border: none; color: var(--text-muted);
  font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 4px;
}
.console-drawer-close:hover { color: var(--white); }
.console-drawer-body { padding: 20px 22px 40px; display: flex; flex-direction: column; gap: 18px; }
/* Inside the drawer the bars stack naturally — drop their boxed chrome. */
.console-drawer-body .console-actionbar {
  display: flex; flex-direction: column; align-items: stretch; gap: 14px;
  background: none; border: none; padding: 0; margin: 0;
}
.console-drawer-body .console-actionform { flex-wrap: wrap; }
body.console-drawer-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .console-drawer, .console-drawer-backdrop { transition: none; }
}

/* ── INTERNAL NOTES: not a message ──
   Notes were tinted rgba(gold,0.07) while agent replies are rgba(gold,0.08) —
   effectively the same colour, so only the pill distinguished them. Gold now
   means "Onclave's messages", so notes must not read as gold at all. Give them
   a distinctly warmer amber, a DASHED border (nothing was sent), and no bubble
   rounding on the accent edge, so they read as annotation rather than dialogue. */
.ticket-thread .console-note {
  background: rgba(226,168,81,0.14);
  border: 1px dashed rgba(226,168,81,0.55);
  border-left: 4px solid #e2a851;
  border-radius: 4px;
}
.ticket-thread .console-note .ticket-msg-who { color: #e2a851; }
.ticket-thread .console-note .ticket-msg-body { color: var(--text); }
.console-note-badge {
  color: #e2a851;
  border-color: rgba(226,168,81,0.55);
  background: rgba(226,168,81,0.12);
}

/* ── ACTIONS DRAWER: sections + alignment ──
   Inside the drawer every control stacks full width under a section heading, so
   the panel reads as a form rather than a row of mismatched widgets. */
.console-drawer-section {
  font-family: 'Jost', sans-serif; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
  margin: 6px 0 0; padding-top: 18px; border-top: 1px solid var(--border);
}
.console-drawer-section:first-of-type { padding-top: 0; border-top: none; margin-top: 0; }
.console-drawer-body .console-actionform {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin: 0;
}
.console-drawer-body .console-actionform select,
.console-drawer-body .console-actionform input[type="text"],
.console-drawer-body .console-actionform input[type="date"],
.console-drawer-body .console-actionbtn {
  width: 100%; box-sizing: border-box;
}
.console-drawer-body .console-actionlabel {
  font-size: 0.72rem; letter-spacing: 0.08em; color: var(--text-muted); margin: 0;
}
.console-drawer-body .console-actionhint { font-size: 0.76rem; line-height: 1.5; margin: 2px 0 0; }
/* Tag chips wrap above their input rather than sitting inline with it. */
.console-drawer-body .console-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.console-drawer-body .console-actionbar,
.console-drawer-body .console-actionbar--quiet {
  display: flex; flex-direction: column; align-items: stretch; gap: 14px;
  background: none; border: none; padding: 0; margin: 0;
}

/* Actions sits on the ticket title row, pushed right — it had its own row of
   empty space before. The head wraps on narrow screens rather than squashing. */
.ticket-detail-head { flex-wrap: wrap; gap: 10px; }
.ticket-detail-head .console-actions-toggle { margin: 0 0 0 auto; }
@media (max-width: 600px) {
  .ticket-detail-head .console-actions-toggle { margin-left: 0; }
}

/* ── THREAD COLOUR LANGUAGE ──
   Gold replies sat too close to the amber internal note. Aqua already means
   "Onclave staff" across the portal (the Onclave Agent badge, Staff Tools), so
   Onclave's messages speak in aqua on BOTH pages. That leaves three unmistakable
   states: aqua = we said it, neutral/gold = the partner said it, dashed amber =
   nobody was sent it. */
.ticket-msg--agent {
  background: rgba(0,176,185,0.10);
  border-color: rgba(0,176,185,0.38);
}
.ticket-msg--agent .ticket-msg-who { color: var(--aqua); }

/* Agent Console: the partner is the other party — keep their side neutral so the
   aqua reads as ours, not theirs. */
.ticket-thread--staff .ticket-msg--you {
  background: var(--dark-2);
  border-color: var(--border);
}
.ticket-thread--staff .ticket-msg--you .ticket-msg-who { color: var(--white); }

/* Partner's own page: their messages stay gold — the partner-facing accent. */
.ticket-thread--partner .ticket-msg--you {
  background: rgba(201,168,76,0.10);
  border-color: rgba(201,168,76,0.35);
}
.ticket-thread--partner .ticket-msg--you .ticket-msg-who { color: var(--gold); }

/* ── ACTIONS DRAWER: hierarchy ──
   Every section header was echoed by an identical inner label ("STATUS" above a
   "Status" label), and headers were the same size as the labels they headed.
   Make headers clearly dominant, and hide the now-redundant inner labels
   visually while keeping them for screen readers. */
.console-drawer-body .console-drawer-section {
  font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em;
  text-transform: none; color: var(--white);
  margin: 0; padding-top: 22px; border-top: 1px solid var(--border);
}
.console-drawer-body .console-drawer-section:first-of-type {
  padding-top: 0; border-top: none;
}
.console-drawer-body .console-actionlabel {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* The tag bar is a plain group in the drawer, not a boxed widget. */
.console-drawer-body .console-tagbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  background: none; border: none; padding: 0; margin: 0;
}
.console-drawer-body .console-tagbar .console-tag-add { width: 100%; }
.console-drawer-body .console-tag-none { font-size: 0.82rem; color: var(--text-muted); }

/* The aqua reply rule above was a single class, but the Teams-layout rule that
   set the gold background is `.ticket-thread--staff .ticket-msg--agent` — two
   classes, so it kept winning and only the name turned aqua. Match the
   specificity explicitly on both threads. */
.ticket-thread--staff .ticket-msg--agent,
.ticket-thread--partner .ticket-msg--agent {
  background: rgba(0,176,185,0.10);
  border-color: rgba(0,176,185,0.38);
}
.ticket-thread--staff .ticket-msg--agent .ticket-msg-who,
.ticket-thread--partner .ticket-msg--agent .ticket-msg-who { color: var(--aqua); }

/* ── ACTIONS DRAWER: compact rows ──
   Stacking every control and button full width made five toggles fill the whole
   panel — you couldn't take the ticket's state in at a glance. Put the control
   and its button on one row: the field grows, the button sits to its right. */
.console-drawer-body .console-actionform {
  flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px;
}
.console-drawer-body .console-actionform select,
.console-drawer-body .console-actionform input[type="text"],
.console-drawer-body .console-actionform input[type="date"] {
  flex: 1 1 140px; width: auto; min-width: 0;
}
.console-drawer-body .console-actionbtn {
  width: auto; flex: 0 0 auto; white-space: nowrap;
}
/* Standalone actions (Assign to me) keep the full row — they have no field. */
.console-drawer-body .console-actionform--solo .console-actionbtn { width: 100%; }
.console-drawer-body .console-actionhint { flex: 1 1 100%; margin: 0; }
.console-drawer-body .console-actionbar,
.console-drawer-body .console-actionbar--quiet { gap: 10px; }
.console-drawer-body .console-drawer-section { padding-top: 16px; }
.console-drawer-body { gap: 14px; }

/* ── KB ADMIN ──
   /kb-admin/ (template-portal-kb.php) reuses .ticket-form, .ticket-label,
   .ticket-hint, .deal-table*, .asset-notice, .btn-primary and .console-actionbtn
   wholesale. Only the handful of things with no existing class live here. */

/* The article body is the point of the page — give it real room, and a
   monospace face so the author can see the Markdown or HTML they are writing.
   `resize: vertical` is inherited from `.ticket-form textarea` and restated
   here because the drag handle is a requirement of this editor, not a
   coincidence of the shared rule. */
.ticket-form textarea.kba-content {
  min-height: 460px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.86rem;
  line-height: 1.65;
  tab-size: 2;
}
.ticket-form textarea.kba-excerpt { min-height: 84px; }

/* ══ EDITOR WIDTH ═══════════════════════════════════════════════════════════
   Three presets on the .kba-editor wrapper, driven by data-width and stored
   per person in localStorage. `.ticket-form` is capped at 720px globally, so
   every rule here needs the wrapper in front of it to win — and the [data-width]
   variants outrank the base rule for the same reason. Page is the default and
   is also what the markup ships with, so the layout is right before any JS
   runs. */
.kba-editor .ticket-form,
.kba-editor .kba-dangerform,
.kba-editor .kba-editorbar,
.kba-editor .kba-preview { max-width: 820px; }

.kba-editor[data-width="narrow"] .ticket-form,
.kba-editor[data-width="narrow"] .kba-dangerform,
.kba-editor[data-width="narrow"] .kba-editorbar,
.kba-editor[data-width="narrow"] .kba-preview { max-width: 68ch; }

.kba-editor[data-width="page"] .ticket-form,
.kba-editor[data-width="page"] .kba-dangerform,
.kba-editor[data-width="page"] .kba-editorbar,
.kba-editor[data-width="page"] .kba-preview { max-width: 820px; }

.kba-editor[data-width="wide"] .ticket-form,
.kba-editor[data-width="wide"] .kba-dangerform,
.kba-editor[data-width="wide"] .kba-editorbar,
.kba-editor[data-width="wide"] .kba-preview { max-width: 100%; }

.kba-editorbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
}

/* ⚠️ An author `display` BEATS the UA stylesheet's `[hidden] { display: none }`,
   so a flex container with the hidden attribute would still be on screen. Both
   bars ship hidden and are revealed by their scripts, so they need this or the
   no-JS fallback shows dead controls. */
.kba-editorbar[hidden],
.kba-toolbar[hidden] { display: none; }
.kba-editorbar-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.kba-widths {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.kba-widthbtn {
  font: inherit;                /* a <button> does not inherit the page font */
  font-size: 0.78rem;
  cursor: pointer;
  padding: 4px 12px;
  border: 0;
  border-right: 1px solid var(--border);
  background: var(--dark-3);
  color: var(--text-muted);
}
.kba-widths .kba-widthbtn:last-child { border-right: 0; }
.kba-widthbtn:hover { color: var(--gold); }
.kba-widthbtn[aria-pressed="true"] { background: var(--dark-4); color: var(--gold); }
.kba-previewlink { margin-left: auto; cursor: pointer; }

/* ══ FORMAT (Markdown / HTML) ═══════════════════════════════════════════════ */
.kba-format {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.kba-format-now { font-size: 0.86rem; color: var(--text-muted); }
.kba-format .deal-table-view {
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  color: var(--gold);
}
/* The lossy-direction confirmation. The shared `.ticket-form input` rule paints
   a full-width boxed control, which a checkbox must not become. */
.kba-lossy {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  color: var(--text-muted);
  cursor: pointer;
}
.ticket-form .kba-lossy input[type="checkbox"] {
  width: auto;
  padding: 0;
  margin: 0;
  accent-color: var(--gold);
}

/* Implicit-submission target. Off-screen rather than display:none, because a
   display:none button is not reliably treated as the form's default button —
   and if it were skipped, Enter in the Title would fire the FORMAT SWITCH. */
.kba-defaultsubmit {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ══ MARKDOWN TOOLBAR ═══════════════════════════════════════════════════════ */
.kba-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: var(--dark-3);
}
.kba-tool {
  font: inherit;
  font-size: 0.8rem;
  line-height: 1.2;
  cursor: pointer;
  min-width: 34px;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  color: var(--text-muted);
}
.kba-tool:hover,
.kba-tool:focus-visible { border-color: var(--border); color: var(--gold); }
/* The toolbar sits ON the textarea, so square off the join between them. */
.ticket-form .kba-toolbar:not([hidden]) + textarea.kba-content { border-radius: 0 0 6px 6px; }

/* ══ PREVIEW ════════════════════════════════════════════════════════════════
   Read-only, rendered server-side from what is STORED. Article markup is not
   under this stylesheet's control, so only the frame is styled. */
.kba-preview {
  margin: 0 0 22px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--dark-3);
  overflow: hidden;
}
.kba-preview-head {
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 0.74rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.kba-preview-body { padding: 4px 20px 18px; font-size: 0.92rem; line-height: 1.7; }
.kba-preview-body img { max-width: 100%; height: auto; }
.kba-preview-body pre { overflow-x: auto; }
.kba-preview-body table { width: 100%; border-collapse: collapse; }
.kba-preview-body th,
.kba-preview-body td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }

/* Who wrote it and when — the article DETAIL only; the list table has no
   author column by design. */
.kba-byline { color: var(--text-muted); }

/* ══ LIST FILTERS ═══════════════════════════════════════════════════════════
   Both levels are now the `.kba-chipfilters` chip rows (plain links, no JS) —
   see the block at the end of this file. The two select filters they replaced
   are gone, and so are their `.kba-secfilter*` rules. */

@media (max-width: 700px) {
  .kba-editorbar { gap: 8px; }
  .kba-previewlink { margin-left: 0; }
}

/* Required-field marker on the labels. */
.kba-req { color: var(--tomato); margin-left: 2px; }

/* Draft marker sitting inline after a title in the list table — .deal-badge
   supplies the look, this just seats it next to the text. */
.kba-pill { margin-left: 8px; vertical-align: middle; }

/* The article's live URL, echoed under the edit form's heading. */
.kba-url { color: var(--text-muted); word-break: break-all; }

/* The trash form deliberately does NOT carry .ticket-form: that class is bound
   by theme.js's double-submit guard, which would disable the button even when
   the operator cancels the confirm dialog. Same stacked shape, kept apart. */
.kba-dangerform {
  display: flex; flex-direction: column; gap: 8px;
  max-width: 720px; margin-top: 34px;
  padding-top: 26px; border-top: 1px solid var(--border);
}
.kba-dangerform .ticket-hint { margin-bottom: 4px; }
.kba-dangerform .console-actionbtn { align-self: flex-start; cursor: pointer; }

/* ── TRUSTEDEXPERT LOG (moved out of template-portal-expert-log.php) ── */


/* ── TRUSTEDEXPERT LOG ── (relocated from template-portal-expert-log.php) */
/* ── TrustedExpert Log — panels ── */
.tel-panel {
  margin: 0 0 24px;
  padding: 18px 20px;
  border-radius: 10px;
  background: var(--dark-3);
  border: 1px solid var(--border);
}
.tel-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.tel-panel-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--white);
}
.tel-panel-sub {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 14px;
}

/* ── Ranked unanswered questions ── */
.tel-top-list { list-style: none; margin: 0; padding: 0; }
.tel-top-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid rgba(201, 168, 76, 0.12);
}
.tel-top-row:first-child { border-top: 0; }
.tel-top-count {
  flex: 0 0 auto;
  min-width: 34px;
  padding: 3px 8px;
  border-radius: 6px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--tomato);
  background: rgba(240, 73, 62, 0.09);
  border: 1px solid rgba(240, 73, 62, 0.35);
}
.tel-top-q { flex: 1 1 auto; min-width: 0; color: var(--text); font-size: 0.92rem; }
.tel-top-q a { color: var(--text); text-decoration: none; }
.tel-top-q a:hover { color: var(--gold); }
.tel-top-kb {
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gold);
  text-decoration: none;
  white-space: nowrap;
}
.tel-top-kb:hover { color: var(--gold-light); text-decoration: underline; }

/* ── Active-filter chips ── */
.tel-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 16px; }
.tel-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--text);
  background: rgba(201, 168, 76, 0.08);
  border: 1px solid var(--border);
}
.tel-chip-clear { font-size: 0.78rem; color: var(--gold); text-decoration: none; }
.tel-chip-clear:hover { text-decoration: underline; }

/* ── Table cells ── */
.tel-cell-q { max-width: 520px; }
.tel-cell-sub { display: block; margin-top: 3px; font-size: 0.76rem; color: var(--text-muted); }

/* ── Pagination ── */
.tel-pager { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 16px; }
.tel-pager-link {
  padding: 6px 12px;
  border-radius: 7px;
  border: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--text);
  text-decoration: none;
}
.tel-pager-link:hover { border-color: var(--gold); color: var(--gold); }
.tel-pager-at { font-size: 0.8rem; color: var(--text-muted); }

/* ── Detail view ── */
.tel-block {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: 9px;
  background: var(--dark-2);
  border: 1px solid var(--border);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 0.94rem;
  line-height: 1.6;
}
.tel-block--muted { color: var(--text-muted); font-style: italic; }
.tel-sources { list-style: none; margin: 0; padding: 0; }
.tel-sources li { padding: 4px 0; overflow-wrap: anywhere; }
.tel-sources a { color: var(--gold); }

/* ── Integration panel ── */
.tel-code {
  display: block;
  padding: 10px 12px;
  border-radius: 7px;
  background: var(--dark);
  border: 1px solid var(--border);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  color: var(--text);
  overflow-x: auto;
  white-space: pre;
  margin: 0 0 14px;
}
.tel-secret-out {
  border-color: rgba(240, 73, 62, 0.5);
  color: var(--gold-light);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.tel-field-list { list-style: none; margin: 0 0 14px; padding: 0; }
.tel-field-list li { padding: 4px 0; font-size: 0.85rem; color: var(--text-muted); }
.tel-field-list code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--gold);
  margin-right: 6px;
}
.tel-actions { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; margin-top: 6px; }
.tel-actions form { margin: 0; }
.tel-warn {
  display: block;
  max-width: 460px;
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.tel-confirm { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0; max-width: 460px; }
.tel-confirm label { font-size: 0.8rem; color: var(--text-muted); }

@media (max-width: 700px) {
  .tel-top-row { flex-wrap: wrap; }
  .tel-top-kb { margin-left: 48px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   KB ADMIN — CATEGORY / SECTION CHIPS AND THE STRUCTURE EDITOR
   template-portal-kb.php. `ht_kb_category` is two levels: a CATEGORY groups
   sections on the public landing page, a SECTION is what an article is
   filed under. The two chips have to be tellable apart at a glance, so the
   SECTION chip leads (aqua, solid) and the CATEGORY chip sits behind it
   (muted, dashed) — the article lives in the section; the category is context.
   Colours are tokens only, so both themes follow.
   ══════════════════════════════════════════════════════════════════════════ */

.kba-chip {
  display: inline-block;
  margin: 2px 6px 2px 0;
  padding: 1px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--dark-3);
  color: var(--text-muted);
  font-size: 0.74rem;
  line-height: 1.75;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}
a.kba-chip:hover,
a.kba-chip:focus-visible {
  border-color: var(--gold);
  color: var(--gold);
}

/* SECOND fiddle: the category an article's section happens to sit in. */
.kba-chip--cat {
  border-style: dashed;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* THE filing. Solid, coloured, heavier — this is the term on the post. */
.kba-chip--section {
  border-color: var(--aqua);
  color: var(--aqua);
  font-weight: 600;
}

/* An article carrying no section at all (only reachable from wp-admin). */
.kba-chip--none {
  border-style: dashed;
  color: var(--text-muted);
  font-style: italic;
}

/* Active server-side filter, above the table. */
.kba-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
}
.kba-filterbar-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Sections & categories view (?terms=1) ── */
.kba-structure { margin: 6px 0 28px; }
.kba-structure-cat {
  padding: 14px 16px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--dark-3);
}
.kba-structure-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.kba-structure-count {
  font-size: 0.76rem;
  color: var(--text-muted);
}
.kba-structure-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0 0 0 18px;
  border-left: 1px solid var(--border);
}
.kba-structure-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}
.kba-structure-empty { margin: 8px 0 0 18px; }
.kba-structure-note {
  max-width: 620px;
  margin-top: 18px;
  color: var(--text-muted);
}

/* Inline rename — one small form per term, so it never becomes a page mode. */
.kba-renameform {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 0 auto;
}
.kba-renameform input[type="text"] {
  width: 220px;
  max-width: 46vw;
  padding: 3px 8px;
  font-size: 0.8rem;
}
.kba-renameform button {
  font: inherit;          /* a <button> does not inherit the page font on its own */
  font-size: 0.8rem;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

/* The two add-a-term forms sit under the tree. */
.kba-termform {
  max-width: 520px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

@media (max-width: 700px) {
  .kba-renameform { margin-left: 0; width: 100%; }
  .kba-renameform input[type="text"] { flex: 1 1 auto; max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARTNER PORTAL — LEFT NAVIGATION RAIL
   (inc/portal-nav.php, rendered once from header.php)

   The portal is twelve page templates. Rather than wrap each of them in a new
   layout div, the rail is position:fixed and the CONTENT is pushed clear of it
   with a single padding rule on <body>. Fixed elements — #site-header, the
   mega-menu, the TrustedExpert backdrop — are laid out against the viewport,
   so body padding does not move them; everything in normal flow, footer
   included, shifts by exactly the rail's width.

   The padding hangs off `.has-portal-rail`, a body class added by the SAME
   predicate that decides whether to draw the rail (onclave_portal_rail_active).
   There is no selector that can apply the offset to a page without a rail.

   Colour follows the portal's existing language: GOLD is partner-facing, AQUA
   is staff. Everything is built from the existing tokens, so light mode follows
   for free.
   ═══════════════════════════════════════════════════════════════════════════ */

:root { --portal-rail-w: 220px; }

/* Mobile-first: no rail. The desktop block below turns it on together with the
   content offset, so the two can never get out of step. */
.portal-rail { display: none; }

.portal-rail-inner { padding: 22px 0 34px; }

.portal-rail-group + .portal-rail-group {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
/* Staff surfaces are aqua — the same signal .portal-section--agent uses.
   Same specificity as the rule above and later in the sheet, so it wins. */
.portal-rail-group + .portal-rail-group--staff { border-top-color: rgba(0, 168, 157, 0.22); }

.portal-rail-label {
  padding: 0 20px;
  margin-bottom: 10px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.portal-rail-group--staff .portal-rail-label { color: var(--aqua); }

.portal-rail-list { list-style: none; margin: 0; padding: 0; }
.portal-rail-item { margin: 0; }

.portal-rail-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 20px;
  /* The active marker is a left edge, so every item reserves the space for it
     and nothing shifts sideways when the current page changes. */
  border-left: 2px solid transparent;
  font-size: 0.86rem;
  line-height: 1.3;
  color: var(--text);
  text-decoration: none;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.portal-rail-link:hover { color: var(--white); background: var(--dark-3); }

.portal-rail-ic { flex: 0 0 auto; opacity: 0.7; transition: opacity 0.15s; }
.portal-rail-link:hover .portal-rail-ic { opacity: 1; }
.portal-rail-text { min-width: 0; }

/* Active — gold for partner items, aqua for staff. Token-based on purpose:
   a hardcoded gold tint would stay gold when light mode repaints --gold. */
.portal-rail-link.is-active {
  color: var(--gold);
  font-weight: 600;
  background: var(--dark-3);
  border-left-color: var(--gold);
}
.portal-rail-link.is-active .portal-rail-ic { opacity: 1; }
.portal-rail-group--staff .portal-rail-link.is-active {
  color: var(--aqua);
  border-left-color: var(--aqua);
}

/* Focus must be visible and must not be clipped by the rail's scroll box —
   hence an inset outline rather than an offset one. */
.portal-rail-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}
.portal-rail-group--staff .portal-rail-link:focus-visible { outline-color: var(--aqua); }

/* ── DESKTOP: the rail, and the offset it pays for ──
   981px, not 980px: below the breakpoint the rail is gone entirely and the
   content offset goes with it. A half-width overlay rail on a tablet would sit
   on top of the tables, and the site header's own nav already covers every
   destination the rail lists — so hiding it costs nothing. */
@media (min-width: 981px) {
  .portal-rail {
    display: block;
    position: fixed;
    top: 80px;          /* clear the fixed 80px site header */
    left: 0;
    bottom: 0;
    width: var(--portal-rail-w);
    /* Under the site header (200) and under the mega-menu panel (199) so an
       open mega-menu still covers it; above page content and the TrustedExpert
       animated backdrop (0). */
    z-index: 150;
    background: var(--dark-2);
    border-right: 1px solid var(--border);
    overflow-y: auto;                 /* long staff list on a short screen */
    overscroll-behavior: contain;     /* scrolling the rail never scrolls the page */
    scrollbar-width: thin;
  }
  /* wp-admin bar pushes the site header down; the rail follows it. */
  body.admin-bar .portal-rail { top: 112px; }

  /* THE OFFSET. body is a flex column (sticky footer) — padding does not
     disturb that, and box-sizing:border-box keeps min-height:100vh honest. */
  body.has-portal-rail { padding-left: var(--portal-rail-w); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARTNER PORTAL HOME — WORKING AREA
   (template-partner-portal.php)

   The card grids are gone; what is left is stat tiles and row lists built from
   the existing .console-stat* / .ticket-listhead / .deal-table* / .asset-notice
   vocabulary. Only the three rules below had nowhere to come from.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Stacked panels — full width, because a table squeezed into half a column
   next to the rail is a table nobody can read. */
.portal-work + .portal-work { margin-top: 44px; }

/* .ticket-listhead is space-between with two children; the right-hand side can
   carry a secondary link as well as the button, so it gets its own flex box. */
.portal-head-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* CTA row under an empty state. .asset-notice already carries the 22px gap
   below itself, so this only needs to keep its own buttons apart. */
.portal-empty-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ── RAIL: keep everything on ONE centre axis ──
   body padding shifts in-flow content, but #site-header and .mega-menu are
   position:fixed against the viewport — so the logo and nav pill stayed centred
   on the full window while everything below centred inside the narrower area.
   Two axes, and it read as broken. Offset the fixed furniture by the same rail
   width so the whole page shares one centre. Scoped to .has-portal-rail and to
   the same breakpoint that shows the rail, so a page without a rail is untouched. */
@media (min-width: 981px) {
  /* Offsetting the WHOLE header pushed the logo off the top-left and left a dead
     220x80 box above the rail. Only the centred nav needs to move: the logo stays
     far left as the rail column's brand mark (the standard app-shell pattern),
     the actions stay far right, and the pill shifts half a rail width so it
     centres over the content area rather than the window. */
  body.has-portal-rail #site-header nav { transform: translateX(calc(var(--portal-rail-w) / 2)); }
  body.has-portal-rail .mega-menu       { margin-left: calc(var(--portal-rail-w) / 2); }
  /* The hero sits under the fixed header and spans the offset content area, so
     its own centring already follows the body padding — nothing to do there. */
}

/* ── FEEDBACK ADMIN ── (relocated from template-portal-feedback-admin.php) */
/* ── Feedback Admin — status pipeline ──

   A row of counts, one per status, in pipeline order. Each is a LINK that

   filters the table below, so the shape of the board is also its navigation.

   Deliberately not tiles: these are a sequence, and they should read as one. */

.fba-pipe {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin: 0 0 22px;

}

.fba-pipe-item {

  display: inline-flex;

  align-items: baseline;

  gap: 8px;

  padding: 7px 13px;

  border-radius: 999px;

  border: 1px solid var(--border);

  background: rgba(201, 168, 76, 0.05);

  text-decoration: none;

  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;

}

.fba-pipe-item:hover { border-color: var(--gold); }

.fba-pipe-item.is-active {

  border-color: rgba(0, 168, 157, 0.45);

  background: rgba(0, 168, 157, 0.08);

}

.fba-pipe-num {

  font-size: 0.95rem;

  font-weight: 700;

  color: var(--white);

  font-variant-numeric: tabular-nums;

}

.fba-pipe-label {

  font-size: 0.78rem;

  letter-spacing: 0.04em;

  color: var(--text-muted);

}

.fba-pipe-item.is-active .fba-pipe-label { color: var(--aqua); }

/* A status with nothing in it is context, not a destination. */

.fba-pipe-item.is-empty { opacity: 0.5; }



/* ── Panels (top ideas, empty state) — same shell as .tel-panel ── */

.fba-panel {

  margin: 0 0 24px;

  padding: 18px 20px;

  border-radius: 10px;

  background: var(--dark-3);

  border: 1px solid var(--border);

}

.fba-panel-head {

  display: flex;

  align-items: baseline;

  justify-content: space-between;

  gap: 14px;

  flex-wrap: wrap;

  margin-bottom: 4px;

}

.fba-panel-title {

  font-size: 0.78rem;

  font-weight: 700;

  letter-spacing: 0.09em;

  text-transform: uppercase;

  color: var(--white);

}

.fba-panel-sub {

  font-size: 0.82rem;

  color: var(--text-muted);

  margin-bottom: 14px;

}

.fba-panel-link { font-size: 0.78rem; color: var(--gold); text-decoration: none; white-space: nowrap; }

.fba-panel-link:hover { text-decoration: underline; }



/* ── Ranked "what are people asking for" list ── */

.fba-top-list { list-style: none; margin: 0; padding: 0; }

.fba-top-row {

  display: flex;

  align-items: center;

  gap: 14px;

  padding: 10px 0;

  border-top: 1px solid rgba(201, 168, 76, 0.12);

}

.fba-top-row:first-child { border-top: 0; }

.fba-top-votes {

  flex: 0 0 auto;

  min-width: 46px;

  padding: 3px 8px;

  border-radius: 6px;

  text-align: center;

  font-size: 0.8rem;

  font-weight: 700;

  font-variant-numeric: tabular-nums;

  color: var(--aqua);

  background: rgba(0, 168, 157, 0.09);

  border: 1px solid rgba(0, 168, 157, 0.35);

}

.fba-top-title { flex: 1 1 auto; min-width: 0; font-size: 0.92rem; }

.fba-top-title a { color: var(--text); text-decoration: none; }

.fba-top-title a:hover { color: var(--gold); }

.fba-top-sub { display: block; margin-top: 3px; font-size: 0.76rem; color: var(--text-muted); }



/* ── Active-filter chips ── */

.fba-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 16px; }

.fba-chip {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 4px 10px;

  border-radius: 999px;

  font-size: 0.78rem;

  color: var(--text);

  background: rgba(201, 168, 76, 0.08);

  border: 1px solid var(--border);

}

.fba-chip-clear { font-size: 0.78rem; color: var(--gold); text-decoration: none; }

.fba-chip-clear:hover { text-decoration: underline; }



/* ── Table cells ── */

.fba-cell-title { max-width: 520px; }

.fba-cell-sub { display: block; margin-top: 3px; font-size: 0.76rem; color: var(--text-muted); }

.fba-num { font-variant-numeric: tabular-nums; }

/* An idea nobody has answered gets a mark in the row, not just in a tile. */

.fba-flag {

  display: inline-block;

  margin-left: 8px;

  padding: 1px 7px;

  border-radius: 999px;

  font-size: 0.7rem;

  font-weight: 700;

  letter-spacing: 0.04em;

  color: var(--tomato);

  background: rgba(240, 73, 62, 0.09);

  border: 1px solid rgba(240, 73, 62, 0.35);

  vertical-align: middle;

}



/* ── Detail: the two staff actions, side by side ── */

.fba-actions {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  gap: 18px;

  margin: 0 0 26px;

}

.fba-action {

  padding: 16px 18px;

  border-radius: 10px;

  background: var(--dark-3);

  border: 1px solid var(--border);

}

.fba-action-title {

  display: block;

  font-size: 0.78rem;

  font-weight: 700;

  letter-spacing: 0.09em;

  text-transform: uppercase;

  color: var(--white);

  margin-bottom: 4px;

}

.fba-action-sub { display: block; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 12px; }

.fba-action select,

.fba-action textarea {

  width: 100%;

  padding: 9px 11px;

  border-radius: 7px;

  border: 1px solid var(--border);

  background: var(--dark-2);

  color: var(--text);

  font-family: inherit;

  font-size: 0.9rem;

  margin-bottom: 12px;

}

.fba-action textarea { resize: vertical; min-height: 96px; }

.fba-action select:focus,

.fba-action textarea:focus { outline: none; border-color: var(--gold); }



/* ── Detail: who voted ── */

.fba-voters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.fba-voter {

  padding: 3px 9px;

  border-radius: 999px;

  font-size: 0.76rem;

  color: var(--text);

  background: rgba(0, 168, 157, 0.07);

  border: 1px solid rgba(0, 168, 157, 0.28);

}

.fba-voters-none { font-size: 0.82rem; color: var(--text-muted); }



@media (max-width: 640px) {

  .fba-top-row { flex-wrap: wrap; }

  .fba-actions { grid-template-columns: 1fr; }

}

/* The logo now sits directly above the rail, so give that corner the rail's
   ground and its right border — the brand mark reads as the column's header
   instead of floating over a seam. */
@media (min-width: 981px) {
  /* box-sizing is border-box globally, so the rail's 220px INCLUDES its 1px
     border — the border occupies 219-220px, not 220-221px. Painting the header's
     line at 220px put it one pixel right of the rail's, and the seam showed.
     Both now derive from the same expression. */
  body.has-portal-rail #site-header {
    background-image: linear-gradient(to right,
      var(--dark-2) 0, var(--dark-2) calc(var(--portal-rail-w) - 1px),
      transparent calc(var(--portal-rail-w) - 1px));
  }
  body.has-portal-rail #site-header::after {
    content: ""; position: absolute; top: 0; bottom: 0;
    left: calc(var(--portal-rail-w) - 1px);
    width: 1px; background: var(--border);
  }
}

/* Align the logo with the rail's own labels. The header pads 60px, the rail's
   group labels indent 20px — so the brand sat further in than "Partner Tools"
   directly beneath it. Pull just the logo across; the nav keeps its own offset. */
@media (min-width: 981px) {
  body.has-portal-rail .logo { margin-left: -40px; }
}

/* ── PORTAL LINK COLOUR — the browser default is unreadable here ──
   Any anchor that carries no colour of its own fell back to the browser's blue
   and purple-visited, which on the dark ground reads as broken (Asset Admin's
   folder names, the KB live-search dropdown). Colour them from the theme, and
   colour :visited the SAME — a visited-state that changes hue is a light-web
   convention that just looks like a second, worse colour on a dark surface.
   Scoped with :not([class]) plus the specific uncoloured classes, so every
   button, chip and already-styled link keeps exactly what it has. */
.portal-section a:not([class]),
.portal-section a:not([class]):visited,
.aa-table a:not([class]),
.aa-table a:not([class]):visited {
  color: var(--gold);
  text-decoration: none;
}
.portal-section a:not([class]):hover,
.aa-table a:not([class]):hover {
  color: var(--white);
  text-decoration: underline;
}

/* The KB hero wrapper stays the positioning context for its own animation
   layer, but `overflow: visible` is REQUIRED. The wrapper clips at its
   padding box, and the search panel is absolutely positioned inside it --
   with overflow hidden the dropdown is cut off partway down and the results
   are simply not there, with nothing in any console. The animation layer
   clips itself (.hero-grid is inset:0 / overflow:hidden), so nothing else
   needed the wrapper's own clip. */
.hkb-searchbox-wrapper { position: relative; overflow: visible !important; }
/* ══════════════════════════════════════════════════════════════════════════
   KB ADMIN — THE CHIP FILTER ROWS
   template-portal-kb.php, list view. Two rows of plain links above the table:
   CATEGORIES (the parent terms) on top, SECTIONS (their children) beneath —
   the same order as the forms and the table columns, so the hierarchy reads
   the same way everywhere. They replaced the two select filters entirely, so
   there is one control per level and nothing that can disagree about what is
   active.

   The chips reuse .kba-chip / .kba-chip--cat / .kba-chip--section, so a chip
   in a filter row looks like the same thing as the matching chip in the table.
   .kba-chip--on is the ACTIVE one: filled rather than outlined.
   ══════════════════════════════════════════════════════════════════════════ */

.kba-chipfilters { margin: 4px 0 18px; }

.kba-chiprow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 4px;
  margin-bottom: 6px;
}
.kba-chiprow:last-child { margin-bottom: 0; }

.kba-chiprow-label {
  flex: 0 0 78px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ACTIVE. Filled, so it reads as "this is on" and not merely "this exists".
   Both level modifiers land here, and each keeps its own accent. */
.kba-chip--on {
  border-style: solid;
  font-weight: 600;
}
.kba-chip--section.kba-chip--on {
  background: var(--aqua);
  border-color: var(--aqua);
  color: var(--dark);
}
.kba-chip--cat.kba-chip--on {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--dark);
  letter-spacing: 0.02em;
}
/* The shared a.kba-chip hover repaints text and border GOLD, which on a filled
   chip would hide the label in its own fill and ring it in a colour that is
   not its accent. Each level keeps its own border and dims instead. */
a.kba-chip--section.kba-chip--on:hover,
a.kba-chip--section.kba-chip--on:focus-visible {
  border-color: var(--aqua);
  color: var(--dark);
  opacity: 0.85;
}
a.kba-chip--cat.kba-chip--on:hover,
a.kba-chip--cat.kba-chip--on:focus-visible {
  border-color: var(--gold);
  color: var(--dark);
  opacity: 0.85;
}

@media (max-width: 700px) {
  .kba-chiprow-label { flex: 1 0 100%; margin-bottom: 2px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   KB CATEGORY COLOUR — the eight named palette colours
   Generated from onclave_kb_palette() in inc/kb-portal.php; the hexes here and
   the hexes there are the same eight pairs and have to be changed together.

   A KB CATEGORY (a top-level ht_kb_category term) may carry a colour. It is
   OPTIONAL: a category with none emits no class at all and its chip keeps the
   neutral .kba-chip look, so the categories that predate this feature are not
   broken, they are simply uncoloured.

   ⚠️ WHY NAMES AND NOT A HEX FIELD. This theme has a light mode, so any chip
   is painted on one of two very different grounds: --dark-3 is #1E1E2A by
   default and #FFFFFF under html.light-mode. A hand-typed hex can only ever be
   right on the ground the author happened to be reading on — a colour picked
   in dark mode lands near-black on the white light-mode chip. So each colour
   is a PAIR: a bright tint for the dark ground and a deep shade for the light
   one. Only the NAME is stored, and the theme resolves the pair, so switching
   theme repaints every chip and no stored value can be unreadable.

   Every state below clears 4.5:1 in BOTH themes (tightest: Green in light mode
   at 4.86:1). 4.5 and not 3.0 because the chip label is 0.74rem — normal text.

   LIGHT MODE follows this stylesheet's existing mechanism and adds no second
   one: bare selectors ARE the dark theme, html.light-mode overrides. There is
   deliberately no prefers-color-scheme query here — the theme is an explicit
   user choice (the sun/moon toggle), not the OS setting.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── The keys. Each sets FOUR custom properties and NOTHING else, so one class
      can dress a chip, a heading rule or a picker swatch without any of them
      fighting over the component look:
        --kbc-color  text + border of an OUTLINED chip
        --kbc-fill   the translucent wash behind it
        --kbc-solid  the fill of the ACTIVE (--on) chip
        --kbc-ink    the text that sits on --kbc-solid
      Two selectors per key: .kb-c-<key> is the neutral carrier (headings,
      swatches), .kba-chip--c-<key> is what a chip gets. ── */

/* DARK (default) */
.kb-c-amber,  .kba-chip--c-amber  { --kbc-color: #E3B341; --kbc-fill: rgba(227,179,65,0.16);  --kbc-solid: #E3B341; --kbc-ink: #0E0E12; }
.kb-c-teal,   .kba-chip--c-teal   { --kbc-color: #3FC2B7; --kbc-fill: rgba(63,194,183,0.16);  --kbc-solid: #3FC2B7; --kbc-ink: #0E0E12; }
.kb-c-rose,   .kba-chip--c-rose   { --kbc-color: #F2879E; --kbc-fill: rgba(242,135,158,0.16); --kbc-solid: #F2879E; --kbc-ink: #0E0E12; }
.kb-c-violet, .kba-chip--c-violet { --kbc-color: #B7A0F2; --kbc-fill: rgba(183,160,242,0.16); --kbc-solid: #B7A0F2; --kbc-ink: #0E0E12; }
.kb-c-slate,  .kba-chip--c-slate  { --kbc-color: #A6B6CC; --kbc-fill: rgba(166,182,204,0.16); --kbc-solid: #A6B6CC; --kbc-ink: #0E0E12; }
.kb-c-green,  .kba-chip--c-green  { --kbc-color: #6ECB84; --kbc-fill: rgba(110,203,132,0.16); --kbc-solid: #6ECB84; --kbc-ink: #0E0E12; }
.kb-c-blue,   .kba-chip--c-blue   { --kbc-color: #74B6F5; --kbc-fill: rgba(116,182,245,0.16); --kbc-solid: #74B6F5; --kbc-ink: #0E0E12; }
.kb-c-clay,   .kba-chip--c-clay   { --kbc-color: #E89E74; --kbc-fill: rgba(232,158,116,0.16); --kbc-solid: #E89E74; --kbc-ink: #0E0E12; }

/* LIGHT — deep shades on white, and near-white ink on the filled chip. */
html.light-mode .kb-c-amber,  html.light-mode .kba-chip--c-amber  { --kbc-color: #8A5D0A; --kbc-fill: rgba(138,93,10,0.11);  --kbc-solid: #8A5D0A; --kbc-ink: #FFFFFF; }
html.light-mode .kb-c-teal,   html.light-mode .kba-chip--c-teal   { --kbc-color: #0E6B65; --kbc-fill: rgba(14,107,101,0.11); --kbc-solid: #0E6B65; --kbc-ink: #FFFFFF; }
html.light-mode .kb-c-rose,   html.light-mode .kba-chip--c-rose   { --kbc-color: #A62249; --kbc-fill: rgba(166,34,73,0.11);  --kbc-solid: #A62249; --kbc-ink: #FFFFFF; }
html.light-mode .kb-c-violet, html.light-mode .kba-chip--c-violet { --kbc-color: #5B3CBE; --kbc-fill: rgba(91,60,190,0.11);  --kbc-solid: #5B3CBE; --kbc-ink: #FFFFFF; }
html.light-mode .kb-c-slate,  html.light-mode .kba-chip--c-slate  { --kbc-color: #48586E; --kbc-fill: rgba(72,88,110,0.11);  --kbc-solid: #48586E; --kbc-ink: #FFFFFF; }
html.light-mode .kb-c-green,  html.light-mode .kba-chip--c-green  { --kbc-color: #1D7639; --kbc-fill: rgba(29,118,57,0.11);  --kbc-solid: #1D7639; --kbc-ink: #FFFFFF; }
html.light-mode .kb-c-blue,   html.light-mode .kba-chip--c-blue   { --kbc-color: #1A5EA6; --kbc-fill: rgba(26,94,166,0.11);  --kbc-solid: #1A5EA6; --kbc-ink: #FFFFFF; }
html.light-mode .kb-c-clay,   html.light-mode .kba-chip--c-clay   { --kbc-color: #93421C; --kbc-fill: rgba(147,66,28,0.11);  --kbc-solid: #93421C; --kbc-ink: #FFFFFF; }

/* ── THE CHIP.
      Matched on the class SUBSTRING so one rule serves all eight keys and a
      ninth added through the onclave_kb_palette filter needs only its own
      four-property line above. "kba-chip--c-" carries a TRAILING hyphen, so it
      cannot match .kba-chip--cat.

      This sets colour ONLY — never border-style and never font-weight — so
      .kba-chip--cat stays dashed and .kba-chip--section stays bold. The LEVEL
      is still read from the border style and weight; the COLOUR now says which
      category, which is the one thing the chip rows could not previously
      show. Specificity 0,2,0 beats the level modifiers' 0,1,0 on colour
      without touching anything else they set. ── */
.kba-chip[class*="kba-chip--c-"] {
  border-color: var(--kbc-color);
  background: var(--kbc-fill);
  color: var(--kbc-color);
}

/* The shared a.kba-chip:hover repaints border and text GOLD, which would throw
   away the category's colour on the one interaction that should confirm it.
   Hold the colour and thicken the ring instead — a stronger fill was measured
   and drops several pairs under 4.5:1, so presence comes from the ring, which
   costs no contrast at all. */
a.kba-chip[class*="kba-chip--c-"]:hover,
a.kba-chip[class*="kba-chip--c-"]:focus-visible {
  border-color: var(--kbc-color);
  color: var(--kbc-color);
  box-shadow: inset 0 0 0 1px var(--kbc-color);
}

/* ── ACTIVE / FILLED. Same job as .kba-chip--section.kba-chip--on, in the
      category's own colour rather than the fixed aqua/gold. 0,3,0 beats those
      0,2,0 rules. ── */
.kba-chip--on[class*="kba-chip--c-"] {
  background: var(--kbc-solid);
  border-color: var(--kbc-solid);
  color: var(--kbc-ink);
}
/* Filled chips dim on hover rather than repaint, exactly like the aqua and
   gold ones above — repainting would hide the label inside its own fill. */
a.kba-chip--on[class*="kba-chip--c-"]:hover,
a.kba-chip--on[class*="kba-chip--c-"]:focus-visible {
  background: var(--kbc-solid);
  border-color: var(--kbc-solid);
  color: var(--kbc-ink);
  box-shadow: none;
  opacity: 0.85;
}

/* ── THE PICKER SWATCH.
      For the colour control in the portal's term-management view: put
      .kba-swatch on a span that ALSO carries .kb-c-<key>, and it paints itself
      from the same tokens the chip uses — so what the author picks is
      literally what the chip will be, in whichever theme they are reading in.
      .kba-swatch--none is the "no colour" option and needs no key. ── */
.kba-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  vertical-align: -2px;
  border: 1px solid var(--kbc-color, var(--border));
  background: var(--kbc-solid, transparent);
}
.kba-swatch--none {
  border-style: dashed;
  border-color: var(--text-muted);
  background: transparent;
}

/* ── PUBLIC LANDING: the group heading rule (hkb-templates/hkb-archive.php).
      .kb-section-head already ends in a 1px --border rule; when its category
      has a colour that rule simply becomes the category's, 2px so a hue change
      is actually visible. The heading TEXT stays gold — it is set !important
      and, more to the point, three differently-coloured uppercase headings
      down one page is the wash the design was told to avoid. The rule alone
      groups the page and matches the chips the same partner sees in the
      portal. ── */
.kb-section-head[class*="kb-c-"] {
  border-bottom-width: 2px;
  border-bottom-color: var(--kbc-color);
}

/* Swatch picker in KB term management. Paints from the same tokens the chip
   uses, so an author sees the real colour in whichever theme they are reading. */
.kba-swatches { display: inline-flex; gap: 5px; align-items: center; margin-left: 8px; }
.kba-swatch-opt { display: inline-flex; cursor: pointer; }
.kba-swatch-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.kba-swatch {
  display: block; width: 16px; height: 16px; border-radius: 5px;
  border: 1.5px solid var(--border); background: var(--dark-3);
}
.kba-swatch-opt input:checked + .kba-swatch { outline: 2px solid var(--white); outline-offset: 1px; }
.kba-swatch-opt input:focus-visible + .kba-swatch { outline: 2px solid var(--gold); outline-offset: 1px; }
.kba-swatch--none { background: transparent; }

/* ── LICENSING (preview) ── (relocated from template-portal-licensing.php) */
/* The preview banner. Deliberately loud enough to be unmissable and quiet

   enough not to look like an error — this is a state, not a fault. */

.lic-preview {

  display: flex; align-items: flex-start; gap: 13px; flex-wrap: wrap;

  background: rgba(201, 168, 76, 0.06);

  border: 1px solid rgba(201, 168, 76, 0.38);

  border-radius: 6px; padding: 14px 18px; margin-bottom: 26px;

}

.lic-preview-badge {

  flex: none; background: var(--gold); color: var(--dark);

  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;

  padding: 4px 10px; border-radius: 3px; line-height: 1.2;

}

.lic-preview-text { flex: 1 1 320px; color: var(--text-muted); font-size: 0.9rem; line-height: 1.55; }



/* The same badge, inline in the page hero. */

.lic-hero-badge {

  display: inline-block; vertical-align: middle; margin-left: 12px;

  background: var(--gold); color: var(--dark);

  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;

  padding: 4px 9px; border-radius: 3px;

}



/* Section headings between the stacked tables. */

.lic-sectionhead { margin: 0 0 6px; font-size: 1.25rem; font-weight: 600; color: var(--white); }

.lic-sectionsub  { margin: 0 0 20px; color: var(--text-muted); font-size: 0.9rem; line-height: 1.55; }



/* Numeric table cells line up on the right so quantities can be compared. */

.lic-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

th.lic-num { text-align: right; }



/* Two fields on one row inside a .ticket-form. */

.lic-fieldrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }

@media (max-width: 640px) { .lic-fieldrow { grid-template-columns: 1fr; } }



/* The entitlement token: monospace, selectable, never wrapped into ambiguity. */

.lic-token {

  width: 100%; min-height: 132px; resize: vertical;

  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  font-size: 0.78rem; line-height: 1.6; word-break: break-all;

  background: var(--dark-2); color: var(--text);

  border: 1px solid var(--border); border-radius: 6px; padding: 13px 15px;

}

.lic-tokenbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }



/* The verdict strip under a token — what onclave_lic_verify() actually said. */

.lic-verdict {

  border: 1px solid var(--border); border-left-width: 3px; border-radius: 4px;

  background: var(--dark-3); padding: 11px 15px; margin-top: 14px;

  font-size: 0.86rem; color: var(--text-muted); line-height: 1.55;

}

.lic-verdict strong { color: var(--white); font-weight: 600; }

.lic-verdict--unsigned { border-left-color: var(--gold); }

.lic-verdict--signed   { border-left-color: var(--aqua); }



/* A pool's own line in the allocate form's picker, and the request form hint. */

.lic-hint { display: block; margin: -8px 0 16px; color: var(--text-muted); font-size: 0.82rem; line-height: 1.5; }



/* License Admin only: the server-side partner filter sits above the client-side

   search/status bar, so it needs its own gap. Two bars, two jobs — see the

   comment in template-portal-license-admin.php. */

.lic-partner-form { margin-bottom: 10px; }

/* The hero Preview chip lost to `.portal-welcome h1 span { color: var(--gold) }`
   (0,1,2 vs 0,1,0), so it rendered gold-on-gold. That rule exists TWICE in this
   file, so this is scoped tighter and appended last rather than edited in place. */
.portal-welcome h1 span.lic-hero-badge { color: var(--dark); }

/* Rail preview badge. Filled pill, not a bare glyph, so it reads as a badge at a
   glance instead of a stray letter next to the label. */
.portal-rail-badge {
  margin-left: auto; flex: none;
  background: var(--gold); color: var(--dark);
  font-size: 0.58rem; font-weight: 700; line-height: 1;
  letter-spacing: 0.04em; padding: 3px 5px; border-radius: 3px;
}
.portal-rail-link.is-active .portal-rail-badge { background: var(--gold); color: var(--dark); }

/* ══════════════════════════════════════════════════════════════════════════════
   LICENSING — QUOTES (PREVIEW)
   Appended, never edited in place: this file has mixed line endings and a large
   duplicated region, so an in-place rewrite produces a diff nobody can review.

   Everything below is built from the theme's own tokens (--dark-3, --border,
   --text, --white, --gold, --aqua, --tomato), so it follows html.light-mode
   automatically and never puts light text on a light ground. The quote surfaces
   otherwise reuse .console-stat*, .deal-table*, .deal-badge*, .ticket-form,
   .ticket-fields, .asset-notice and the .lic-* vocabulary already in use.
   ══════════════════════════════════════════════════════════════════════════ */

/* The printable quote card — the thing a partner forwards to their finance
   team. Deliberately looks like a document, not like another portal panel. */
.lic-q-doc {
  background: var(--dark-3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 30px 32px;
  margin: 0 0 26px;
}
@media (max-width: 640px) { .lic-q-doc { padding: 22px 18px; } }

.lic-q-doc-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding-bottom: 18px; margin-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.lic-q-doc-ident { min-width: 0; }
.lic-q-doc-eyebrow {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 7px;
}
.lic-q-doc-number {
  margin: 0 0 4px; font-size: 1.5rem; font-weight: 600; color: var(--white);
  font-variant-numeric: tabular-nums;
}
.lic-q-doc-for { color: var(--text-muted); font-size: 0.92rem; line-height: 1.5; }
.lic-q-doc-side { flex: none; text-align: right; }

/* Label/value pairs across the top of the card. */
.lic-q-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 26px; margin: 0 0 24px;
}
@media (max-width: 720px) { .lic-q-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .lic-q-facts { grid-template-columns: 1fr; } }
.lic-q-fact dt {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 5px;
}
.lic-q-fact dd { margin: 0; color: var(--text); font-size: 0.95rem; line-height: 1.5; }

/* The money. Two columns, right-aligned, with the total set apart — a quote is
   read by somebody looking for one number, so that number is the loud one. */
.lic-q-lines { width: 100%; border-collapse: collapse; margin: 0 0 4px; }
.lic-q-lines th,
.lic-q-lines td {
  padding: 11px 0; text-align: left;
  border-bottom: 1px solid var(--border);
  color: var(--text); font-size: 0.92rem; line-height: 1.5;
}
.lic-q-lines th { color: var(--text-muted); font-weight: 600; }
.lic-q-lines td.lic-num,
.lic-q-lines th.lic-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lic-q-lines tr.lic-q-line--discount td { color: var(--aqua); }
.lic-q-lines tr.lic-q-line--total td {
  border-bottom: none; border-top: 2px solid var(--border);
  padding-top: 15px; font-size: 1.12rem; font-weight: 700; color: var(--white);
}

/* Small print under the card. */
.lic-q-doc-foot {
  margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--border);
  color: var(--text-muted); font-size: 0.82rem; line-height: 1.6;
}

/* Accept / Decline. Two POSTs, so two forms sitting on one row. */
.lic-q-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.lic-q-actions form { margin: 0; }
.lic-q-actions .lic-q-actions-note { color: var(--text-muted); font-size: 0.82rem; line-height: 1.5; }

/* A decline button reads as a real choice, not as an error. Tomato outline on
   the card ground — never a filled destructive slab. */
.lic-q-decline {
  padding: 8px 16px; border-radius: 8px;
  border: 1px solid rgba(240,73,62,0.45); background: transparent; color: var(--tomato);
  font-family: 'Jost', sans-serif; font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.lic-q-decline:hover { border-color: var(--tomato); background: rgba(240,73,62,0.08); }

/* The answer buttons in the partner's quote TABLE — same pair, tighter. */
.lic-q-rowactions { display: flex; gap: 8px; flex-wrap: wrap; }
.lic-q-rowactions form { margin: 0; }

/* PRINT: /licensing/?quote=ID adds `lic-quote-view` to <body> (the body_class
   filter in inc/licensing.php), which is what scopes all of this. Everything at
   body level is hidden except the quote card's own section, and the card is
   inverted WHOLESALE — dark ink on white paper, both together, never one
   without the other. */
@media print {
  /* :has() guards the blanket hide, so a `?quote=` that did NOT resolve — a
     guessed id, a deleted quote — prints the ordinary page instead of a blank
     sheet. A browser without :has() drops this one rule and prints everything;
     the inversion rules below still apply, so it degrades to ugly, not empty. */
  body.lic-quote-view:has(> .lic-q-printable) > * { display: none !important; }
  body.lic-quote-view > .lic-q-printable { display: block !important; }

  body.lic-quote-view,
  body.lic-quote-view > .lic-q-printable {
    background: #FFFFFF !important;
    color: #1A1A1A !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.lic-quote-view .lic-q-printable .container { max-width: none !important; padding: 0 !important; }

  body.lic-quote-view .lic-q-doc {
    background: #FFFFFF !important;
    border: 1px solid #CCCCCC !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }
  body.lic-quote-view .lic-q-doc,
  body.lic-quote-view .lic-q-doc-number,
  body.lic-quote-view .lic-q-fact dd,
  body.lic-quote-view .lic-q-lines th,
  body.lic-quote-view .lic-q-lines td,
  body.lic-quote-view .lic-q-lines tr.lic-q-line--total td { color: #1A1A1A !important; }
  body.lic-quote-view .lic-q-doc-eyebrow,
  body.lic-quote-view .lic-q-doc-for,
  body.lic-quote-view .lic-q-fact dt,
  body.lic-quote-view .lic-q-doc-foot,
  body.lic-quote-view .lic-q-lines tr.lic-q-line--discount td { color: #555555 !important; }
  body.lic-quote-view .lic-q-doc-head,
  body.lic-quote-view .lic-q-doc-foot,
  body.lic-quote-view .lic-q-lines th,
  body.lic-quote-view .lic-q-lines td { border-color: #CCCCCC !important; }
  body.lic-quote-view .lic-q-lines tr.lic-q-line--total td { border-top-color: #1A1A1A !important; }

  /* The preview disclaimer and the status badge PRINT — a finance team must not
     receive a page that looks like a real invoice. Everything interactive goes. */
  body.lic-quote-view .lic-q-noprint,
  body.lic-quote-view .lic-q-actions,
  body.lic-quote-view .ticket-detailbar { display: none !important; }

  body.lic-quote-view .deal-badge {
    color: #1A1A1A !important; background: #FFFFFF !important; border-color: #1A1A1A !important;
  }
  body.lic-quote-view .lic-q-printnote {
    display: block !important;
    margin: 0 0 18px; padding: 10px 12px;
    border: 1px solid #1A1A1A; background: #FFFFFF !important; color: #1A1A1A !important;
    font-size: 0.8rem; line-height: 1.5;
  }
}
/* Screen: the print-only disclaimer is redundant next to the preview banner. */
.lic-q-printnote { display: none; }

/* ── LICENSE ADMIN — THE PARTNER PICKER ───────────────────────────────────────
   Progressive enhancement over the plain grouped <select> in
   template-portal-license-admin.php. Everything below styles the ENHANCED layer
   only: with the script off none of these elements exist, and the page falls
   back to a <select> and a submit button that already have their own styling.

   DARK, like the rest of the portal: --dark-2 / --dark-3 / --dark-4 grounds
   under --white and --text ink, --gold for the accent. There is no light
   surface anywhere in here — a white panel with pale text has shipped in this
   theme before and is not shipping again. */
.lic-partner-form { align-items: center; }

.lic-pickr-label {
  color: var(--text-muted);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lic-pickr { position: relative; flex: 1 1 260px; min-width: 240px; }

.lic-pickr-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--dark-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--white);
  font-size: 0.9rem;
  line-height: 1.3;
}
.lic-pickr-input::placeholder { color: var(--text-muted); opacity: 1; }
/* A visible focus ring is not optional on a widget you drive from the keyboard. */
.lic-pickr-input:focus,
.lic-pickr-input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-color: var(--gold);
}

.lic-pickr-list {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px); left: 0; right: 0;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px 0;
  background: var(--dark-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55);
}
/* The script hides rows and empty company groups with the `hidden` property.
   Stated here rather than left to the UA sheet, which a later `display` rule
   on a plain div would quietly outrank. */
.lic-pickr [hidden] { display: none !important; }

.lic-pickr-groupname {
  padding: 9px 12px 3px;
  color: var(--gold);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lic-pickr-opt { padding: 8px 12px; cursor: pointer; }
.lic-pickr-opt-name { display: block; color: var(--white); font-size: 0.9rem; line-height: 1.35; }
.lic-pickr-opt-sub  { display: block; color: var(--text-muted); font-size: 0.78rem; margin-top: 2px; }
.lic-pickr-opt:hover { background: var(--dark-4); }
/* The ACTIVE row — where the arrow keys are — is marked with a gold edge as
   well as a lift in the ground, so it is not colour alone that says "here". */
.lic-pickr-opt.is-active { background: var(--dark-4); box-shadow: inset 3px 0 0 var(--gold); }
.lic-pickr-opt[aria-selected="true"] .lic-pickr-opt-name { color: var(--gold-light); }

.lic-pickr-empty { padding: 10px 12px; color: var(--text-muted); font-size: 0.85rem; }

.lic-pickr-profile { color: var(--gold); text-decoration: none; font-size: 0.85rem; white-space: nowrap; }
.lic-pickr-profile:hover { color: var(--gold-light); text-decoration: underline; }
.lic-pickr-profile:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

@media (max-width: 640px) {
  .lic-pickr { flex-basis: 100%; min-width: 0; }
  .lic-pickr-profile { white-space: normal; }
}
/* ═══════════════════════════════════════════════════════════════════════════
   ACCOUNTS (PREVIEW) — /accounts/, template-portal-crm.php + inc/crm.php
   Namespace .crm-* only. Everything else on that page reuses the existing
   .console-stat*, .deal-table*, .deal-badge*, .ticket-form, .asset-notice and
   .lic-* vocabulary, so there is exactly one place any of it is defined.
   Every colour here is a THEME TOKEN, never a literal: the light-theme block
   further up this file re-points --dark-3 / --white / --text-muted, and a
   hard-coded dark value would render light text on a light card.
   ═══════════════════════════════════════════════════════════════════════════ */

.crm-scope {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 0 20px; padding: 12px 14px;
  background: var(--dark-3); border: 1px solid var(--border); border-radius: 10px;
}
.crm-scope-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); margin-right: 4px;
}
.crm-scope-btn {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-muted); text-decoration: none;
  font-size: 0.78rem; font-weight: 600; line-height: 1.4;
}
.crm-scope-btn:hover { color: var(--white); border-color: var(--gold); }
.crm-scope-btn.is-active {
  color: var(--gold); border-color: rgba(201,168,76,0.55); background: rgba(201,168,76,0.10);
}
.crm-scope-rep { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.crm-scope-rep select {
  background: var(--dark-2); color: var(--white);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 12px; font-size: 0.78rem; max-width: 220px;
}
.crm-scope-chip {
  margin-left: auto; padding: 6px 12px; border-radius: 999px; text-decoration: none;
  font-size: 0.74rem; font-weight: 700;
  color: #E8912C; border: 1px solid rgba(232,145,44,0.40); background: rgba(232,145,44,0.10);
}
.crm-scope-chip:hover { color: #E8912C; border-color: rgba(232,145,44,0.75); }

.crm-section-head {
  margin: 34px 0 12px; font-size: 1.05rem; letter-spacing: 0.01em; color: var(--white);
}

/* Needs Attention — the work queue. Left rule so it reads as a queue, not a
   reference table. */
.crm-attention td:first-child { border-left: 2px solid rgba(201,168,76,0.45); }
.crm-attention-row td { vertical-align: top; }

.crm-book-unlinked td { color: var(--text-muted); font-style: italic; }

/* The owner cell — the only editable thing on the list view. */
.crm-owner-cell { min-width: 210px; }
.crm-owner-inline { display: flex; align-items: center; gap: 6px; margin: 0; }
.crm-owner-select {
  background: var(--dark-2); color: var(--white);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 8px; font-size: 0.8rem; max-width: 170px;
}
.crm-owner-save { padding: 5px 12px; font-size: 0.74rem; }
.crm-owner-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.crm-unowned { color: var(--text-muted); font-style: italic; }
.crm-hint { display: block; font-size: 0.74rem; color: var(--text-muted); margin: -4px 0 8px; }
.crm-stat-money { font-size: 1.25rem; }

/* Account detail */
.crm-account-head { margin: 8px 0 18px; }
.crm-account-head h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 6px; color: var(--white); }
.crm-account-sub { display: flex; flex-wrap: wrap; gap: 14px; font-size: 0.85rem; color: var(--text-muted); }
.crm-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.crm-panel {
  padding: 18px; border-radius: 10px;
  background: var(--dark-3); border: 1px solid var(--border);
}
.crm-panel h3 { margin: 0 0 10px; font-size: 0.95rem; color: var(--white); }
.crm-panel-lead { margin: 0 0 12px; font-size: 0.88rem; color: var(--white); }
.crm-panel-lead .console-cell-sub { color: var(--text-muted); }

/* Activity log — same entry shape as a deal's _deal_notes, so it reads the same. */
.crm-log { list-style: none; margin: 14px 0 0; padding: 0; }
.crm-log-entry {
  padding: 10px 0 10px 12px; border-left: 2px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.crm-log-entry:last-child { border-bottom: 0; }
.crm-log-entry--system { border-left-color: rgba(138,138,154,0.45); }
.crm-log-entry--decision { border-left-color: rgba(201,168,76,0.55); }
.crm-log-meta { display: block; font-size: 0.72rem; color: var(--text-muted); margin-bottom: 4px; }
.crm-log-text { display: block; font-size: 0.86rem; color: var(--white); white-space: pre-wrap; }

@media (max-width: 640px) {
  .crm-scope-chip { margin-left: 0; }
  .crm-owner-cell { min-width: 0; }
  .crm-owner-inline { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCOUNTS (PREVIEW) — corrections to the block above.
   Appended rather than edited in place: style.css has mixed CRLF/LF endings and
   several hundred duplicated selectors, so an in-place edit can silently hit
   the wrong copy or produce an 8,500-line diff. Later + equal specificity wins,
   which is exactly what these need.
   THE RULE THESE BROKE: a hand-typed hex can only ever be right on the ground
   the author happened to be reading on. --dark-3 is #1E1E2A by default and
   #FFFFFF under html.light-mode; --gold is #C9A84C by default and #F0493E
   (tomato) under it. A colour set without its light-mode companion is a bug
   that is invisible to whoever wrote it.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The scope pills are .filter-btn's recipe, so they take .filter-btn's fix.
   The active pill previously mixed `color: var(--gold)` (which flips to tomato)
   with gold LITERALS for its border and wash (which do not) — tomato text in a
   gold border on a gold ground, three hues, ~3.3:1. Tokens on both sides here,
   and the light-mode wash mirrors html.light-mode .filter-btn.active. */
.crm-scope-btn.is-active {
  color: var(--gold); border-color: var(--gold); background: rgba(201,168,76,0.10);
}
html.light-mode .crm-scope-btn.is-active { background: rgba(240,73,62,0.08); }

/* The unlinked chip is the only thing telling staff about unlinked logins, so
   it has to be legible on BOTH grounds. #E8912C is ~5.7:1 on --dark-3 and only
   ~2.3:1 on white; this darker orange is ~4.9:1 on the light wash. */
html.light-mode .crm-scope-chip {
  color: #A9560F; border-color: rgba(169,86,15,0.45); background: rgba(232,145,44,0.12);
}
html.light-mode .crm-scope-chip:hover { color: #A9560F; border-color: rgba(169,86,15,0.80); }

/* Accents that must track the theme rather than staying gold when everything
   else on the page turns tomato. */
.crm-attention td:first-child { border-left: 2px solid var(--gold); }
.crm-log-entry--system   { border-left-color: var(--text-muted); }
.crm-log-entry--decision { border-left-color: var(--gold); }

/* ── Buttons ────────────────────────────────────────────────────────────────
   There is NO `.btn` base class in this theme — the modifier carries
   everything, and .btn-primary alone omits `border: none; cursor: pointer`
   (that patch lives in `.ticket-form .btn-primary`). A submit control outside a
   .ticket-form therefore keeps the UA button border. .crm-btn is that patch,
   applied by class instead of by ancestor. */
.crm-btn {
  border: none; cursor: pointer; font-family: 'Jost', sans-serif;
  line-height: 1.4;
}
.crm-owner-save { padding: 7px 16px; font-size: 0.74rem; border-radius: 4px; }
.crm-scope-go   { padding: 6px 16px; font-size: 0.78rem; border-radius: 999px; }

/* ── The detail-view ownership form ─────────────────────────────────────────
   The form no longer carries .ticket-form (see template-portal-crm.php), which
   was forcing `flex-direction: column` onto a row and whose `.ticket-form
   select` rule (specificity 0,1,1) outranked .crm-owner-select (0,1,0) — so the
   same control rendered full-size with the theme's custom arrow here and
   compact with the native arrow in the list. It owns its layout now. */
.crm-owner-form {
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;
  gap: 10px; margin: 0; max-width: 720px;
}
.crm-owner-form label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gold); margin: 0;
}

/* ── Focus ──────────────────────────────────────────────────────────────────
   The append defined :hover everywhere and :focus nowhere, so these controls
   fell back to the UA ring while every comparable control in the theme lights
   up gold. Matches a.kba-chip:focus-visible and .ticket-form select:focus. */
.crm-scope-btn:focus-visible,
.crm-scope-chip:focus-visible { border-color: var(--gold); color: var(--gold); }
.crm-owner-select:focus,
.crm-scope-rep select:focus { outline: none; border-color: var(--gold); }
.crm-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── Table affordances ──────────────────────────────────────────────────────
   .deal-table paints `cursor: pointer` on every row and every header
   unconditionally, but theme.js only navigates rows carrying data-href and only
   sorts headers carrying data-sort. Same guard the theme already ships for
   .asset-table, scoped to .crm-table so no other console changes. */
.crm-table tbody tr:not([data-href]) { cursor: default; }
.crm-table th:not([data-sort]) { cursor: default; user-select: auto; }

/* ══════════════════════════════════════════════════════════════════════════
   KB SEARCH  (.kbs-*)  —  the combobox that replaced Heroic KB's live search

   New namespace, on purpose. The old .hkb-searchresults / .hkb-livesearch-results
   rules are GONE (removed above in the same change): they styled markup only the
   plugin emitted, and the replacement is a different component with a different
   interaction, not a re-skin.

   DARK IS THE DESIGN, and every rule below pairs a colour with an explicit
   background. This project has shipped light-on-light four times — KB callouts,
   KB code blocks, a gold-on-gold badge, a btn-ghost on a button — so there is no
   bare `color:` on a surface whose background is inherited from somewhere else.
   Every value is a token, and style.css redefines all of them under
   html.light-mode, so both themes are covered by one set of rules. The one place
   that needs saying out loud is <mark>: the browser default is BLACK ON YELLOW,
   which is the exact bug class again, so it is overridden explicitly below.
   ══════════════════════════════════════════════════════════════════════════ */

/* The KB body background used to be keyed on Heroic's own body classes
   (body.tax-ht_kb_category, body.ht-kb), both of which disappear with the
   plugin. onclave_kbs_body_class() emits `onclave-kb` on every KB route, so the
   dark ground survives deactivation. */
body.onclave-kb { background: var(--dark) !important; }

/* ── The combobox shell ── */
.kbs-search { position: relative; }
.kbs-search .kbs-form { display: flex; width: 100%; }
.kbs-input { flex: 1; min-width: 0; }

/* ── The panel ── */
.kbs-panel {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 180;
  max-height: min(62vh, 480px); overflow-y: auto;
  background: var(--dark-2);
  border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0,0,0,.5);
  padding: 6px; text-align: left;
}
html.light-mode .kbs-panel { box-shadow: 0 18px 44px rgba(0,0,0,.16); }

/* ── Group heading: Category > Section ──
   This is the whole point of the two-level tree — a reader sees WHERE an
   answer lives, not just that it exists. The left rule takes the category's
   palette colour when it has one (.kb-c-<key> sets --kbc-color), and falls back to
   the neutral border otherwise. */
.kbs-group + .kbs-group { margin-top: 4px; }
.kbs-group-head {
  display: block; padding: 9px 12px 6px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted); background: transparent;
  border-left: 2px solid var(--border); margin-left: 2px;
}
.kbs-group-head[class*="kb-c-"] {
  border-left-color: var(--kbc-color, var(--border));
  color: var(--kbc-color, var(--text-muted));
}

/* ── A result row ── */
.kbs-opt {
  display: block; padding: 10px 12px; border-radius: 7px;
  background: transparent; text-decoration: none;
}
.kbs-opt:hover,
.kbs-opt.is-active { background: var(--dark-3); }
.kbs-opt:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

.kbs-opt-title {
  display: block; color: var(--white); background: transparent;
  font-weight: 600; font-size: 0.92rem; line-height: 1.35; margin-bottom: 3px;
}
.kbs-opt:hover .kbs-opt-title,
.kbs-opt.is-active .kbs-opt-title { color: var(--gold); }

.kbs-opt-path {
  display: block; color: var(--text-muted); background: transparent;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; margin-bottom: 4px;
}
.kbs-opt-snip {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text-muted); background: transparent;
  font-size: 0.82rem; line-height: 1.5;
}

/* The matched run. The browser default for <mark> is black on yellow, which is
   unreadable on --dark-2 AND is the light-on-light bug in its purest form. It
   is overridden here with an explicit transparent background, so the row's own
   ground always shows through. */
.kbs-opt mark,
.kbs-results__link mark {
  background: transparent; color: var(--gold); font-weight: 700;
  padding: 0; border-radius: 0;
}

/* ── "See all results" ── */
.kbs-all {
  display: block; padding: 10px 12px; margin-top: 4px;
  border-top: 1px solid var(--border);
  color: var(--gold); background: transparent;
  font-size: 0.84rem; font-weight: 600; text-decoration: none;
}
.kbs-all:hover { color: var(--white); background: var(--dark-3); }

/* ── Loading: SKELETON ROWS, not a spinner ──
   The panel must not resize under the pointer while a reader is moving toward
   a row, so the loading state occupies the same space three results would. */
.kbs-skeleton { padding: 4px; }
.kbs-skel-row { padding: 10px 12px; }
.kbs-skel-bar {
  display: block; height: 9px; border-radius: 4px;
  background: var(--dark-3);
  animation: kbs-pulse 1.2s ease-in-out infinite;
}
.kbs-skel-bar--title { width: 62%; margin-bottom: 8px; }
.kbs-skel-bar--path  { width: 34%; height: 7px; }
@keyframes kbs-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) {
  .kbs-skel-bar { animation: none; }
}

/* ── Empty and error ── */
.kbs-msg { padding: 14px 12px; background: transparent; }
.kbs-msg-text {
  margin: 0 0 6px; color: var(--text); background: transparent;
  font-size: 0.9rem; line-height: 1.5;
}
.kbs-msg--error .kbs-msg-text { color: var(--tomato); }
.kbs-msg-link {
  color: var(--gold); background: transparent;
  font-size: 0.84rem; font-weight: 600; text-decoration: none;
}
.kbs-msg-link:hover { color: var(--white); }

/* ══════════════════════════════════════════════════════════════════════════
   KB SEARCH RESULTS PAGE (search.php)

   The no-JS path, and where Enter from the combobox lands. Same grouping, same
   ranking, same rows — it is exercised on every search rather than rotting as
   an untested fallback.
   ══════════════════════════════════════════════════════════════════════════ */
.kbs-results__head { margin-bottom: 28px; }
.kbs-results__group { margin: 0 0 34px; }
.kbs-results__group-head {
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted); background: transparent;
  margin: 0 0 12px; padding-left: 12px;
  border-left: 2px solid var(--border);
}
.kbs-results__group-head[class*="kb-c-"] {
  border-left-color: var(--kbc-color, var(--border));
  color: var(--kbc-color, var(--text-muted));
}
.kbs-results__list { list-style: none; margin: 0; padding: 0; }
.kbs-results__item { margin: 0 0 4px; padding: 0; }
.kbs-results__item::before { content: none; }
.kbs-results__link {
  display: block; padding: 14px 16px; border-radius: 8px;
  background: var(--dark-2); border: 1px solid transparent;
  text-decoration: none; transition: background 0.15s, border-color 0.15s;
}
.kbs-results__link:hover {
  background: var(--dark-3); border-color: var(--border);
}
.kbs-results__link .kbs-opt-title { font-size: 1rem; }
.kbs-results__link:hover .kbs-opt-title { color: var(--gold); }

.kbs-empty {
  color: var(--text-muted); background: transparent;
  font-size: 0.95rem; line-height: 1.7;
}
.kbs-empty a { color: var(--gold); text-decoration: none; }
.kbs-empty a:hover { color: var(--white); }

/* ══════════════════════════════════════════════════════════════════════════
   ARTICLE FOOTER — "More in this section"
   ══════════════════════════════════════════════════════════════════════════ */
.kbs-siblings {
  margin-top: 48px; padding-top: 26px;
  border-top: 1px solid var(--border);
}
.kbs-siblings__head {
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted); background: transparent;
  margin: 0 0 14px;
}
.kbs-siblings__head a { color: var(--gold); text-decoration: none; }
.kbs-siblings__head a:hover { color: var(--gold-light); }
.kbs-siblings__list { list-style: none; margin: 0; padding: 0; }
.kbs-siblings__list li { margin: 0 0 2px; padding: 0; }
.kbs-siblings__list li::before { content: none; }
.kbs-siblings__list a {
  display: block; padding: 9px 12px; border-radius: 6px;
  color: var(--text); background: transparent;
  font-size: 0.92rem; text-decoration: none;
}
.kbs-siblings__list a:hover { color: var(--gold); background: var(--dark-2); }

@media (max-width: 768px) {
  .kbs-panel { max-height: 52vh; }
  .kbs-results__link { padding: 12px 14px; }
}

/* ── KB term pages: the two lists Heroic's stylesheet used to reset ──────────
   `.hkb-articlelist` is Heroic's spelling, reused so the anchors keep the gold
   hover rules already in this file (2214-2219 / 6226-6231). Those rules style
   ANCHORS only — the list reset came from the plugin's own stylesheet, so the
   moment ht-knowledge-base is deactivated the UA default returns: a disc marker
   beside every article title and a 40px indent that pushes the whole list out
   of line with the `.hkb-categoryheader` above it, on all 13 term pages. The
   theme's own convention is the proof this is expected — the hyphenated sibling
   `.hkb-article-list` is reset at 1858, and so are `.kbs-siblings__list` (9503)
   and `.kbs-results__list` (9465).
   ───────────────────────────────────────────────────────────────────────── */
.hkb-articlelist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hkb-articlelist li::before { content: none; }

/* The category palette on a term page. taxonomy-onclave_kb_category.php resolves
   the colour token class (walking a SECTION up to its CATEGORY first) and prints
   it on the header, so a section page and the landing agree — but nothing
   consumed it, which made the class inert and the comment above it untrue. Same
   shape as `.kb-section-head[class*="kb-c-"]` at 8788. */
.hkb-categoryheader[class*="kb-c-"] {
  border-bottom-color: var(--kbc-color);
}