/* A folded name-card ledger: all colors and type come from the product tokens. */
.v2-penpals-entry { margin: var(--space-xs) 0 var(--space-sm); min-width: 0; border-block: 1px solid var(--color-rule); }
.v2-penpals-entry > summary {
  min-height: var(--size-touch-target); padding: var(--space-xs) var(--space-2xs); cursor: pointer;
  color: var(--color-ink); font: var(--text-base)/1.5 var(--font-display); overflow-wrap: anywhere;
}
.v2-penpals-entry > summary > span { margin-inline-start: var(--space-2xs); color: var(--color-muted); font: var(--text-sm)/1.6 var(--font-body); }
.v2-penpals-entry[open] > summary { border-bottom: 1px solid var(--color-rule); }
.v2-penpals-entry .penpals-v2 { border: 0; }
.v2-choose-penpal, .v2-penpal-recipient > button {
  min-height: var(--size-touch-target); padding: var(--space-2xs); border: 0; border-radius: var(--radius-input);
  color: var(--color-ink-2); background: none; font: var(--text-sm)/1.5 var(--font-ui); cursor: pointer;
  text-decoration: underline; text-underline-offset: .25em; text-decoration-color: var(--color-rule-strong);
  -webkit-tap-highlight-color: var(--color-transparent); touch-action: manipulation;
}
.v2-choose-penpal { justify-self: start; }
.v2-penpal-recipient {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); min-width: 0;
  margin-block: var(--space-2xs); padding: var(--space-2xs) var(--space-xs); border-inline-start: 2px solid var(--color-gold-rule);
  background: var(--color-paper-2); color: var(--color-ink-2); font: var(--text-sm)/1.6 var(--font-body);
}
.v2-penpal-recipient > span { flex: 1 1 12em; min-width: 0; overflow-wrap: anywhere; }
.v2-penpal-recipient[hidden] { display: none !important; }
.v2-choose-penpal:disabled, .v2-penpal-recipient > button:disabled { opacity: .55; cursor: default; }
.v2-penpals-entry > summary:focus-visible, .v2-choose-penpal:focus-visible, .v2-penpal-recipient > button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.penpals-v2 {
  color: var(--color-ink);
  background: var(--color-paper);
  padding: var(--space-md) var(--space-sm) var(--space-safe-bottom);
  font: var(--text-sm)/1.7 var(--font-body);
  min-width: 0;
  border-block: 1px solid var(--color-rule);
}
.penpals-v2 *, .penpals-v2 *::before, .penpals-v2 *::after { box-sizing: border-box; }
.penpals-v2 [hidden] { display: none !important; }
.penpals-v2-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.penpals-v2-heading { min-width: 0; }
.penpals-v2-eyebrow { color: var(--color-muted); font-size: var(--text-xs); letter-spacing: .12em; }
.penpals-v2-title { margin: var(--space-3xs) 0 0; font: 400 var(--text-xl)/1.4 var(--font-display); letter-spacing: .08em; }
.penpals-v2-intro { color: var(--color-muted); margin: var(--space-xs) 0 var(--space-md); }
.penpals-v2-own { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-2xs); margin-bottom: var(--space-sm); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.penpals-v2-own > .penpals-v2-note { flex-basis: 100%; margin: 0; }
.penpals-v2-own > .penpals-v2-note:empty { display: none; }
.penpals-v2-own-handle { background: var(--color-paper-2); user-select: all; }
.penpals-v2-add { display: flex; align-items: end; gap: var(--space-2xs); margin: 0; }
.penpals-v2-field { flex: 1; min-width: 0; display: grid; gap: var(--space-3xs); }
.penpals-v2-label { color: var(--color-ink-2); }
.penpals-v2-input {
  width: 100%; min-width: 0; min-height: var(--size-touch-target); padding: var(--space-2xs) var(--space-xs);
  border: 1px solid var(--color-rule-strong); border-radius: var(--radius-input);
  color: var(--color-ink); background: var(--color-surface); font: var(--text-base)/1.5 var(--font-ui);
}
.penpals-v2-input::placeholder { color: var(--color-muted); opacity: 1; font-size: var(--text-sm); }
.penpals-v2-button, .penpals-v2-link {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3xs);
  min-height: var(--size-touch-target); min-width: var(--size-touch-target); padding: var(--space-2xs) var(--space-xs);
  font: var(--text-sm)/1.5 var(--font-ui); cursor: pointer; color: var(--color-ink);
  border: 1px solid var(--color-rule-strong); border-radius: var(--radius-input); background: var(--color-surface);
  text-decoration: none; touch-action: manipulation; -webkit-tap-highlight-color: var(--color-transparent);
  transition: background var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.penpals-v2-primary { color: var(--color-accent-ink); background: var(--color-accent); border-color: var(--color-accent); white-space: nowrap; }
.penpals-v2-compose { color: var(--color-ink); background: var(--color-paper-2); border-color: var(--color-rule-strong); }
.penpals-v2-link { background: none; border-color: var(--color-transparent); padding-inline: var(--space-2xs); }
.penpals-v2-header > .penpals-v2-link { flex-shrink: 0; }
.penpals-v2-caution { color: var(--color-muted); }
.penpals-v2 button:disabled, .penpals-v2 input:disabled { cursor: default; opacity: .55; }
.penpals-v2 :is(button,input):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.penpals-v2-note { color: var(--color-muted); font-size: var(--text-sm); margin: var(--space-2xs) 0 0; }
.penpals-v2-preview { margin-top: var(--space-sm); padding: var(--space-sm); background: var(--color-paper-2); border: 1px solid var(--color-gold-rule); border-inline-start-width: 3px; }
.penpals-v2-preview > .penpals-v2-eyebrow { margin: 0 0 var(--space-2xs); }
.penpals-v2-preview-actions { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-xs); }
.penpals-v2-feedback { min-height: var(--space-lg); margin-block: var(--space-xs); }
.penpals-v2-status { margin: 0; overflow-wrap: anywhere; color: var(--color-muted); }
.penpals-v2-feedback[data-state="error"] .penpals-v2-status { color: var(--color-error); }
.penpals-v2-feedback > button { margin-top: var(--space-2xs); }
.penpals-v2-group + .penpals-v2-group { margin-top: var(--space-md); }
.penpals-v2-group-title { display: flex; align-items: center; gap: var(--space-2xs); margin: 0 0 var(--space-xs); font: 400 var(--text-lg)/1.5 var(--font-display); }
.penpals-v2-count { font: var(--text-xs)/1.5 var(--font-outlier); color: var(--color-muted); }
.penpals-v2-list { margin: 0; padding: 0; list-style: none; }
.penpals-v2-card {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: var(--space-2xs) var(--space-xs);
  position: relative; padding: var(--space-sm) 0; border-top: 1px solid var(--color-rule);
  animation: penpals-v2-reveal var(--dur-medium) var(--ease-out) both;
}
.penpals-v2-card:last-child { border-bottom: 1px solid var(--color-rule); }
.penpals-v2-monogram {
  display: grid; place-items: center; align-self: start; width: 44px; height: 54px;
  border: 1px solid var(--color-gold-rule); border-radius: 2px;
  background: var(--color-paper-2); color: var(--color-ink-2); font: 24px/1 var(--font-display);
  box-shadow: inset 0 0 0 3px var(--color-paper);
}
.penpals-v2-person { min-width: 0; }
.penpals-v2-name { margin: 0; font: 400 var(--text-lg)/1.45 var(--font-display); overflow-wrap: anywhere; }
.penpals-v2-handle { margin: var(--space-3xs) 0 0; color: var(--color-muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.penpals-v2-actions { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3xs); }
.penpals-v2-empty { padding: var(--space-lg) var(--space-sm); text-align: center; color: var(--color-muted); border-block: 1px solid var(--color-rule); }
.penpals-v2-empty-seal { display: inline-grid; place-items: center; width: 42px; height: 50px; border: 1px solid var(--color-gold-rule); color: var(--color-gold); font: 26px/1 var(--font-display); }
.penpals-v2-empty-title { margin: var(--space-sm) 0 var(--space-2xs); color: var(--color-ink); font: 400 var(--text-lg)/1.5 var(--font-display); }
.penpals-v2-empty p { margin: var(--space-2xs) auto; max-width: 26em; }
.penpals-v2-empty > button { margin-top: var(--space-xs); }
.penpals-v2-confirmation { border-inline-start: 3px solid var(--color-rule-strong); background: var(--color-paper-2); padding: var(--space-xs); margin-block: var(--space-sm); }
.penpals-v2-confirmation p { margin: 0 0 var(--space-2xs); overflow-wrap: anywhere; }
.penpals-v2-confirmation > button { margin-inline-end: var(--space-2xs); }
@media (hover: hover) {
  .penpals-v2-button:not(:disabled):hover, .penpals-v2-link:not(:disabled):hover { background: var(--color-paper-2); }
  .penpals-v2-primary:not(:disabled):hover { background: var(--color-accent-hover); }
}
@media (max-width: 359px) {
  .penpals-v2 { padding-inline: var(--space-xs); }
  .penpals-v2-add { flex-wrap: wrap; }
  .penpals-v2-add > .penpals-v2-field { flex-basis: 100%; }
  .penpals-v2-add > button { width: 100%; }
  .penpals-v2-actions { grid-column: 1 / -1; }
  .penpals-v2-eyebrow { letter-spacing: 0; }
}
@media (min-width: 640px) {
  .penpals-v2 { padding-inline: var(--space-md); }
  .penpals-v2-card { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .penpals-v2-actions { grid-column: 3; justify-content: end; }
}
@keyframes penpals-v2-reveal { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .penpals-v2 *, .penpals-v2 *::before, .penpals-v2 *::after { animation: none !important; transition: none !important; }
}