/* A letter to read, with quiet local feedback and one way back to the method. */
.phone.plane-surface { height: var(--preview-height); background: var(--paper); }
.plane-surface .page-scroll > .plane-page { display: flex; flex-direction: column; padding: var(--space-8) var(--page-gutter) var(--space-6); }
.plane-page > * { flex-shrink: 0; }
.plane-letter { border-radius: var(--card-radius); background: var(--composite-card-bg); overflow: hidden; box-shadow: var(--composite-card-shadow); }
.plane-letter-header { padding: 16px 24px 12px; }
.plane-letter-id { margin: 0; color: var(--accent-strong); font: var(--weight-regular) var(--text-sm)/var(--leading-sm) var(--font-body); }
.plane-letter-header time { display: block; margin-top: 4px; color: var(--muted); font: var(--weight-regular) var(--text-xs)/var(--leading-xs) var(--font-body); }
.plane-letter-content { padding: 24px 24px 12px; }
.plane-letter-content blockquote { margin: 0; font: var(--weight-medium) var(--text-xl)/var(--leading-3xl) var(--font-body); text-wrap: pretty; }
.plane-letter-content > p { margin-top: 22px; font: var(--weight-regular) var(--text-md)/var(--leading-xl) var(--font-body); text-wrap: pretty; }
.plane-letter-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 16px 16px; }
.plane-letter-actions .button { width: var(--control-height); min-width: var(--control-height); height: var(--control-height); min-height: var(--control-height); padding: 0; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--muted); }
.plane-letter-actions button .icon { width: 18px; height: 18px; flex-shrink: 0; }
.plane-letter-actions button:hover { background: var(--hover-surface); }
.plane-letter-actions button[aria-pressed="true"] { border-color: transparent; background: var(--button-secondary-bg); color: var(--button-secondary-color); }
.plane-letter-actions button[aria-pressed="true"] .icon { fill: var(--accent); stroke: var(--accent); }
.plane-letter-actions button[aria-pressed="true"]:hover { background: var(--button-secondary-hover-bg); }
.plane-letter-actions button:active { background: var(--button-secondary-pressed-bg); }
.plane-return { margin-top: auto; padding: 40px 0 0; }
.plane-signoff { margin-top: var(--space-6); text-align: center; color: var(--muted); font: var(--weight-regular) var(--text-xs)/var(--leading-meta) var(--font-body); }
.plane-surface .home-indicator { height: 12px; background: var(--paper); }
@media (max-width: 760px) {
  .phone.plane-surface { height: 100dvh; min-height: 0; max-width: 430px; padding-top: var(--safe-top); }
  .plane-surface .topbar { height: var(--header-mobile-height); }
  .plane-surface .home-indicator { height: var(--safe-bottom); }
  .plane-surface .home-indicator::after { display: none; }
}
@media (max-width: 360px) {
  .plane-surface .page-scroll > .plane-page { padding: var(--space-5) var(--space-5) var(--space-5); }
  .plane-letter-header { padding: 16px 18px 12px; }
  .plane-letter-content { padding: 20px 18px 8px; }
  .plane-letter-content blockquote { font-size: var(--text-lg); line-height: var(--leading-2xl); }
  .plane-letter-actions { padding-right: 10px; padding-left: 10px; }
}