/* The pen pal (round 10, lane 011): #/practice/penpal. Phone first (390 px); logical properties only; tokens from
   styles/tokens.css. DESIGN's conversation rules: the character's letters are ink on surface-2, his are surface with
   the 45 % accent hairline, never an accent fill; a corrected span of his is a dotted accent rule, as Conversation's
   recast. No motion of its own. */

.pp { max-width: 760px; margin-inline: auto; }

/* the character card */
.pp-card { padding: var(--s-4); border-radius: var(--r-card); background: var(--surface-2); }
.pp-who { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); }
.pp-name { font: 400 24px/1.15 var(--font-display); letter-spacing: -0.01em; color: var(--ink); }
.pp-city { color: var(--ink-2); font-weight: 500; }
.pp-bio { margin: var(--s-2) 0 0; font: 400 17px/1.4 var(--font-display); color: var(--ink); overflow-wrap: anywhere; }
.pp-ep { margin: var(--s-2) 0 0; color: var(--ink-3); font-size: 13px; font-weight: 500; }

/* the letters, newest last */
.pp-log { display: grid; gap: var(--s-3); margin: 0; padding: var(--s-2) 0 0; list-style: none; }
.pp-log:empty { display: none; }
.pp-msg { display: grid; gap: var(--s-2); min-width: 0; }
.pp-you { justify-items: end; }
.pp-bubble { width: fit-content; max-width: 92%; min-width: 0; padding: 12px 16px; border-radius: 20px; box-sizing: border-box; }
.pp-them .pp-bubble { background: var(--surface-2); border-end-start-radius: 6px; }
.pp-you .pp-bubble { background: var(--surface); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 45%, transparent); border-end-end-radius: 6px; }
.pp-text { margin: 0; font: 400 18px/1.45 var(--font-display); color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
.pp-fix { padding-bottom: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone;
  background: repeating-linear-gradient(90deg, color-mix(in oklab, var(--accent) 75%, transparent) 0 2px, transparent 2px 5px) 0 100% / 100% 2px no-repeat; }

/* his corrections, under his letter */
.pp-fixes { display: grid; gap: var(--s-2); width: min(100%, 92%); margin: 0; padding: 0; list-style: none; }
.pp-fixrow { padding: 10px 12px; border-radius: var(--r-tile); border: 1px solid var(--hairline); background: var(--surface); }
.pp-was, .pp-now { margin: 0; font: 400 16px/1.4 var(--font-display); overflow-wrap: anywhere; }
.pp-was { color: var(--ink-3); }
.pp-was del { text-decoration: line-through; }
.pp-now { color: var(--ink); }
.pp-now ins { text-decoration: none; }
.pp-cap-link { justify-self: start; min-height: var(--tap); }
.pp-why { margin: 4px 0 0; color: var(--ink-2); font-size: 13px; line-height: 1.45; }
.pp-add { margin-top: var(--s-2); min-height: var(--tap); }
.pp-added { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); margin: var(--s-2) 0 0; color: var(--ink-2); font-size: 14px; }
.pp-added:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-tile); }

/* what can happen now */
.pp-status:empty { display: none; }
.pp-status { display: grid; gap: var(--s-2); justify-items: start; }
.pp-writing { margin: 0; color: var(--ink-2); }
.pp-error { margin: 0; color: var(--ink); }
.pp-foot { display: grid; gap: var(--s-2); }
.pp-wait, .pp-closed { margin: 0; color: var(--ink-2); }
.pp-composer { display: grid; gap: var(--s-2); }
.pp-input { width: 100%; min-height: 9.5em; padding: 12px; border-radius: var(--r-ctl); border: 1px solid var(--field-border); background: var(--surface); color: var(--ink);
  font: 400 16px/1.45 var(--font-ui); resize: vertical; box-sizing: border-box; }
.pp-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pp-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.pp-count { color: var(--ink-3); }
.pp-send { min-height: var(--tap); margin-inline-start: auto; }
.pp-sent { margin: 0; color: var(--ink-3); }

@media (forced-colors: active) {
  .pp-card, .pp-bubble, .pp-fixrow, .pp-input { border: 1px solid CanvasText; }
  .pp-fix { background: none; text-decoration: underline dotted; text-decoration-thickness: 2px; text-underline-offset: 3px; }
}