/* gift of the full chart - repack v2 (canon №273): the giver's send screen, the sent state, the gift rows of the people tab and the
   recipient's picture. Ported from docs/board/2026-10-18-repack/proto/_build/{build_s3,v2_pay}.py. Tokens only (P4.2, chair row 43): every
   share picture carries a 1 px --line frame, so the ink plate keeps its edge on the dark page. */

/* the send screen (S3) */
.gift-head { margin: var(--gap-l) 0 0; font: var(--t-screen); letter-spacing: var(--ls-display); text-wrap: balance; }   /* Polish: the screen title, like every other screen */
.gift-pcard { margin-top: var(--gap-m); padding: var(--gap-s); background: var(--surface); border-radius: var(--r-card); }
.gift-pimg { display: block; margin: 0 auto; width: 176px; height: 176px; border-radius: var(--r-media); box-shadow: 0 0 0 1px var(--frame); }
.gift-pnote { margin: var(--gap-m) var(--gap-xs) 0; font: var(--t-note); color: var(--text); overflow-wrap: anywhere; white-space: pre-line; }
/* Polish (Impeccable anti-pattern: a side stripe): the giver's note opens with a drawn quote mark in the quiet line tone (a mask, so it follows the theme; no glyph, no text) */
.gift-pnote::before { content: ""; display: block; width: var(--gap-xl); height: var(--gap-l); margin-bottom: var(--gap-xs); background: var(--line-strong);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M1 16V9.5C1 4.5 4 1.5 9 .5l.9 1.8C7.4 3.2 6.2 4.7 6 7h3.2v9H1ZM14 16V9.5c0-5 3-8 8-9l.9 1.8c-2.5.9-3.7 2.4-3.9 4.7H22v9h-8Z'/%3E%3C/svg%3E") no-repeat left center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M1 16V9.5C1 4.5 4 1.5 9 .5l.9 1.8C7.4 3.2 6.2 4.7 6 7h3.2v9H1ZM14 16V9.5c0-5 3-8 8-9l.9 1.8c-2.5.9-3.7 2.4-3.9 4.7H22v9h-8Z'/%3E%3C/svg%3E") no-repeat left center / contain; }
.gift-pnote[hidden] { display: none; }
.gift-pcap { margin: var(--gap-m) var(--gap-xs) 0; font: var(--t-note); color: var(--text); }
.gift-pcap b { font-weight: 700; }
.gift-ibtn { margin-top: var(--gap-m); height: var(--tap-min); border-radius: var(--r-media); background: var(--bg); display: flex; align-items: center;
  justify-content: center; font: var(--t-label); color: var(--text); pointer-events: none; }
/* P4.1 (row 41, Impeccable P2-7): one input look - the onboarding pill (app.css input[data-role]) and its label (.field-label); the note grows downward */
.gift-fl { display: block; margin: var(--gap-l) 0 var(--gap-xs); font: var(--t-label); color: var(--text); }
.gift-fi { display: block; width: 100%; box-sizing: border-box; min-height: var(--btn-h); border-radius: var(--r-chip); border: 1px solid var(--line-strong);
  background: var(--surface); padding: var(--gap-m) var(--gap-l); font: var(--t-body); color: var(--text); resize: none; appearance: none; -webkit-appearance: none;
  overflow-wrap: anywhere; }
.gift-fi:focus-visible { outline: 0; border-color: var(--accent); }
.gift-note { field-sizing: content; max-height: 130px; overflow-y: auto; border-radius: var(--r-media); }   /* a growing field is not a pill: its scrollbar would be clipped */
.screen-gift-ready { padding-bottom: var(--gap-xl); }
@media (max-width: 380px) { .gift-pimg { width: 160px; height: 160px; } }

/* the sent state: the plate grows from the preview size to 240 once (R2-pay §4); the global reduced-motion rule stills it */
.gift-plate { display: block; margin: var(--gap-xl) auto 0; width: min(240px, calc(100vw - 2 * var(--pad-x))); aspect-ratio: 1; height: auto; border-radius: var(--r-media);
  box-shadow: 0 0 0 1px var(--frame); }
.screen-gift-sent .gift-plate { animation: gift-grow 400ms var(--ease-voice) both; }
@keyframes gift-grow { from { transform: scale(.7333); } to { transform: scale(1); } }
.gift-sent-row { margin-top: var(--gap-xl); }
.gift-sent-row .g-row { min-height: var(--row-h); padding: 8px 0; align-items: center; }
.gift-sent-row .g-label { font: var(--t-row); color: var(--text); }

/* a gift record in the people tab and on the sent state: an ink disc with a ring and the Sun point (no bow, R2 §2.6). P4.2 (Impeccable P1-6):
   the app's ink disc (her own "you" disc in the sky card and the step disc: --accent, light in the dark theme), so it no longer vanishes into the dark surface;
   in dark the Sun gets an ink halo to stay visible on the light disc */
.mn-gift-av { position: relative; flex: none; width: var(--avatar-m); height: var(--avatar-m); border-radius: 50%; background: var(--accent); }
.mn-gift-av::before { content: ""; position: absolute; left: 9px; top: 9px; width: 26px; height: 26px; box-sizing: border-box;
  border: var(--bw-state) solid var(--accent-ink); border-radius: 50%; opacity: .7; }
.mn-gift-av::after { content: ""; position: absolute; left: 25px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--chart-mark); }
[data-theme="dark"] .mn-gift-av::after { box-shadow: 0 0 0 var(--bw-state) var(--accent-ink); }

/* a claimed gift row is a record, not a button (the row list makes every row clickable) */
.mn-list .g-row[data-role="mn-gift-row"]:not([data-gift-id]) { cursor: default; }

/* the arrival (S2 v2): the picture above the yellow line. The first open of a new reader's arrival fades the whole picture in over 400 ms,
   then a soft glow at the Sun point (630/224 of 1080) pulses once over 600 ms at 18 % (decision 1: no bow, no star-by-star fade). */
.gift-plate-wrap { position: relative; width: min(240px, calc(100vw - 2 * var(--pad-x))); margin: var(--gap-l) auto var(--gap-l); }
.gift-plate-wrap .gift-plate { margin: 0; width: 100%; }
.gift-plate-wrap[data-motion] .gift-plate { animation: gift-fade 400ms var(--ease-voice) both; }
.gift-plate-wrap[data-motion]::after { content: ""; position: absolute; left: 58.3%; top: 20.7%; width: 28%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none; opacity: 0;
  background: radial-gradient(circle, var(--chart-mark) 0%, transparent 70%); animation: gift-glow 600ms ease-in-out 400ms both; }
@keyframes gift-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gift-glow { 0% { opacity: 0; } 50% { opacity: .18; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gift-plate-wrap[data-motion] .gift-plate, .gift-plate-wrap[data-motion]::after { animation: none; } }