/* =============================================================================
   Pepvela Shop V3 -- Research (research.html, /research), CEO direction
   2026-10-01 (approved mockup): a compact research reference. Five text-only
   research areas, the compound identity table, two reading links. Navy
   foundation, glass panels, compact technical type, the locked palette.
   No vials, prices, documentation or Vela Stack content on this page.
   ============================================================================= */

/* ---- hero: the neural scene, softly ---- */
.v3-research-hero .v3-scene { opacity: 0.7; }

.v3-rsec { padding: 72px 0; }
.v3-rsec--last { padding-bottom: 96px; }

/* ---- research areas: compact, as tall as their content ---- */
.v3-rareas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: start; }
.v3-rarea {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 16px 16px;
  border-radius: var(--v3-radius-card);
  background: var(--v3-glass-card);
  border: 1px solid var(--v3-card-line);
  transition: border-color 400ms var(--v3-ease-out);
}
.v3-rarea:hover { border-color: var(--v3-card-line-hover); }
.v3-rarea-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.v3-rarea h3 { font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--v3-on-dark); }
.v3-rarea-count { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v3-on-dark-soft); white-space: nowrap; }
.v3-rarea-line { font-size: 12.5px; line-height: 19px; color: var(--v3-on-dark-muted); }
.v3-rarea-names { font-size: 12px; line-height: 18px; color: var(--pv-lavender); }
.v3-rarea-go { margin-top: 4px; }

/* ---- identity reference: area filter and table ---- */
.v3-rfilters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.v3-rfilters button {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--v3-line-dark-strong);
  background: rgba(8, 3, 39, 0.5);
  color: var(--v3-on-dark-muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 300ms var(--v3-ease-out), border-color 300ms var(--v3-ease-out), color 300ms var(--v3-ease-out);
}
.v3-rfilters button:hover { color: var(--v3-on-dark); border-color: rgba(155, 154, 240, 0.45); }
.v3-rfilters button[aria-pressed="true"] { background: rgba(89, 52, 207, 0.32); border-color: rgba(155, 154, 240, 0.5); color: var(--v3-on-dark); }
.v3-rfilters button:focus-visible { outline: 2px solid var(--v3-focus); outline-offset: 2px; }
.v3-rtable-wrap { border-radius: var(--v3-radius-card); border: 1px solid var(--v3-card-line); background: var(--v3-glass-card); overflow: hidden; }
.v3-rtable { width: 100%; border-collapse: collapse; table-layout: fixed; }
.v3-rtable col, .v3-rtable th, .v3-rtable td { text-align: left; vertical-align: middle; }
.v3-rtable thead th {
  padding: 14px 18px 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v3-on-dark-soft);
}
.v3-rtable thead th:nth-child(1) { width: 17%; }
.v3-rtable thead th:nth-child(2) { width: 19%; }
.v3-rtable thead th:nth-child(3) { width: 12%; }
.v3-rtable thead th:nth-child(4) { width: 13%; }
.v3-rtable thead th:nth-child(5) { width: 12%; }
.v3-rtable tbody th, .v3-rtable tbody td { padding: 13px 18px; border-top: 1px solid var(--v3-line-dark); font-weight: 400; }
.v3-rtable tbody tr[hidden] { display: none; }
.v3-rname { display: block; font-size: 14.5px; font-weight: 600; color: var(--v3-on-dark); }
.v3-rstrengths { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.v3-rstrengths a { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pv-periwinkle); text-decoration: none; }
.v3-rstrengths a:hover { color: var(--v3-on-dark); }
.v3-rformula { font-size: 13.5px; color: var(--v3-on-dark); font-variant-numeric: tabular-nums; }
.v3-rformula sub { font-size: 0.72em; line-height: 0; }
.v3-rblend { font-size: 13px; color: var(--v3-on-dark-muted); }
.v3-rnum { font-size: 12.5px; color: var(--v3-on-dark-muted); font-variant-numeric: tabular-nums; }
.v3-rnone { color: var(--v3-on-dark-soft); }
.v3-rarea-tag { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pv-lavender); }
.v3-rrole { font-size: 13px; line-height: 19px; color: var(--v3-on-dark-muted); }

/* ---- further reading ---- */
.v3-rreading { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.v3-rread {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border-radius: var(--v3-radius-card);
  border: 1px solid var(--v3-card-line);
  background: var(--v3-glass-card);
  text-decoration: none;
  transition: border-color 400ms var(--v3-ease-out);
}
.v3-rread:hover { border-color: var(--v3-card-line-hover); }
.v3-rread h3 { font-size: 16px; font-weight: 600; color: var(--v3-on-dark); }
.v3-rread p { font-size: 13px; line-height: 20px; color: var(--v3-on-dark-muted); }

/* ---- responsive ---- */
@media (max-width: 1100px) {
  .v3-rareas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .v3-rareas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v3-rreading { grid-template-columns: minmax(0, 1fr); }
  /* the table becomes one labelled card per compound */
  .v3-rtable, .v3-rtable tbody, .v3-rtable tr, .v3-rtable th, .v3-rtable td { display: block; width: auto; }
  .v3-rtable thead { display: none; }
  .v3-rtable tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 16px; border-top: 1px solid var(--v3-line-dark); }
  .v3-rtable tbody tr:first-child { border-top: 0; }
  .v3-rtable tbody th, .v3-rtable tbody td { padding: 0; border: 0; }
  .v3-rtable tbody th, .v3-rtable .v3-rrole { grid-column: 1 / -1; }
  .v3-rtable tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--v3-on-dark-soft);
  }
  .v3-rtable .v3-rrole::before { display: none; }
}
@media (max-width: 600px) {
  .v3-rareas { grid-template-columns: minmax(0, 1fr); }
  .v3-rsec { padding: 56px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .v3-rarea, .v3-rread, .v3-rfilters button { transition: none; }
}