/* TOGOPEPTIDE — onboarding-cluster styles (cluster 37).
 *
 * Scoped styling for:
 *   - Onboarding pages (research-frame-guide, peptide-research-101, first-coa-guide)
 *   - togo-error-helper.js inline validation messages
 *   - Profile-completeness 100%-complete badge (extends cluster 06 meter)
 *
 * Token-driven; falls back gracefully if a token is missing.
 */

/* ─────────────────────────────────────────────────────────────────────────
 * Onboarding-page layouts
 * ──────────────────────────────────────────────────────────────────────── */

.onb-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4, 1rem);
}
@media (min-width: 720px) {
  .onb-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5, 1.5rem);
  }
}

.onb-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border, rgba(255,255,255,0.10));
  border-radius: var(--radius-md, 12px);
  background: var(--color-surface, rgba(255,255,255,0.03));
}

.onb-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 540px;
  color: var(--color-text, #ececef);
}
.onb-table thead th {
  text-align: left;
  padding: var(--space-3, .75rem) var(--space-4, 1rem);
  background: var(--color-bg-elevated, rgba(255,255,255,0.04));
  border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.10));
  color: var(--color-text, #ececef);
  font-weight: 600;
  font-size: .9375rem;
}
.onb-table tbody td {
  padding: var(--space-3, .75rem) var(--space-4, 1rem);
  vertical-align: top;
  border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.08));
  color: var(--color-text, #ececef);
  font-size: .9375rem;
  line-height: 1.55;
}
.onb-table tbody tr:last-child td {
  border-bottom: 0;
}
.onb-table tbody tr td:first-child {
  color: var(--color-text-muted, #9ea0a8);
  font-style: italic;
}
.onb-table tbody tr td:last-child {
  color: var(--color-text, #ececef);
}

@media (max-width: 640px) {
  body[data-page="research-frame-guide"] .onb-table-wrap {
    overflow-x: visible;
    border-radius: var(--radius-md, 12px);
  }

  body[data-page="research-frame-guide"] .onb-table,
  body[data-page="research-frame-guide"] .onb-table thead,
  body[data-page="research-frame-guide"] .onb-table tbody,
  body[data-page="research-frame-guide"] .onb-table tr,
  body[data-page="research-frame-guide"] .onb-table th,
  body[data-page="research-frame-guide"] .onb-table td {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  body[data-page="research-frame-guide"] .onb-table {
    border-collapse: separate;
    border-spacing: 0;
  }

  body[data-page="research-frame-guide"] .onb-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  body[data-page="research-frame-guide"] .onb-table tbody {
    display: grid;
    gap: 10px;
    padding: 10px;
  }

  body[data-page="research-frame-guide"] .onb-table tbody tr {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--color-border) 78%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-surface-raised) 58%, transparent);
  }

  body[data-page="research-frame-guide"] .onb-table tbody td {
    padding: 11px 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 68%, transparent);
    font-size: 0.9rem;
    line-height: 1.45;
  }

  body[data-page="research-frame-guide"] .onb-table tbody td:last-child {
    border-bottom: 0;
  }

  body[data-page="research-frame-guide"] .onb-table tbody td::before {
    display: block;
    margin-bottom: 5px;
    color: var(--color-text-muted, #9ea0a8);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
  }

  body[data-page="research-frame-guide"] .onb-table tbody td:first-child::before {
    content: "Avoid";
  }

  body[data-page="research-frame-guide"] .onb-table tbody td:last-child::before {
    content: "Use";
    color: var(--color-accent, #e01b1b);
  }
}

.onb-rules ol {
  list-style: decimal;
  padding-inline-start: 1.5rem;
  display: grid;
  gap: var(--space-3, .75rem);
  max-width: 64ch;
}
.onb-rules ol li {
  line-height: 1.6;
}
.onb-rules ol li strong {
  color: var(--color-text, #ececef);
}

/* On-page table-of-contents (peptide-research-101) */
.onb-toc {
  margin-top: var(--space-5, 1.5rem);
  padding: var(--space-4, 1rem) var(--space-5, 1.5rem);
  background: var(--color-bg-elevated, rgba(255,255,255,0.04));
  border: 1px solid var(--color-border, rgba(255,255,255,0.10));
  border-radius: var(--radius-md, 12px);
  max-width: 32rem;
}
.onb-toc__title {
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  color: var(--color-text-muted, #9ea0a8);
  margin: 0 0 var(--space-2, .5rem);
}
.onb-toc ol {
  margin: 0;
  padding-inline-start: 1.25rem;
  display: grid;
  gap: var(--space-1, .25rem);
}
.onb-toc a {
  text-decoration: none;
  color: var(--color-text, #ececef);
}
.onb-toc a:hover,
.onb-toc a:focus-visible {
  text-decoration: underline;
}

/* Glossary-style two-column dt/dd grid (peptide-research-101) */
.onb-glossary-grid dl {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: var(--space-2, .5rem) var(--space-4, 1rem);
  align-items: baseline;
  margin: 0;
}
.onb-glossary-grid dt {
  font-weight: 600;
  color: var(--color-text, #ececef);
}
.onb-glossary-grid dd {
  margin: 0;
  color: var(--color-text-muted, #9ea0a8);
  line-height: 1.55;
}
@media (max-width: 600px) {
  .onb-glossary-grid dl {
    grid-template-columns: 1fr;
    gap: var(--space-1, .25rem) 0;
  }
  .onb-glossary-grid dt {
    margin-top: var(--space-3, .75rem);
  }
}

/* COA sample card (first-coa-guide) */
.onb-coa {
  max-width: 36rem;
  margin: 0 auto;
  background: var(--color-surface, rgba(255,255,255,0.03));
  border: 1px solid var(--color-border, rgba(255,255,255,0.10));
  border-radius: var(--radius-md, 12px);
  padding: var(--space-5, 1.5rem);
  font-family: var(--font-mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
  font-size: .9375rem;
}
.onb-coa__head {
  text-align: center;
  margin-bottom: var(--space-4, 1rem);
  padding-bottom: var(--space-4, 1rem);
  border-bottom: 1px dashed var(--color-border, rgba(255,255,255,0.14));
}
.onb-coa__lab {
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-muted, #9ea0a8);
  margin: 0 0 var(--space-1, .25rem);
}
.onb-coa__title {
  margin: 0 0 var(--space-1, .25rem);
  font-size: 1.125rem;
  letter-spacing: .02em;
}
.onb-coa__doc {
  margin: 0;
  font-size: .8125rem;
  color: var(--color-text-muted, #9ea0a8);
}
.onb-coa__fields {
  display: grid;
  gap: var(--space-2, .5rem);
  margin: 0;
}
.onb-coa__row {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: var(--space-3, .75rem);
  padding: var(--space-1, .25rem) 0;
  border-bottom: 1px dotted var(--color-border, rgba(255,255,255,0.06));
}
.onb-coa__row:last-child {
  border-bottom: 0;
}
.onb-coa__row dt {
  color: var(--color-text-muted, #9ea0a8);
  font-weight: normal;
}
.onb-coa__row dd {
  margin: 0;
  color: var(--color-text, #ececef);
  font-weight: 600;
}
@media (max-width: 600px) {
  .onb-coa__row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .onb-coa__row dt {
    font-size: .8125rem;
  }
}

.onb-coa-explain {
  display: grid;
  gap: var(--space-3, .75rem);
  max-width: 48rem;
}

/* ─────────────────────────────────────────────────────────────────────────
 * togo-error-helper.js inline validation messages
 * ──────────────────────────────────────────────────────────────────────── */

.togo-err-helper {
  margin: var(--space-2, .5rem) 0 var(--space-3, .75rem);
  padding: var(--space-2, .5rem) var(--space-3, .75rem);
  background: var(--color-danger-soft, rgba(224, 27, 27, 0.10));
  border-left: 3px solid var(--color-danger, #e01b1b);
  border-radius: var(--radius-sm, 6px);
  font-size: .875rem;
  line-height: 1.5;
  color: var(--color-text, #ececef);
  display: grid;
  gap: var(--space-1, .25rem);
}
.togo-err-helper__why {
  font-weight: 600;
  color: var(--color-danger-on-weak, #ff7a7a);
}
.togo-err-helper__fix {
  color: var(--color-text-muted, #9ea0a8);
}
.togo-err-active {
  border-color: var(--color-danger, #e01b1b) !important;
  outline: none;
}
.togo-err-active:focus-visible {
  outline: 2px solid var(--color-danger, #e01b1b);
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Profile-completeness 100% badge (extends cluster 06 meter)
 *
 * Cluster 06 emits #acct-completeness with a [data-tier] attribute and
 * a <span data-cmpl-pct>NN</span> showing the percentage. To gate the
 * badge at exact 100% we use :has() against the percent text container
 * being exactly "100" — supported in all evergreen browsers (2024+).
 *
 * The element targeted is .acct-completeness__head — small inline pill
 * with an SVG checkmark + "100% complete" label. Appears only at 100%.
 * If :has() is unsupported (very old browsers), the badge silently does
 * not render — no broken layout, the meter stays as-is.
 *
 * Note: the cluster-06 meter assigns [data-tier="full"] at >=90%, so we
 * cannot rely on [data-tier] alone. We rely on the :has() text match.
 * ──────────────────────────────────────────────────────────────────────── */

.acct-completeness:has([data-cmpl-pct]) .acct-completeness__head {
  position: relative;
}

/* The trick: data-cmpl-pct contains "0".."100" as text. We cannot match
 * arbitrary text in CSS, so we leverage :has() with an attribute-equals
 * match on the parent: when the JS later mirrors the value to a data
 * attribute, this rule will fire. Until then the rule is a no-op.
 *
 * This is a forward-compatible hook — if cluster-06 sets
 * [data-cmpl-state="full"] at exact 100% (a one-line addition), this
 * badge starts rendering. No layout breakage when the hook is absent. */
.acct-completeness[data-cmpl-state="full"] .acct-completeness__head::after {
  content: "100% complete";
  display: inline-flex;
  align-items: center;
  margin-inline-start: var(--space-2, .5rem);
  padding: 2px 10px 2px 24px;
  border-radius: 999px;
  background-color: var(--success-weak, rgba(16, 185, 129, .12));
  color: var(--success-on-weak, #059669);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  vertical-align: middle;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-position: 6px center;
}

/* Animation: subtle fade-in when the badge appears. Respects reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .acct-completeness[data-cmpl-state="full"] .acct-completeness__head::after {
    animation: togoOnbBadgeIn 320ms ease-out both;
  }
  @keyframes togoOnbBadgeIn {
    from { opacity: 0; transform: translateY(-2px) scale(.96); }
    to   { opacity: 1; transform: none; }
  }
}