/*
 * Veyns ID page styles on top of Veyns UI (/ui/veyns-ui.css, kept unmodified).
 * Only `vid-` classes and a few scoped hooks live here. The rules are unlayered,
 * so they win over the Veyns UI layers; keep them specific. Colours come from
 * Veyns UI tokens only, so light and dark themes both work.
 */

/* ---------- Shared bits ---------- */

.vid-lede {
  margin-bottom: var(--vx-space-3);
  color: var(--vx-ink-2);
  max-width: 72ch;
}

.vid-note {
  color: var(--vx-ink-2);
  font-size: var(--vx-text-sm);
}

.vid-note:empty,
.vid-error:empty {
  display: none;
}

.vid-error {
  color: var(--vx-danger);
  font-size: var(--vx-text-sm);
  font-weight: 550;
  overflow-wrap: anywhere;
}

.vid-page-error {
  margin-bottom: var(--vx-space-4);
}

.vid-stack {
  display: grid;
  gap: var(--vx-space-3);
}

.vid-stack > * {
  min-width: 0;
}

.vid-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vx-space-2);
}

.vid-alert-gap {
  margin-bottom: var(--vx-space-3);
}

/* A code the person reads or types on another device */
.vid-code {
  padding: var(--vx-space-3) var(--vx-space-4);
  border: 1px solid var(--vx-line);
  border-radius: var(--vx-radius-box);
  background: var(--vx-sunk);
  color: var(--vx-ink);
  font-family: var(--vx-mono);
  font-size: var(--vx-text-xl);
  letter-spacing: 0.06em;
  text-align: center;
  overflow-wrap: anywhere;
  user-select: all;
}

.vid-code:empty {
  display: none;
}

/* Disclosure (Veyns UI has no details/summary style yet) */
.vid-disclosure {
  margin-top: var(--vx-space-3);
}

.vid-disclosure > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--vx-space-2);
  min-height: 32px;
  color: var(--vx-ink-2);
  font-size: var(--vx-text-sm);
  font-weight: 550;
  cursor: pointer;
  list-style: none;
}

.vid-disclosure > summary::-webkit-details-marker {
  display: none;
}

.vid-disclosure > summary::before {
  content: "";
  width: 6px;
  height: 6px;
  border-inline-end: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  rotate: -45deg;
  transition: rotate var(--vx-dur) var(--vx-ease);
}

.vid-disclosure[open] > summary::before {
  rotate: 45deg;
}

.vid-disclosure > summary:hover {
  color: var(--vx-ink);
}

.vid-disclosure[open] > summary {
  margin-bottom: var(--vx-space-2);
}

.vid-disclosure > :not(summary) + :not(summary) {
  margin-top: var(--vx-space-3);
}

/* Request details: rows of <div><dt><dd></div> built by request-review.js */
.vid-details {
  display: grid;
  margin: 0;
}

.vid-details > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: var(--vx-space-3);
  padding: 8px 0;
  border-top: 1px solid var(--vx-line-soft);
}

.vid-details dt {
  color: var(--vx-ink-2);
  font-size: var(--vx-text-sm);
  overflow-wrap: anywhere;
}

.vid-details dd {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.vid-request {
  display: grid;
  gap: var(--vx-space-2);
  padding: var(--vx-space-3) var(--vx-space-4);
}

.vid-request > strong {
  overflow-wrap: anywhere;
}

/* Live status of a request or setup step */
.vid-status {
  padding: var(--vx-space-3) var(--vx-space-4);
  border-radius: var(--vx-radius-box);
  background: var(--vx-info-bg);
  color: var(--vx-info-ink);
  font-weight: 550;
  overflow-wrap: anywhere;
}

.vid-status:empty {
  display: none;
}

/* QR codes stay black on white in both themes */
.vid-qr {
  justify-self: center;
  width: min(100%, 280px);
  margin-inline: auto;
  padding: var(--vx-space-2);
  border: 1px solid var(--vx-line);
  border-radius: var(--vx-radius-box);
  background: #fff;
}

.vid-qr > svg {
  margin: 0 auto !important;
}

.vx-box.vid-rows:empty {
  display: none;
}

/* ---------- Standalone cards: authorize, approve, palm, sign-in ---------- */

.vid-card .vx-card__head {
  gap: var(--vx-space-3);
}

.vid-card .vx-card__body > section,
.vid-card .vx-card__body > form {
  display: grid;
  gap: var(--vx-space-3);
  min-width: 0;
}

.vid-card h1 {
  font-size: var(--vx-text-3xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.vid-card p {
  overflow-wrap: anywhere;
}

.vid-kind {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--vx-ink-2);
  font-size: var(--vx-text-sm);
}

.vid-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vx-space-2);
  color: var(--vx-ink-2);
  font-size: var(--vx-text-sm);
}

.vid-meta > span:empty {
  display: none;
}

/* Decision buttons: at least 48 x 48 px, side by side, even at 320 px */
.vid-decision {
  display: flex;
  gap: var(--vx-space-3);
}

.vid-decision > .vx-btn {
  flex: 1 1 0;
  min-width: 48px;
  height: auto;
  min-height: 48px;
  white-space: normal;
}

.vid-card .vx-card__foot {
  align-items: center;
}

.vid-card .vx-card__foot .vid-disclosure {
  margin: 0 0 0 auto;
}

.vid-card .vx-card__foot .vid-disclosure > summary {
  min-height: 24px;
}

.vid-card .vx-card__foot .vid-disclosure[open] > summary {
  margin-bottom: var(--vx-space-1);
}

.vid-signin {
  min-height: 64px;
}

@media (max-width: 380px) {
  .vid-card .vx-card__head {
    padding: var(--vx-space-5) var(--vx-space-5) 0;
  }

  .vid-card .vx-card__body {
    padding: var(--vx-space-5);
  }

  .vid-card .vx-card__foot {
    padding-inline: var(--vx-space-5);
  }
}

/* ---------- Shell pages ---------- */

.vid-pagefoot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vx-space-2) var(--vx-space-5);
  margin-top: var(--vx-space-12);
  padding-top: var(--vx-space-4);
  border-top: 1px solid var(--vx-line);
  color: var(--vx-ink-2);
  font-size: var(--vx-text-sm);
}

.vid-pagefoot a {
  color: var(--vx-ink-2);
}

.vid-pagefoot span {
  margin-inline-start: auto;
}

/* Passkeys: keep rows on one line and let the table scroll on phones */
.vid-passkeys .vx-table {
  min-width: 600px;
}

.vid-passkeys .vx-table td:nth-child(3) {
  white-space: nowrap;
}

/* Long-form text on the documentation page */
.vid-prose > p,
.vid-prose > ul {
  margin-top: var(--vx-space-3);
  max-width: 72ch;
}

.vid-prose > h2 {
  margin-top: var(--vx-space-10);
  font-size: var(--vx-text-2xl);
  font-weight: 700;
}

.vid-prose > h2 + p {
  margin-top: var(--vx-space-2);
}

.vid-prose > pre.vx-code,
.vid-prose > .vx-table-wrap {
  margin-top: var(--vx-space-4);
}

.vid-prose :not(pre) > code {
  padding: 1px 4px;
  border-radius: var(--vx-radius-tag);
  background: var(--vx-sunk);
  overflow-wrap: anywhere;
}

.vid-prose .vx-table td {
  vertical-align: top;
}

.vid-prose .vx-table td:first-child {
  white-space: nowrap;
}

/* Applications (developer console) */
.vid-app + .vid-app {
  margin-top: var(--vx-space-4);
}

.vid-app .vx-box__head h3 {
  margin-inline-end: 0;
}

.vid-app .vx-box__head .vid-app__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vx-space-2);
  margin-inline-start: auto;
}

.vid-app .vx-kv {
  border-bottom: 1px solid var(--vx-line);
}

.vid-secret {
  margin: var(--vx-space-4);
}

pre.vx-code {
  margin: 0;
  white-space: pre;
}

.vid-secret pre.vx-code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.vid-form-section .vx-form {
  max-width: 560px;
}

/* ---------- Administration ---------- */

.vid-service {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vx-space-2) var(--vx-space-6);
  margin-bottom: var(--vx-space-5);
}

.vid-service > span {
  display: inline-flex;
  align-items: center;
  gap: var(--vx-space-2);
  color: var(--vx-ink-2);
}

.vid-service strong {
  color: var(--vx-ink);
  font-weight: 550;
}

.vid-admin .vx-stats {
  margin-bottom: var(--vx-space-2);
}

.vid-admin .vx-table td {
  vertical-align: top;
}

.vid-admin .vx-table td .vid-sub {
  display: block;
  margin-top: 2px;
  color: var(--vx-ink-2);
  font-size: var(--vx-text-sm);
}

.vid-admin .vx-table td code:not(.vx-value > code) {
  font-size: var(--vx-text-sm);
  overflow-wrap: anywhere;
}

.vid-admin .vx-table {
  min-width: 680px;
}

.vid-admin .vx-table td .vx-value > code {
  padding-block: 3px;
}

.vid-admin .vx-table td .vx-value > .vx-icon-btn {
  width: 28px;
  height: 28px;
}

.vid-admin td details > summary {
  min-height: 28px;
}

.vid-admin td details > div {
  font-size: var(--vx-text-sm);
  color: var(--vx-ink-2);
}

.vid-admin .vid-manage {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--vx-space-2);
}

.vid-admin .vid-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vx-space-2);
}

.vid-events {
  border: 1px solid var(--vx-line);
  border-radius: var(--vx-radius-box);
  background: var(--vx-raised);
}

.vid-events:empty {
  display: none;
}

.vid-event {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--vx-space-1) var(--vx-space-4);
  padding: var(--vx-space-3) var(--vx-space-4);
}

.vid-event + .vid-event {
  border-top: 1px solid var(--vx-line-soft);
}

.vid-event time {
  color: var(--vx-ink-2);
  font-size: var(--vx-text-sm);
  white-space: nowrap;
}

.vid-events > p {
  padding: var(--vx-space-4);
}

.vid-dialog-body {
  display: grid;
  gap: var(--vx-space-4);
}

.vid-dialog-body p {
  overflow-wrap: anywhere;
}

.vid-loading {
  display: inline-flex;
  align-items: center;
  gap: var(--vx-space-2);
  color: var(--vx-chrome-ink-2);
}

/* ---------- Public pages: home and policies ---------- */

.vid-site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0 var(--vx-sheet-gap) var(--vx-sheet-gap);
  background: var(--vx-chrome);
  color: var(--vx-chrome-ink);
}

.vid-site__top {
  display: flex;
  align-items: center;
  gap: var(--vx-space-2);
  min-height: var(--vx-topbar-h);
  padding-inline: 0 var(--vx-space-1);
}

.vid-site__top nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vx-space-1);
  margin-inline-start: auto;
}

.vid-site__top nav .vx-btn--ghost {
  --vx-btn-ink: var(--vx-chrome-ink);
  --vx-btn-hover: var(--vx-chrome-hover);
}

.vid-site__sheet {
  flex: 1 0 auto;
  border-radius: var(--vx-radius-sheet);
  background: var(--vx-sheet);
  box-shadow: var(--vx-shadow-sheet);
  color: var(--vx-ink);
}

.vid-site__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vx-space-2) var(--vx-space-5);
  padding: var(--vx-space-4) var(--vx-space-2) var(--vx-space-2);
  color: var(--vx-chrome-ink-2);
  font-size: var(--vx-text-sm);
}

.vid-site__foot a {
  color: var(--vx-chrome-ink-2);
}

.vid-site__foot span {
  margin-inline-start: auto;
}

.vid-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--vx-space-10);
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(40px, 8vw, 104px) clamp(16px, 5vw, 56px) clamp(32px, 5vw, 64px);
}

.vid-hero__text {
  display: grid;
  justify-items: start;
  gap: var(--vx-space-5);
  min-width: 0;
}

.vid-hero h1 {
  max-width: 14ch;
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.vid-hero__lead {
  max-width: 46ch;
  color: var(--vx-ink-2);
  font-size: var(--vx-text-xl);
}

.vid-hero__art {
  display: grid;
  place-items: center;
  width: clamp(200px, 26vw, 300px);
  aspect-ratio: 1;
  border-radius: 28%;
  background: #000;
  color: #fff;
}

.vid-hero__art > svg {
  width: 74%;
  height: auto;
}

.vid-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--vx-space-4);
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 clamp(16px, 5vw, 56px) clamp(40px, 6vw, 72px);
}

.vid-feature {
  display: grid;
  align-content: start;
  gap: var(--vx-space-2);
  padding: var(--vx-space-5);
  border: 1px solid var(--vx-line);
  border-radius: var(--vx-radius-box);
  background: var(--vx-raised);
}

.vid-feature h2 {
  display: flex;
  align-items: center;
  gap: var(--vx-space-2);
  font-size: var(--vx-text-lg);
  font-weight: 700;
}

.vid-feature h2 .vx-icon {
  color: var(--vx-ink-2);
}

.vid-feature p {
  color: var(--vx-ink-2);
}

.vid-doc {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(32px, 6vw, 72px) clamp(16px, 5vw, 40px) clamp(40px, 6vw, 80px);
}

.vid-doc h1 {
  font-size: var(--vx-text-5xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.vid-doc h2 {
  margin-top: var(--vx-space-8);
  font-size: var(--vx-text-xl);
  font-weight: 700;
}

.vid-doc p {
  margin-top: var(--vx-space-3);
  font-size: var(--vx-text-lg);
  line-height: 1.6;
}

.vid-doc h1 + p {
  color: var(--vx-ink-2);
}

@media (max-width: 767px) {
  .vid-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .vid-hero__art {
    display: none;
  }

  .vid-site__top .vx-env {
    display: none;
  }
}