/* ---------- Verses ----------
   Page-only styles. Tokens only (see docs/DESIGN.md). */

/* Signed-out note (same shape as the Conversation Box's) */
.vs-local-note.card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  color: var(--muted);
}
.vs-local-note[hidden] { display: none; }
.vs-local-note .pill { flex-shrink: 0; min-height: 44px; }
@media (max-width: 340px) {
  .vs-local-note.card { border-radius: var(--radius-card); padding: var(--space-4); flex-direction: column; text-align: center; }
}

/* Summary */
.vs-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.vs-summary[hidden] { display: none; }
.vs-summary .ring { --ring-size: 128px; }
.vs-summary .ring__label { font-size: var(--fs-h3); }
.vs-summary__chips { list-style: none; display: grid; gap: var(--space-2); }
.vs-summary__chips .chip { justify-content: space-between; gap: var(--space-3); }
.vs-chipcount {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--stage-ink, var(--text)) 14%, transparent);
  display: inline-grid;
  place-items: center;
  font-size: var(--fs-caption);
  font-variant-numeric: tabular-nums;
}

/* Card titles */
.vs-card__title {
  font-family: var(--font-display);
  font-variation-settings: var(--heading-variation);
  font-weight: 800;
  font-size: clamp(1.5rem, 1.5vw + 1.1rem, 1.875rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-align: left;
  margin: 0;
}
.vs-caption { font-size: var(--fs-caption); color: var(--subtle); }

/* Add a verse */
.vs-refrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-2);
}
.vs-refrow .input { min-width: 0; }
.vs-translation { cursor: default; }
@media (max-width: 400px) {
  .vs-refrow { grid-template-columns: minmax(0, 1fr) auto; }
  .vs-refrow .input { grid-column: 1 / -1; }
  .vs-refrow .pill { justify-self: start; }
  .vs-translation { justify-self: end; }
}
.vs-hintrow {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}
.vs-add textarea.input { min-height: 112px; resize: vertical; }

/* Review */
.vs-review__head { --row-gap: var(--space-2); align-items: center; }
.vs-review__empty { padding: var(--space-5) var(--space-2); }
.vs-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.vs-card__ref {
  font-family: var(--font-display);
  font-variation-settings: var(--heading-variation);
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}
.vs-card__trans {
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--accent-text);
  margin-top: calc(var(--space-2) * -1);
}
/* The verse itself: the scripture recipe (Fraunces italic on a leaf tint over
   glass, with a faint gold rule). Centered text, so the rule sits on top. */
.vs-card__verse {
  position: relative;
  width: 100%;
  font: inherit;
  color: var(--text);
  background: color-mix(in srgb, var(--accent-soft) 60%, var(--glass));
  border: 1px solid var(--glass-border);
  box-shadow: 0 0 0 1px var(--glass-edge);
  border-radius: var(--radius);
  padding: calc(var(--space-5) + 8px) var(--space-5) var(--space-5);
  text-align: center;
  cursor: pointer;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  overflow-wrap: anywhere;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.vs-card__verse::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 50%;
  width: 44px;
  height: 3px;
  margin-left: -22px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--gold) 70%, transparent);
}
@media (hover: hover) {
  .vs-card__verse:hover { box-shadow: 0 0 0 1px var(--glass-edge), var(--shadow); }
}
.vs-card__verse.is-revealed {
  background: color-mix(in srgb, var(--accent-soft) 80%, var(--glass-strong));
  letter-spacing: normal;
}
.vs-card__verse:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.vs-card__help { font-size: var(--fs-small); color: var(--muted); }
.vs-card .pill--sm { min-height: 44px; }
.vs-card .pill svg { width: 18px; height: 18px; }
.vs-results {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-2);
}
/* Two by two on phones: four pills in a ~300px card would shrink to discs */
@media (max-width: 479px) { .vs-results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vs-result { flex-direction: column; gap: 2px; min-height: 60px; padding-inline: var(--space-2); line-height: 1.1; }
.vs-result:not(.pill--accent) { box-shadow: 0 0 0 1px var(--glass-edge); }
/* "Again": deepen the coral ink a touch so the label and hint clear 4.5:1 on danger-soft */
.vs-result.pill--danger-soft { --pill-ink: color-mix(in srgb, var(--danger-text) 78%, var(--text)); }
.vs-result__hint { font-size: var(--fs-caption); font-weight: 500; }
.vs-card__keys { font-size: var(--fs-caption); color: var(--subtle); }
@media (hover: none) { .vs-card__keys { display: none; } }

/* My verses */
.vs-list__title { padding-inline: var(--space-1); }
.vs-list { list-style: none; }
.vs-list.is-empty { padding: 0; }
.vs-empty { padding: var(--space-6) var(--space-4); }
.vs-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
}
.vs-row + .vs-row { border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent); }
.vs-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.vs-row__ref {
  font-family: var(--font-display);
  font-variation-settings: var(--heading-variation);
  font-weight: 700;
  font-size: var(--fs-lead);
  line-height: 1.3;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}
.vs-row__body {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--muted);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.vs-row__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-top: 2px; }
.vs-chip { min-height: 26px; padding: 0 10px; font-size: var(--fs-caption); }
.vs-row__when { font-size: var(--fs-caption); color: var(--subtle); }
.vs-row__when.is-due { color: var(--accent-text); font-weight: 600; }
.vs-row__more { flex-shrink: 0; width: 44px; height: 44px; }

/* Edit sheet */
.vs-danger-text { --pill-ink: var(--danger-text); }
.vs-danger-text:hover { --pill-bg: var(--danger-soft); }
.vs-confirm.card { background: var(--danger-soft); -webkit-backdrop-filter: none; backdrop-filter: none; }
.vs-confirm p { color: var(--text); }
.vs-confirm .pill--sm { min-height: 44px; }
.vs-confirm[hidden], .vs-remove [hidden] { display: none; }
#vs-edit-sheet textarea.input { min-height: 132px; resize: vertical; }

@media (min-width: 768px) {
  .vs-card__verse { padding: calc(var(--space-6) + 6px) var(--space-6) var(--space-6); }
}

/* Components set display, so make [hidden] win on this page. */
.vs [hidden], .sheet [hidden] { display: none !important; }