/* Birthday inbox — the same Scaffold grid, type and ink as the rest of the site.
   The form is drawn as a sheet: a title block for its head, ruled lines for the
   letter, and a receipt once it has been sent. */

/* ── homepage entry ─────────────────────────────────────── */
.birthday-entry[hidden] { display: none !important; }
.birthday-entry { align-items: baseline; color: var(--ink); display: flex; flex-wrap: wrap; font-family: var(--display); font-size: clamp(1.7rem,4.5vw,3.8rem); font-stretch: 75%; font-weight: 800; gap: .2em; line-height: 1.1; margin-top: 1.6rem; text-decoration: none; text-transform: uppercase; width: fit-content; }
.birthday-entry .arr { color: var(--accent); font-size: .6em; transition: transform .3s var(--ease-out); }
.birthday-entry:hover { color: var(--accent); }
.birthday-entry:hover .arr { transform: translate(.12em,-.12em); }
.birthday-entry:focus-visible { outline: 2px solid var(--accent); outline-offset: .4rem; }
.birthday-entry-note { align-self: center; border: 1px solid currentColor; color: var(--accent); font: 500 .62rem/1 var(--mono); font-stretch: 100%; font-variant-numeric: tabular-nums; letter-spacing: .02em; margin-left: .6em; padding: .35rem .5rem; text-transform: uppercase; white-space: nowrap; }
.birthday-entry-note:empty { display: none; }
.birthday-entry-note::before { animation: bd-pulse 1.6s steps(2) infinite; background: currentColor; content: ''; display: inline-block; height: .45rem; margin-right: .45rem; vertical-align: .02rem; width: .45rem; }

/* ── page frame ─────────────────────────────────────────── */
.birthday-page { padding-bottom: clamp(3rem,6vw,6rem); }
.birthday-countdown { color: var(--ink); font-variant-numeric: tabular-nums; margin-top: .55rem; }
.birthday-countdown:empty { display: none; }
.birthday-countdown b { color: var(--accent); }
.birthday-countdown::before { animation: bd-pulse 1.6s steps(2) infinite; background: var(--accent); content: ''; display: inline-block; height: .5rem; margin-right: .5rem; width: .5rem; }
.birthday-countdown[data-closed]::before { animation: none; background: var(--ink-faint); }

.birthday-rail { grid-column: 1 / span 3; padding-right: clamp(1rem,3vw,2.5rem); }
.birthday-back { margin-top: 0; }
.birthday-steps { border-top: 1px solid var(--ink); counter-reset: none; list-style: none; position: sticky; top: calc(var(--bar) + 1.5rem); }
.birthday-steps li { border-bottom: 1px solid var(--border); display: grid; gap: .8rem; grid-template-columns: 2.2ch 1fr; padding: .85rem 0 .95rem; }
.birthday-steps b { color: var(--accent); font: 600 .68rem/1.9 var(--mono); }
.birthday-steps strong { color: var(--ink); display: block; font: 600 .7rem/1.9 var(--mono); letter-spacing: .02em; text-transform: uppercase; }
.birthday-steps li > span > span { color: var(--ink-soft); display: block; font-size: .84rem; line-height: 1.55; }

.birthday-availability, .birthday-page-content > .birthday-inbox { grid-column: 4 / -1; min-width: 0; }
.birthday-availability { color: var(--ink); font-family: var(--serif); font-size: clamp(1.35rem,2.2vw,1.9rem); line-height: 1.45; max-width: 26ch; }
html[lang="zh"] .birthday-availability { max-width: 18em; }
.birthday-availability::after { animation: caret 1.05s steps(2) infinite; background: var(--accent); content: ''; display: inline-block; height: .9em; margin-left: .2em; vertical-align: -.1em; width: .45em; }
.birthday-availability[hidden], .birthday-inbox[hidden] { display: none !important; }
.birthday-availability[data-state]::after { animation: none; }
.birthday-page-content:has(.birthday-availability[data-state="closed"]:not([hidden])) .birthday-steps { display: none; }
.birthday-inbox[data-enter] { animation: bd-rise .9s var(--ease-out) both; }
.birthday-vh, .birthday-trap { position: absolute; height: 1px; width: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.birthday-intro { color: var(--ink); font-family: var(--serif); font-size: clamp(1.3rem,2.1vw,1.75rem); line-height: 1.5; margin: 0 0 clamp(2rem,4vw,3rem); max-width: 34ch; }
html[lang="zh"] .birthday-intro { line-height: 1.75; max-width: 23em; }
.birthday-columns { align-items: start; display: grid; gap: clamp(2rem,4vw,4rem); grid-template-columns: minmax(0,1.65fr) minmax(0,1fr); }
.birthday-form, .birthday-form fieldset { min-width: 0; }
.birthday-form fieldset { border: 0; margin: 0; padding: 0; }
.birthday-form fieldset[hidden] { display: none; }

/* ── the sheet ──────────────────────────────────────────── */
.letter { background: var(--surface); border: 1px solid var(--ink); transition: box-shadow .35s var(--ease-out), transform .35s var(--ease-out); }
.letter[data-drop] { box-shadow: 6px 6px 0 var(--accent); outline: 2px dashed var(--accent); outline-offset: -10px; }
.letter:focus-within { box-shadow: 6px 6px 0 var(--accent); transform: translate(-2px,-2px); }
.letter-head { border-bottom: 1px solid var(--ink); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2.2fr) minmax(0,1.3fr); }
.letter-head > div { border-right: 1px solid var(--border-strong); min-width: 0; padding: .5rem .75rem .6rem; }
.letter-head > div:last-child { border-right: 0; }
.letter-head small { color: var(--ink-faint); display: block; font: 500 .58rem/1.4 var(--mono); letter-spacing: .03em; margin-bottom: .2rem; text-transform: uppercase; }
.letter-head b, .letter-head input { color: var(--ink); font: 600 .82rem/1.5 var(--mono); }
.letter-head b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.letter-head input { background: transparent; border: 0; border-radius: 0; caret-color: var(--accent); outline: 0; padding: 0; width: 100%; }
.letter-head input::placeholder { color: var(--ink-faint); font-weight: 500; opacity: 1; }
.letter-from { transition: box-shadow .2s; }
.letter-from:focus-within { box-shadow: inset 0 -3px 0 var(--accent); }
.letter-from label { cursor: text; }

.letter-body { padding: 1.4rem clamp(1rem,2.5vw,1.75rem) .4rem; }
.letter-salute { color: var(--ink); display: block; font: italic 400 1.2rem/2rem var(--serif); }
html[lang="zh"] .letter-salute { font-style: normal; }
.letter-body textarea {
  --rule: 2rem;
  background: transparent linear-gradient(to bottom, transparent calc(var(--rule) - 1px), var(--border) calc(var(--rule) - 1px)) 0 0 / 100% var(--rule) local;
  border: 0; border-radius: 0; caret-color: var(--accent); color: var(--ink); display: block;
  font: 400 1.1rem/var(--rule) var(--serif); min-height: calc(var(--rule) * 8); outline: 0; padding: 0; resize: vertical; width: 100%;
}
.letter-body textarea::placeholder { color: var(--ink-faint); font-style: italic; opacity: 1; }
html[lang="zh"] .letter-body textarea::placeholder { font-style: normal; }

.birthday-previews { display: flex; flex-wrap: wrap; gap: .8rem; padding: .6rem clamp(1rem,2.5vw,1.75rem) 1.1rem; }
.birthday-previews:empty { display: none; }
.birthday-preview { animation: bd-rise .5s var(--ease-out) both; margin: 0; position: relative; width: 5.75rem; }
.birthday-preview img { aspect-ratio: 1; border: 1px solid var(--ink); display: block; object-fit: cover; width: 100%; }
.birthday-preview figcaption { background: var(--ink); bottom: 0; color: var(--bg); font: 600 .58rem/1 var(--mono); left: 0; padding: .25rem .35rem; position: absolute; }
.birthday-preview button { align-items: center; background: var(--bg); border: 1px solid var(--ink); border-radius: 0; color: var(--ink); cursor: pointer; display: flex; font: 1rem var(--mono); height: 1.7rem; justify-content: center; position: absolute; right: -.35rem; top: -.35rem; width: 1.7rem; transition: background .2s, color .2s; }
.birthday-preview button:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.letter-foot { align-items: stretch; border-top: 1px solid var(--border-strong); display: flex; font: 500 .66rem/1 var(--mono); letter-spacing: .02em; min-height: 2.75rem; text-transform: uppercase; }
.letter-add { align-items: center; background: transparent; border: 0; border-right: 1px solid var(--border-strong); color: var(--ink); cursor: pointer; display: inline-flex; font: inherit; font-weight: 600; gap: .5rem; letter-spacing: inherit; padding: 0 1rem; text-transform: inherit; transition: background .2s, color .2s; }
.letter-add > span:first-child { color: var(--accent); font-size: .9rem; transition: color .2s; }
.letter-add:hover:not(:disabled) { background: var(--accent); color: var(--accent-ink); }
.letter-add:hover:not(:disabled) > span:first-child { color: inherit; }
.letter-add:disabled { color: var(--ink-faint); cursor: default; }
.letter-add:focus-visible { outline-offset: -3px; }
.letter-hint { align-self: center; color: var(--ink-faint); padding: 0 .9rem; }
@media (hover: none) { .letter-drop { display: none; } }
.letter-count { align-self: center; color: var(--ink-faint); font-variant-numeric: tabular-nums; margin-left: auto; padding: 0 1rem; text-transform: none; transition: color .2s; }
.letter-count[data-level="near"] { color: var(--accent); }
.letter-count[data-level="over"] { color: var(--ink); background: var(--accent-soft); align-self: stretch; display: flex; align-items: center; }

/* ── after the sheet ────────────────────────────────────── */
.birthday-consent { align-items: start; cursor: pointer; display: grid; font-size: .86rem; gap: .75rem; grid-template-columns: 1.1rem 1fr; line-height: 1.6; margin: 1.6rem 0 .9rem; max-width: 58ch; }
.birthday-consent input { appearance: none; background: var(--bg); border: 1.5px solid var(--ink); border-radius: 0; cursor: pointer; display: grid; height: 1.1rem; margin: .16rem 0 0; place-content: center; width: 1.1rem; transition: background .2s, border-color .2s; }
.birthday-consent input::after { border: solid var(--accent-ink); border-width: 0 2px 2px 0; content: ''; height: .52rem; margin-top: -.12rem; transform: rotate(45deg) scale(0); transition: transform .25s var(--ease-out); width: .28rem; }
.birthday-consent input:checked { background: var(--accent); border-color: var(--accent); }
.birthday-consent input:checked::after { transform: rotate(45deg) scale(1); }
.birthday-consent:hover input:not(:checked) { border-color: var(--accent); }
.birthday-private { align-items: baseline; color: var(--ink-soft); display: flex; font-size: .8rem; gap: .7rem; line-height: 1.6; margin: 0 0 1.5rem; }
.birthday-private b { border: 1px solid var(--accent); color: var(--accent); flex-shrink: 0; font: 600 .58rem/1 var(--mono); letter-spacing: .03em; padding: .2rem .35rem; text-transform: uppercase; }
.birthday-verification:not(:empty) { margin: 0 0 1rem; }

.birthday-send { align-items: center; background: var(--ink); border: 1px solid var(--ink); border-radius: 0; color: var(--bg); cursor: pointer; display: flex; font-family: var(--display); font-size: clamp(1.7rem,3.4vw,2.9rem); font-stretch: 75%; font-weight: 800; justify-content: space-between; line-height: 1; overflow: hidden; padding: 1.05rem 1.3rem 1.15rem; position: relative; text-align: left; text-transform: uppercase; width: 100%; transition: background .2s, border-color .2s, color .2s, box-shadow .3s var(--ease-out), transform .3s var(--ease-out); }
html[lang="zh"] .birthday-send { letter-spacing: .04em; }
.birthday-send .arr { color: var(--accent); display: inline-block; font-size: .7em; transition: transform .35s var(--ease-out), color .2s; }
.birthday-send:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); box-shadow: 6px 6px 0 var(--ink); color: var(--accent-ink); transform: translate(-3px,-3px); }
.birthday-send:hover:not(:disabled) .arr { color: inherit; transform: translate(.15em,-.15em); }
.birthday-send:active:not(:disabled) { box-shadow: none; transform: none; }
.birthday-send:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.birthday-send:disabled { cursor: not-allowed; opacity: .38; }
.birthday-form[data-busy="true"] .birthday-send { cursor: progress; opacity: 1; }
.birthday-form[data-busy="true"] .birthday-send::after { animation: bd-progress 1.1s var(--ease-out) infinite; background: var(--accent); bottom: 0; content: ''; height: 4px; left: 0; position: absolute; width: 100%; transform-origin: left; }

.birthday-status { color: var(--accent); font: .8rem/1.65 var(--mono); margin-top: 1rem; overflow-wrap: anywhere; }
.birthday-status:empty { margin: 0; }
.birthday-status[data-error="true"] { border-left: 2px solid var(--accent); color: var(--ink); padding-left: .75rem; }
.birthday-status[data-kind="sent"] { position: absolute; height: 1px; width: 1px; overflow: hidden; clip-path: inset(50%); }

/* ── receipt ────────────────────────────────────────────── */
.birthday-receipt[hidden] { display: none; }
.birthday-receipt { border-top: 1px solid var(--ink); outline: 0; padding-top: 1rem; scroll-margin-top: calc(var(--bar) + 1.5rem); }
.receipt-kicker { color: var(--accent); font: 600 .7rem/1.6 var(--mono); letter-spacing: .02em; text-transform: uppercase; }
.receipt-kicker b { animation: bd-pulse 1.6s steps(2) 3; font-size: .6rem; }
.receipt-title { font-family: var(--display); font-size: clamp(4rem,10vw,8.5rem); font-stretch: 75%; font-weight: 800; letter-spacing: -.02em; line-height: .84; margin: 1.2rem 0 1.4rem -.04em; text-transform: uppercase; }
.receipt-title em { color: var(--accent); font-style: normal; }
html[lang="zh"] .receipt-title { letter-spacing: 0; line-height: 1; }
.birthday-receipt:not([hidden]) .receipt-title > span { animation: pour 1.25s var(--ease-expo) both; display: inline-block; }
html[lang="zh"] .birthday-receipt:not([hidden]) .receipt-title > span { animation-name: rise-cjk; }
.receipt-note { color: var(--ink-soft); font-family: var(--serif); font-size: clamp(1.15rem,1.7vw,1.4rem); line-height: 1.55; max-width: 32ch; margin-bottom: 2rem; }
html[lang="zh"] .receipt-note { max-width: 22em; }
.receipt-block { animation: block-in .9s var(--ease-expo) .25s both; border: 1.5px solid var(--ink); display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); margin-bottom: 1.75rem; }
.receipt-block > div { border-bottom: 1px solid var(--border-strong); border-right: 1px solid var(--border-strong); grid-column: span 2; min-width: 0; padding: .5rem .65rem .6rem; }
.receipt-block > div:nth-child(1), .receipt-block > div:nth-child(2) { grid-column: span 3; }
.receipt-block > div:nth-child(2), .receipt-block > div:nth-child(5) { border-right: 0; }
.receipt-block > div:nth-child(n+3) { border-bottom: 0; }
.receipt-block dt { color: var(--ink-faint); font: 500 .58rem/1.4 var(--mono); letter-spacing: .03em; margin-bottom: .2rem; text-transform: uppercase; }
.receipt-block dd { color: var(--ink); font: 600 .82rem/1.5 var(--mono); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.receipt-block > div:first-child dd { color: var(--accent); }

/* ── word cloud ─────────────────────────────────────────── */
.birthday-cloud { border-top: 1px solid var(--ink); display: flex; flex-direction: column; min-width: 0; position: sticky; top: calc(var(--bar) + 1.5rem); }
.birthday-cloud-head { align-items: baseline; display: flex; font: 500 .7rem/1 var(--mono); justify-content: space-between; letter-spacing: .02em; padding: .8rem 0; text-transform: uppercase; }
.birthday-cloud-head b { color: var(--accent); font-weight: 600; }
.birthday-cloud-count { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.birthday-cloud-words { align-content: flex-start; align-items: baseline; display: flex; flex-wrap: wrap; gap: .35rem .85rem; min-height: 14rem; padding: 1rem 0 1.75rem; }
.birthday-cloud-words:empty { display: none; }
.birthday-cloud-words > span { color: var(--ink); font-family: var(--display); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; max-width: 100%; overflow-wrap: anywhere; padding: 0 .08em; transition: background .2s, color .2s; }
.birthday-cloud-words > span:nth-child(3n+1) { color: var(--accent); }
.birthday-cloud-words > span:hover { background: var(--accent); color: var(--accent-ink); }
.birthday-cloud-words sup { color: var(--ink-faint); font: 500 max(.6rem,.28em)/1 var(--mono); letter-spacing: 0; margin-left: .15em; vertical-align: super; }
.birthday-cloud-words > span:hover sup { color: inherit; }
.birthday-cloud-words[data-enter="1"] > span { animation: bd-rise .7s var(--ease-out) both; animation-delay: calc(var(--i) * 45ms); }
.birthday-cloud-empty[hidden] { display: none; }
.birthday-cloud-empty { padding: 1rem 0 1.75rem; }
.cloud-frames { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.4rem; }
.cloud-frames i { border: 1.5px dashed var(--border-strong); height: 2.1rem; width: calc(var(--w) * 1.25rem); }
.cloud-frames i:nth-child(2n) { height: 1.6rem; }
.cloud-frames i:nth-child(3) { border-color: var(--accent); opacity: .55; }
.birthday-cloud-empty p { color: var(--ink-soft); font-family: var(--serif); font-size: 1.1rem; line-height: 1.6; max-width: 26ch; }
html[lang="zh"] .birthday-cloud-empty p { max-width: 16em; }
.birthday-cloud-foot { border-top: 1px solid var(--border); color: var(--ink-faint); font: 500 .62rem/1.6 var(--mono); letter-spacing: .02em; padding-top: .8rem; text-transform: uppercase; }

/* ── motion ─────────────────────────────────────────────── */
@keyframes bd-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes bd-pulse { 50% { opacity: 0; } }
@keyframes bd-progress { 0% { transform: scaleX(0); opacity: 1; } 70% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

/* ── small screens ──────────────────────────────────────── */
@media (max-width: 1080px) {
  .birthday-columns { grid-template-columns: 1fr; }
  .birthday-cloud { position: static; }
  .birthday-cloud-words { min-height: 0; }
}
@media (max-width: 860px) {
  .birthday-page .page-kicker { flex-direction: column; justify-content: flex-start; }
  .birthday-page-content { row-gap: 0; }
  .birthday-rail { display: contents; }
  .birthday-back { grid-column: 1 / -1; margin-bottom: 1.5rem; }
  .birthday-availability, .birthday-page-content > .birthday-inbox { grid-column: 1 / -1; }
  .birthday-steps { grid-column: 1 / -1; grid-row: 4; margin-top: clamp(2.5rem,8vw,4rem); position: static; }
}
@media (max-width: 520px) {
  .letter-head { grid-template-columns: minmax(0,1fr) minmax(0,1.3fr); }
  .letter-from { border-right: 0 !important; border-top: 1px solid var(--border-strong); grid-column: 1 / -1; grid-row: 2; }
  .letter-head > div:first-child { border-right: 1px solid var(--border-strong); }
  .letter-head input { font-size: 1rem; }
  .letter-body textarea { font-size: 1.06rem; }
  .letter-hint { display: none; }
  .birthday-send { padding: 1rem 1.1rem 1.1rem; }
  .receipt-block > div, .receipt-block > div:nth-child(1), .receipt-block > div:nth-child(2) { grid-column: span 3; border-right: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); }
  .receipt-block > div:nth-child(1) { grid-column: 1 / -1; border-right: 0; }
  .receipt-block > div:nth-child(odd):not(:first-child) { border-right: 0; }
  .receipt-block > div:last-child { border-bottom: 0; }
  .receipt-block > div:nth-last-child(2) { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .birthday-inbox *, .birthday-inbox *::before, .birthday-inbox *::after, .birthday-entry .arr, .birthday-inbox[data-enter] { animation: none !important; transition: none !important; }
  .birthday-countdown::before, .birthday-entry-note::before, .birthday-availability::after { animation: none; }
  .letter:focus-within { transform: none; }
}