/*
 * YOGA intentionally inherits BestYouTubeViews' live theme.
 * This file controls only layout and component behaviour.
 * No custom font family, palette, gradients, shadows or rounded corners.
 */
.yoga-app {
  width: 100%;
  margin: 1.5em 0 2.5em;
  color: inherit;
  font-family: inherit;
  line-height: inherit;
}

.yoga-app *,
.yoga-app *::before,
.yoga-app *::after {
  box-sizing: border-box;
}

.yoga-app [hidden] {
  display: none !important;
}

.yoga-shell {
  width: 100%;
  margin: 0;
  padding: 0;
}

.yoga-intro {
  margin: 0 0 1.5em;
  padding: 0;
}

.yoga-kicker {
  margin: 0 0 .35em;
  padding: 0;
  font-size: .8em;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.yoga-intro-title {
  margin: 0 0 .35em;
  font-size: 1.35em;
  line-height: 1.3;
}

.yoga-intro > p:last-child {
  margin-bottom: 0;
}

.yoga-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 1.5em;
  border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}

.yoga-mode {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: flex-start;
  gap: .7em;
  width: 100%;
  margin: 0;
  padding: .9em 1em;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.yoga-mode:hover,
.yoga-mode:focus {
  background: transparent;
  box-shadow: none;
  color: inherit;
}

.yoga-mode:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

.yoga-mode.is-active {
  border-bottom-color: currentColor;
  font-weight: 700;
}

.yoga-mode-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-weight: 700;
  line-height: 1.4;
}

.yoga-mode strong,
.yoga-mode small {
  display: block;
}

.yoga-mode strong {
  margin-bottom: .2em;
}

.yoga-mode small {
  font-size: .83em;
  font-weight: 400;
  opacity: .72;
  line-height: 1.4;
}

.yoga-panel,
.yoga-status,
.yoga-error,
.yoga-results {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.yoga-panel {
  margin-bottom: 1.5em;
  padding: 1.25em 0;
  border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.yoga-input-panel label {
  display: block;
  margin-bottom: .45em;
  color: inherit;
  font: inherit;
  font-weight: 700;
}

.yoga-url-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .65em;
  align-items: stretch;
}

.yoga-url-row input,
.yoga-unlock-row input {
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: .65em .8em;
  border-radius: 0 !important;
  box-shadow: none !important;
  font: inherit;
}

.yoga-url-row input:focus,
.yoga-unlock-row input:focus {
  box-shadow: none !important;
}

.yoga-primary-button,
.yoga-secondary-button,
.yoga-export-button {
  min-height: 46px;
  margin: 0;
  padding: .65em 1em;
  border-radius: 0 !important;
  box-shadow: none !important;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.yoga-primary-button:hover,
.yoga-primary-button:focus,
.yoga-secondary-button:hover,
.yoga-secondary-button:focus,
.yoga-export-button:hover,
.yoga-export-button:focus {
  transform: none;
  box-shadow: none !important;
}

.yoga-primary-button:disabled {
  cursor: wait;
  opacity: .55;
}

.yoga-help,
.yoga-disclaimer {
  margin: .6em 0 0;
  font-size: .83em;
  opacity: .72;
}

.yoga-coming-soon {
  display: flex;
  align-items: flex-start;
  gap: .8em;
}

.yoga-coming-soon > span {
  display: inline-block;
  width: auto;
  height: auto;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  line-height: 1.4;
}

.yoga-coming-soon h2,
.yoga-coming-soon p {
  margin-top: 0;
}

.yoga-coming-soon h2 {
  margin-bottom: .35em;
}

.yoga-coming-soon p {
  margin-bottom: 0;
}

.yoga-status,
.yoga-error {
  margin-top: 1em;
  padding: 1em 0 1em 1em;
  border: 0;
  border-left: 4px solid currentColor;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.yoga-status {
  display: flex;
  align-items: center;
  gap: .8em;
}

.yoga-status strong,
.yoga-status span {
  display: block;
}

.yoga-status span {
  font-size: .83em;
  opacity: .72;
}

.yoga-spinner {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border: 2px solid color-mix(in srgb, currentColor 20%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: yoga-spin .8s linear infinite;
}

@keyframes yoga-spin {
  to { transform: rotate(360deg); }
}

.yoga-error {
  font-weight: 700;
}

.yoga-results {
  margin-top: 1.5em;
}

.yoga-result-card {
  margin: 0;
  padding: 1.5em 0;
  border: 0;
  border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.yoga-result-card:last-child {
  border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}

.yoga-video-head {
  display: grid;
  grid-template-columns: minmax(160px, 30%) minmax(0, 1fr);
  gap: 1.25em;
  align-items: start;
}

.yoga-video-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.yoga-video-meta h2 {
  margin-top: 0;
  margin-bottom: .3em;
  color: inherit;
  line-height: 1.25;
}

.yoga-video-meta > p {
  margin-top: 0;
  opacity: .72;
}

.yoga-stat-row,
.yoga-check-grid,
.yoga-strength-grid,
.yoga-metric-grid {
  display: grid;
  gap: 0;
  margin-top: 1em;
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-left: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.yoga-stat-row,
.yoga-check-grid,
.yoga-metric-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.yoga-stat,
.yoga-check,
.yoga-strength,
.yoga-metric {
  min-width: 0;
  margin: 0;
  padding: .9em;
  border: 0;
  border-right: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.yoga-stat span,
.yoga-check span,
.yoga-metric span {
  display: block;
  margin-bottom: .25em;
  font-size: .78em;
  opacity: .68;
}

.yoga-stat strong,
.yoga-check strong,
.yoga-metric strong {
  display: block;
  color: inherit;
  overflow-wrap: anywhere;
}

.yoga-check.is-good,
.yoga-check.is-attention {
  background: transparent;
  border-radius: 0;
}

.yoga-check.is-good::before,
.yoga-check.is-attention::before {
  display: block;
  margin-bottom: .25em;
  font-size: .8em;
  font-weight: 700;
}

.yoga-check.is-good::before {
  content: "OK";
}

.yoga-check.is-attention::before {
  content: "CHECK";
}

.yoga-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  margin-bottom: 1em;
}

.yoga-section-title h2,
.yoga-section-title p {
  margin-top: 0;
}

.yoga-section-title h2 {
  margin-bottom: 0;
  color: inherit;
}

.yoga-section-title p {
  margin-bottom: 0;
  font-size: .83em;
  opacity: .7;
  text-align: right;
}

.yoga-strength h3 {
  margin-top: 0;
  margin-bottom: .35em;
}

.yoga-strength p {
  margin-bottom: 0;
  font-size: .9em;
  line-height: 1.5;
  opacity: .78;
}

.yoga-opportunity-preview {
  position: relative;
  overflow: visible;
}

.yoga-opportunity-preview::after {
  content: none;
}

.yoga-action-preview,
.yoga-action {
  margin: 0;
  padding: 1em 0;
  border: 0;
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.yoga-action:last-child {
  border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.yoga-action + .yoga-action {
  margin-top: 0;
}

.yoga-action h3,
.yoga-action-preview h3 {
  margin: .35em 0;
}

.yoga-action p,
.yoga-action-preview p {
  margin: 0 0 .7em;
  opacity: .78;
  line-height: 1.5;
}

.yoga-action-instruction {
  margin-top: .6em;
  padding: .8em;
  border-left: 4px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: .9em;
  font-weight: 600;
}

.yoga-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .45em;
  margin-bottom: .4em;
}

.yoga-badge,
.yoga-country,
.yoga-term {
  display: inline-block;
  margin: 0;
  padding: .25em .45em;
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: .75em;
  font-weight: 600;
  line-height: 1.3;
}

.yoga-badge.is-priority {
  border-width: 2px;
}

.yoga-gate {
  text-align: left;
  padding: 1.5em 0;
  border-color: color-mix(in srgb, currentColor 30%, transparent);
  background: transparent;
}

.yoga-gate-icon {
  display: none;
}

.yoga-gate h2 {
  margin-top: 0;
  margin-bottom: .4em;
}

.yoga-gate > p {
  max-width: none;
  margin: 0 0 1em;
  opacity: .78;
}

.yoga-unlock-form {
  width: 100%;
  max-width: none;
  margin: 0;
}

.yoga-unlock-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .65em;
}

.yoga-consent {
  display: flex;
  align-items: flex-start;
  gap: .5em;
  margin-top: .8em;
  font-size: .82em;
  opacity: .78;
}

.yoga-consent input {
  margin-top: .2em;
}

.yoga-export-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1em;
}

.yoga-export-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .5em;
}

.yoga-professional-cta {
  color: inherit;
  background: transparent;
  border: 0;
  border-top: 3px solid currentColor;
}

.yoga-professional-cta h2,
.yoga-professional-cta p {
  color: inherit;
}

.yoga-professional-cta p {
  opacity: .78;
}

.yoga-professional-cta a {
  display: inline-block;
  margin-top: .4em;
}

.yoga-country-list,
.yoga-term-list {
  display: flex;
  flex-wrap: wrap;
  gap: .4em;
  margin-top: .8em;
}

@media (max-width: 760px) {
  .yoga-mode-grid,
  .yoga-check-grid,
  .yoga-metric-grid,
  .yoga-strength-grid,
  .yoga-stat-row {
    grid-template-columns: 1fr;
  }

  .yoga-video-head {
    grid-template-columns: 1fr;
  }

  .yoga-video-thumb {
    max-width: 100%;
  }

  .yoga-url-row,
  .yoga-unlock-row {
    grid-template-columns: 1fr;
  }

  .yoga-primary-button {
    width: 100%;
  }

  .yoga-section-title,
  .yoga-export-bar {
    display: block;
  }

  .yoga-section-title p {
    margin-top: .35em;
    text-align: left;
  }

  .yoga-mode {
    padding-left: .4em;
    padding-right: .4em;
  }
}

/* BestYouTubeViews live-theme alignment, v0.1.2.
 * The site's current primary red is #cb3133. Typography continues to be inherited.
 */
.yoga-app {
  --yoga-best-red: #cb3133;
  --yoga-content-text: #292929;
  --yoga-muted-text: #666666;
}

.yoga-kicker {
  color: var(--yoga-best-red);
}

/* WordPress themes commonly apply a white button label globally. These selectors
 * deliberately neutralize that rule only for the two flat mode controls. */
.yoga-mode,
.yoga-mode:visited {
  padding: .85em 0;
  color: var(--yoga-content-text) !important;
  background: transparent !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-left: 0 !important;
  border-bottom: 3px solid transparent !important;
  text-shadow: none !important;
}

.yoga-mode + .yoga-mode {
  padding-left: 1.25em;
}

.yoga-mode:hover,
.yoga-mode:focus,
.yoga-mode:active {
  color: var(--yoga-best-red) !important;
  background: transparent !important;
}

.yoga-mode.is-active {
  color: var(--yoga-best-red) !important;
  border-bottom-color: var(--yoga-best-red) !important;
}

.yoga-mode strong {
  color: inherit !important;
}

.yoga-mode small {
  color: var(--yoga-muted-text) !important;
  opacity: 1;
}

.yoga-mode-grid {
  border-bottom-color: #cccccc;
}

@media (max-width: 760px) {
  .yoga-mode + .yoga-mode {
    padding-left: 0;
  }
}