/**
 * TradLab AI Web — A10 high-fidelity slice
 * Shell + Simple Home + Professional Overview.
 */

html,
body {
  margin: 0;
  min-block-size: 100%;
  background: var(--tl-bg-canvas);
  color: var(--tl-text-primary);
}

body {
  font-family: var(--tl-font-fa);
}

.tl-ai-noscript {
  padding: var(--tl-space-8);
}

.tl-ai-shell-status {
  min-block-size: 1.75rem;
  display: inline-flex;
  align-items: center;
  gap: var(--tl-space-2);
  padding-inline: var(--tl-space-3);
  border: 1px solid var(--tl-warning-border);
  border-radius: var(--tl-radius-pill);
  background: var(--tl-warning-surface);
  color: var(--tl-status-warning);
  font-size: var(--tl-font-size-xs);
  font-weight: var(--tl-font-weight-semibold);
}

.tl-ai-page-kicker {
  inline-size: fit-content;
  display: inline-flex;
  align-items: center;
  gap: var(--tl-space-2);
  color: var(--tl-ai-intelligence);
  font-size: var(--tl-font-size-xs);
  font-weight: var(--tl-font-weight-bold);
  letter-spacing: 0.02em;
}

.tl-ai-page-title {
  margin: 0;
  color: var(--tl-text-primary);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: var(--tl-font-weight-heavy);
  line-height: var(--tl-line-height-tight);
}

.tl-ai-page-description {
  max-inline-size: 48rem;
  margin: 0;
  color: var(--tl-text-muted);
  font-size: var(--tl-font-size-sm);
  line-height: var(--tl-line-height-body);
}

.tl-ai-trust-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tl-space-3);
}

.tl-ai-trust-item {
  min-inline-size: 0;
  display: grid;
  gap: var(--tl-space-2);
  padding: var(--tl-space-4);
  border: 1px solid var(--tl-border-subtle);
  border-radius: var(--tl-radius-lg);
  background: var(--tl-bg-surface);
}

.tl-ai-trust-item__label {
  color: var(--tl-text-muted);
  font-size: var(--tl-font-size-xs);
}

.tl-ai-trust-item__value {
  display: flex;
  align-items: center;
  gap: var(--tl-space-2);
  color: var(--tl-text-primary);
  font-size: var(--tl-font-size-sm);
  font-weight: var(--tl-font-weight-semibold);
}

.tl-ai-attention {
  display: grid;
  gap: var(--tl-space-3);
  padding: var(--tl-space-5);
  border: 1px solid var(--tl-warning-border);
  border-radius: var(--tl-radius-lg);
  background: color-mix(in srgb, var(--tl-warning-surface) 72%, transparent);
}

.tl-ai-attention__title {
  margin: 0;
  font-size: var(--tl-font-size-base);
  font-weight: var(--tl-font-weight-bold);
}

.tl-ai-attention__body {
  margin: 0;
  color: var(--tl-text-secondary);
  font-size: var(--tl-font-size-sm);
  line-height: var(--tl-line-height-body);
}

.tl-ai-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tl-density-grid-gap);
}

.tl-ai-overview-card {
  min-inline-size: 0;
  min-block-size: 14rem;
  display: grid;
  align-content: start;
  gap: var(--tl-space-4);
  padding: var(--tl-density-card-padding);
  border: 1px solid var(--tl-border-subtle);
  border-radius: var(--tl-radius-lg);
  background: var(--tl-bg-surface);
}

.tl-ai-overview-card[data-emphasis="intelligence"] {
  border-color: var(--tl-ai-evidence-border);
  background: color-mix(in srgb, var(--tl-bg-surface) 97%, var(--tl-ai-intelligence));
}

.tl-ai-overview-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--tl-space-3);
}

.tl-ai-overview-card__title {
  margin: 0;
  color: var(--tl-text-primary);
  font-size: var(--tl-font-size-lg);
  font-weight: var(--tl-font-weight-bold);
}

.tl-ai-overview-card__body {
  color: var(--tl-text-secondary);
  font-size: var(--tl-font-size-sm);
  line-height: var(--tl-line-height-body);
}

.tl-ai-empty-lines {
  display: grid;
  gap: var(--tl-space-2);
}

.tl-ai-empty-line {
  block-size: 0.65rem;
  border-radius: var(--tl-radius-pill);
  background: var(--tl-bg-surface-raised);
}

.tl-ai-empty-line:nth-child(2) {
  inline-size: 78%;
}

.tl-ai-empty-line:nth-child(3) {
  inline-size: 58%;
}

.tl-ai-next-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tl-space-3);
}

.tl-ai-status-list {
  display: grid;
  gap: var(--tl-space-2);
}

.tl-ai-status-row {
  min-inline-size: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--tl-space-3);
  padding-block: var(--tl-space-3);
  border-block-end: 1px solid var(--tl-border-subtle);
}

.tl-ai-status-row:last-child {
  border-block-end: 0;
}

.tl-ai-status-row__label {
  color: var(--tl-text-secondary);
  font-size: var(--tl-font-size-sm);
}

.tl-ai-status-row__meta {
  color: var(--tl-text-muted);
  font-size: var(--tl-font-size-xs);
}

.tl-ai-migration-note {
  display: grid;
  gap: var(--tl-space-2);
  padding: var(--tl-space-4);
  border: 1px solid var(--tl-info-border);
  border-radius: var(--tl-radius-lg);
  background: var(--tl-info-surface);
}

.tl-ai-migration-note__title {
  margin: 0;
  color: var(--tl-text-primary);
  font-size: var(--tl-font-size-sm);
  font-weight: var(--tl-font-weight-bold);
}

.tl-ai-migration-note__body {
  margin: 0;
  color: var(--tl-text-secondary);
  font-size: var(--tl-font-size-xs);
  line-height: var(--tl-line-height-body);
}

.tl-ai-placeholder-page {
  inline-size: min(100%, 56rem);
}

.tl-ai-page-actions {
  display: flex;
  gap: var(--tl-space-2);
  flex-wrap: wrap;
}

@media (min-width: 721px) and (max-width: 1180px) {
  .tl-ai-trust-strip,
  .tl-ai-overview-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .tl-ai-trust-strip,
  .tl-ai-overview-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .tl-ai-next-actions,
  .tl-ai-page-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .tl-ai-next-actions .tl-button,
  .tl-ai-page-actions .tl-button {
    inline-size: 100%;
  }

  .tl-ai-status-row {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* A10 launch-route compositions */
.tl-ai-filter-bar,
.tl-ai-analysis-controls {
  min-inline-size: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--tl-density-grid-gap);
  padding: var(--tl-density-card-padding);
  border: 1px solid var(--tl-border-subtle);
  border-radius: var(--tl-radius-lg);
  background: var(--tl-bg-surface);
}

.tl-ai-metric-grid {
  min-inline-size: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: var(--tl-space-4);
}

.tl-ai-settings-row {
  min-inline-size: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tl-space-4);
  padding-block: var(--tl-space-4);
  border-block-end: 1px solid var(--tl-border-subtle);
}

.tl-ai-settings-row:last-child {
  border-block-end: 0;
}

@media (max-width: 720px) {
  .tl-ai-settings-row {
    align-items: stretch;
    flex-direction: column;
  }

  .tl-ai-settings-row .tl-button {
    inline-size: 100%;
  }
}


/* A11 authenticated/live product states */
.tl-ai-auth-screen {
  min-block-size: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--tl-space-6);
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--tl-ai-intelligence) 8%, transparent), transparent 36rem),
    var(--tl-bg-canvas);
}

.tl-ai-auth-card {
  inline-size: min(100%, 28rem);
  display: grid;
  gap: var(--tl-space-6);
  padding: clamp(var(--tl-space-5), 5vw, var(--tl-space-8));
  border: 1px solid var(--tl-ai-evidence-border);
  border-radius: var(--tl-radius-xl);
  background: var(--tl-bg-surface);
  box-shadow: var(--tl-shadow-md);
}

.tl-ai-auth-brand {
  display: flex;
  align-items: center;
  gap: var(--tl-space-3);
}

.tl-ai-auth-brand img {
  inline-size: 2.5rem;
  block-size: 2.5rem;
}

.tl-ai-auth-title {
  margin: 0;
  color: var(--tl-text-primary);
  font-size: var(--tl-font-size-2xl);
  font-weight: var(--tl-font-weight-bold);
}

.tl-ai-auth-description,
.tl-ai-auth-note {
  margin: var(--tl-space-2) 0 0;
  color: var(--tl-text-muted);
  font-size: var(--tl-font-size-sm);
  line-height: var(--tl-line-height-body);
}

.tl-ai-auth-note {
  font-size: var(--tl-font-size-xs);
}

.tl-ai-auth-form {
  display: grid;
  gap: var(--tl-space-4);
}

.tl-ai-auth-error {
  padding: var(--tl-space-3) var(--tl-space-4);
  border: 1px solid var(--tl-danger-border);
  border-radius: var(--tl-radius-md);
  background: var(--tl-danger-surface);
  color: var(--tl-text-primary);
  font-size: var(--tl-font-size-sm);
}

.tl-ai-filter-action {
  display: flex;
  align-items: end;
}

.tl-ai-market-list,
.tl-ai-strategy-list {
  min-inline-size: 0;
  display: grid;
  gap: var(--tl-space-3);
}

.tl-ai-market-row {
  min-inline-size: 0;
  display: grid;
  grid-template-columns: minmax(10rem, 1.35fr) auto minmax(6rem, 0.55fr) minmax(12rem, 1fr) auto;
  align-items: center;
  gap: var(--tl-space-4);
  padding: var(--tl-space-4);
  border: 1px solid var(--tl-border-subtle);
  border-radius: var(--tl-radius-lg);
  background: var(--tl-bg-surface);
}

.tl-ai-market-row__identity {
  min-inline-size: 0;
  display: grid;
  gap: var(--tl-space-1);
}

.tl-ai-market-row__identity > span,
.tl-ai-market-row__meta {
  min-inline-size: 0;
  color: var(--tl-text-muted);
  font-size: var(--tl-font-size-xs);
  overflow-wrap: anywhere;
}

@media (max-width: 1000px) {
  .tl-ai-market-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .tl-ai-market-row__meta,
  .tl-ai-market-row > .tl-ai-number {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .tl-ai-auth-screen {
    padding: var(--tl-space-4);
  }

  .tl-ai-filter-action {
    align-items: stretch;
  }

  .tl-ai-filter-action .tl-button {
    inline-size: 100%;
  }

  .tl-ai-market-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .tl-ai-market-row__meta,
  .tl-ai-market-row > .tl-ai-number {
    grid-column: auto;
  }

  .tl-ai-market-row .tl-button {
    inline-size: 100%;
  }
}