/* Profile page ('#/profile', profile.js) — a postal treatment: the picture is a perforated
   stamp, each letter an envelope with its status as a postmark. Page chrome follows the
   atelier tokens (--at-*) in light and dark; the envelopes are paper, so their colours are
   fixed. No entrance animations: the page is rebuilt on every setState, and a load-in
   effect would replay on each click. */
.pf-inner{max-width:1160px;margin:auto;padding:36px 40px 96px}

/* ── Round avatar (header account button) ── */
.pf-avatar{position:relative;display:grid;place-items:center;border-radius:50%;overflow:hidden;flex-shrink:0}
.pf-avatar svg{width:64%;height:64%}

/* ── Postage stamp ──
   Perforation: a tile of --t with a hole of radius --r centred on each tile corner, unioned
   with an opaque content box, so holes only show in the padding ring. Every stamp size is an
   exact multiple of --t, which is what centres the holes on all four edges. The shadow sits
   on the wrapper because a filter on the masked element itself would be masked away. */
.pf-stamp-wrap{position:relative;display:inline-block;flex-shrink:0;filter:drop-shadow(0 12px 14px rgba(20,6,14,.35)) drop-shadow(0 2px 3px rgba(20,6,14,.25))}
.pf-stamp{--r:4px;--t:12px;display:block;box-sizing:border-box;width:100%;height:100%;padding:calc(var(--r)*1.6);background:#fbf5ec;
  -webkit-mask:radial-gradient(circle var(--r) at center,#0000 96%,#000) calc(var(--t)/-2) calc(var(--t)/-2)/var(--t) var(--t),linear-gradient(#000 0 0) content-box;
  -webkit-mask-composite:source-over;
  mask:radial-gradient(circle var(--r) at center,#0000 96%,#000) calc(var(--t)/-2) calc(var(--t)/-2)/var(--t) var(--t),linear-gradient(#000 0 0) content-box;
  mask-composite:add}
.pf-stamp-face{position:relative;display:grid;place-items:center;width:100%;height:100%;box-sizing:border-box;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(60,30,40,.14)}
.pf-stamp-face:after{content:'';position:absolute;inset:5px;border:1px solid rgba(255,255,255,.4);pointer-events:none}
.pf-stamp-art{display:grid;place-items:center;width:62%;aspect-ratio:1}
.pf-stamp-art svg{width:100%;height:100%;filter:drop-shadow(0 2px 2px rgba(0,0,0,.14))}
.pf-stamp-face.is-initial{background:linear-gradient(145deg,#f6dfe6,#e7b9c8)}
.pf-stamp-initial{font:400 62px/1 'Cormorant Garamond',serif;color:#7a3552}
.pf-stamp-caption{position:absolute;left:0;right:0;bottom:9px;text-align:center;font:500 8px 'Jost',sans-serif;letter-spacing:.24em;color:rgba(40,20,30,.62)}
.pf-stamp-wrap.is-lg{width:132px;height:156px;transform:rotate(-3deg)}
.pf-stamp-wrap.is-md{width:72px;height:84px}
.pf-stamp-wrap.is-md .pf-stamp{--r:3px;--t:12px;padding:5px}
.pf-stamp-wrap.is-md .pf-stamp-face:after{inset:3px}
.pf-stamp-wrap.is-sm{width:36px;height:45px;filter:drop-shadow(0 2px 2px rgba(40,20,30,.22))}
.pf-stamp-wrap.is-sm .pf-stamp{--r:2px;--t:9px;padding:3px}
.pf-stamp-wrap.is-sm .pf-stamp-face:after{display:none}

/* ── Hero: the stamp beside a large name, on the open page ── */
.pf-hero{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:44px;padding:30px 4px 44px;border-bottom:1px solid var(--at-line)}
.pf-hero-text{min-width:0}
.pf-hero-text .at-eyebrow{margin-bottom:4px}
.pf-page .pf-hero h1{margin:0;font-size:clamp(46px,6vw,82px);line-height:1.02;overflow-wrap:anywhere}
.pf-summary{margin:12px 0 0;font:italic 400 clamp(19px,2vw,24px)/1.4 'Cormorant Garamond',serif;color:var(--at-muted)}
.pf-summary b{font:500 1.05em 'Cormorant Garamond',serif;font-style:normal;color:var(--at-ink);font-variant-numeric:lining-nums tabular-nums}
.pf-summary i{margin:0 12px;font-style:normal;color:var(--at-accent);opacity:.7}
.pf-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:20px}
.pf-meta-text{font:12.5px 'Jost',sans-serif;color:var(--at-muted);overflow-wrap:anywhere}
.pf-chip{font:500 10px 'Jost',sans-serif;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--at-line);border-radius:999px;padding:6px 12px;color:var(--at-muted)}
.pf-chip.is-premium{color:#5a3d0c;background:linear-gradient(135deg,#f7e4b0,#e2b861);border-color:transparent}

/* ── Sections ── */
.pf-section{margin-top:60px}
.pf-section-head{margin-bottom:18px}
.pf-section-head .at-eyebrow{margin-bottom:8px}
.pf-page .pf-section-head h2{margin:0;font-size:clamp(32px,3.4vw,44px);text-wrap:balance}
.pf-tabs{display:flex;gap:26px;margin-bottom:30px;border-bottom:1px solid var(--at-line);overflow-x:auto;scrollbar-width:none}
.pf-tab{position:relative;flex-shrink:0;padding:10px 0 13px;border:0;background:transparent;color:var(--at-muted);font:13px 'Jost',sans-serif;cursor:pointer;transition:color .2s}
.pf-tab:hover{color:var(--at-ink)}
.pf-tab.is-active{color:var(--at-ink)}
.pf-tab.is-active:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--at-accent)}
.pf-tab small{margin-left:4px;font-size:10px;vertical-align:super;color:var(--at-accent);font-variant-numeric:tabular-nums}
.pf-page .pf-tab:focus-visible{outline-offset:2px}

/* ── Letters as envelopes ── */
.pf-letters{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:34px 26px}
.pf-letter{display:flex;flex-direction:column;min-width:0}
.pf-env{--paper:#f6e9e6;--flap:rgba(90,40,55,.13);--ink:#4a2a38;--soft:#8c6a77;position:relative;min-height:196px;border-radius:5px;background:var(--paper);color:var(--ink);overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 4px -2px rgba(20,6,14,.4),0 22px 34px -22px rgba(20,6,14,.75);transition:transform .35s cubic-bezier(.2,.8,.3,1)}
.pf-env.tone-1{--paper:#f5ecdc;--flap:rgba(110,80,40,.14)}
.pf-env.tone-2{--paper:#e9eddf;--flap:rgba(60,80,50,.14)}
.pf-env.tone-3{--paper:#ede6f1;--flap:rgba(80,60,100,.14)}
.pf-letter:hover .pf-env{transform:translateY(-4px) rotate(-.5deg)}
/* Flap: two diagonal folds meeting a little above the middle. */
.pf-env-flap{position:absolute;left:0;right:0;top:0;height:58%;pointer-events:none;
  background:linear-gradient(to top right,transparent calc(50% - .6px),var(--flap) 50%,transparent calc(50% + .6px)) left top/50% 100% no-repeat,
             linear-gradient(to top left,transparent calc(50% - .6px),var(--flap) 50%,transparent calc(50% + .6px)) right top/50% 100% no-repeat}
.pf-env>.pf-stamp-wrap{position:absolute;top:14px;right:16px;transform:rotate(4deg)}
.pf-postmark{position:absolute;top:18px;right:48px;display:grid;place-content:center;gap:2px;width:72px;height:72px;border:2px solid currentColor;border-radius:50%;text-align:center;transform:rotate(-14deg);opacity:.72;pointer-events:none}
.pf-postmark:before{content:'';position:absolute;inset:5px;border:1px solid currentColor;border-radius:50%;opacity:.6}
.pf-postmark b{font:600 8.5px 'Jost',sans-serif;letter-spacing:.14em}
.pf-postmark span{font:500 9px 'Jost',sans-serif;letter-spacing:.08em}
.pf-postmark.is-shared{color:#3f7a52}
.pf-postmark.is-archived{color:#9a6a1f}
.pf-env-pencil{position:absolute;top:26px;right:66px;font:italic 400 19px 'Cormorant Garamond',serif;color:var(--soft);transform:rotate(-5deg);pointer-events:none}
.pf-letter.is-archived .pf-env{filter:saturate(.6)}
.pf-env-address{position:absolute;left:22px;right:22px;bottom:18px}
.pf-env h3{margin:0 0 8px;font:500 24px/1.12 'Cormorant Garamond',serif;color:var(--ink);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pf-env-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin:0;padding-top:8px;border-top:1px solid rgba(74,42,56,.18);font:11px 'Jost',sans-serif;color:var(--soft)}
.pf-status{display:inline-flex;align-items:center;gap:6px;font-weight:500;letter-spacing:.02em}
.pf-status i{width:6px;height:6px;border-radius:50%;background:currentColor}
.pf-status.is-shared{color:#3f7a52}
.pf-status.is-archived{color:#8f621c}
.pf-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:14px 2px 0}
.pf-actions .at-button{min-height:34px;padding:7px 13px;font-size:11.5px;gap:6px}
.pf-lock{color:#d7a93f;font-size:12px}
.pf-danger{margin-left:auto}
.pf-page .pf-danger:hover,.pf-page .pf-danger.is-armed{border-color:#e06a6a;color:#f08a8a;background:rgba(224,106,106,.1)}
.pf-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:18px;margin:0;padding:52px 20px;text-align:center;border:1px dashed var(--at-line);border-radius:14px;color:var(--at-muted);font:italic 21px/1.5 'Cormorant Garamond',serif}
.pf-empty p{margin:0;max-width:44ch}

/* ── Premium: the one gold object on the page ── */
.pf-promo{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:36px;margin-top:72px;padding:40px 44px;border-radius:22px;
  background:radial-gradient(120% 140% at 0% 0%,#6a4420 0%,#3f2712 45%,#24160a 100%);border:1px solid #c9992e59;color:#f7e9cf;box-shadow:0 30px 60px -34px #000c}
.pf-promo-copy{display:flex;align-items:flex-start;gap:28px}
.pf-stamp-wrap.is-gold{width:96px;height:120px;margin-top:6px;transform:rotate(-4deg);filter:drop-shadow(0 14px 16px rgba(0,0,0,.45))}
.pf-stamp-wrap.is-gold .pf-stamp{background:#f3dfae}
.pf-stamp-wrap.is-gold .pf-stamp-face{background:linear-gradient(150deg,#6b4518,#3a230c);color:#f2d493;box-shadow:inset 0 0 0 1px #f2d49355}
.pf-stamp-wrap.is-gold .pf-stamp-face:after{border-color:#f2d49340}
.pf-stamp-wrap.is-gold b{font:400 40px/1 'Cormorant Garamond',serif;margin-top:-10px}
.pf-stamp-wrap.is-gold .pf-stamp-caption{color:#f2d493;letter-spacing:.22em}
.pf-promo .at-eyebrow{color:#f2d493;margin-bottom:10px}
.pf-page .pf-promo h2{margin:0 0 12px;font:400 clamp(32px,3.4vw,46px)/1.08 'Cormorant Garamond',serif;color:#fff6e4;text-wrap:balance}
.pf-promo h2 em{font:400 1.18em 'Great Vibes',cursive;color:#f2d493}
.pf-promo-copy p:not(.at-eyebrow){margin:0;max-width:44ch;font:13px/1.8 'Jost',sans-serif;color:#e6d0aa}
.pf-promo-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;margin-top:24px}
.pf-page .pf-promo-cta{border:0;background:linear-gradient(135deg,#f9e7b8,#e0b35a);color:#3a2405;font-weight:500}
.pf-page .pf-promo-cta:hover{background:linear-gradient(135deg,#fcefcb,#e8be68)}
.pf-promo-price{font:12px 'Jost',sans-serif;color:#d6bd94}
.pf-promo-list{display:grid;gap:14px;margin:0;padding:22px 24px;list-style:none;background:#ffffff0d;border:1px solid #f2d49326;border-radius:16px}
.pf-promo-list li{display:grid;grid-template-columns:16px 1fr;column-gap:10px;font:13px/1.45 'Jost',sans-serif}
.pf-promo-list li:before{content:'✦';grid-row:span 2;color:#f2d493;font-size:12px;line-height:1.6}
.pf-promo-list b{font-weight:500;color:#fff3dc}
.pf-promo-list span{font-size:12px;color:#d6bd94}

/* ── Settings ── */
.pf-settings{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.pf-stack{display:flex;flex-direction:column;gap:18px}
.pf-panel{margin:0;padding:28px 30px;background:var(--at-surface);border:1px solid var(--at-line);border-radius:16px}
.pf-panel h3{margin:0 0 6px;font:500 27px 'Cormorant Garamond',serif;color:var(--at-ink)}
.pf-panel>p{margin:0 0 22px;font:12.5px/1.7 'Jost',sans-serif;color:var(--at-muted)}
/* The picture chooser is a sheet of stamps. */
.pf-stamp-sheet{display:grid;grid-template-columns:repeat(4,1fr);gap:20px 10px;padding:20px 12px;border-radius:10px;background:rgba(var(--at-accent-rgb,229,173,196),.06);border:1px dashed var(--at-line)}
.pf-avatar-choice{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:4px 0;border:0;background:transparent;color:var(--at-muted);font:11px 'Jost',sans-serif;cursor:pointer}
.pf-avatar-choice .pf-stamp-wrap{transition:transform .25s cubic-bezier(.2,.8,.3,1)}
.pf-avatar-choice:hover .pf-stamp-wrap{transform:translateY(-3px) rotate(-3deg)}
.pf-avatar-choice[aria-checked=true] .pf-stamp-wrap{transform:rotate(-4deg)}
.pf-avatar-choice[aria-checked=true] .pf-choice-name{color:var(--at-ink);font-weight:500}
.pf-choice-check{position:absolute;top:-4px;left:calc(50% + 24px);display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--at-accent);color:var(--at-accent-text);font:600 12px/1 'Jost',sans-serif;box-shadow:0 0 0 3px var(--at-surface)}
.pf-page .pf-avatar-choice:focus-visible{outline-offset:2px;border-radius:8px}
.pf-field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pf-field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;min-width:0}
.pf-field label{font:500 9.5px 'Jost',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--at-muted)}
.pf-field input{width:100%;box-sizing:border-box;padding:12px 14px;font:15px 'Jost',sans-serif;color:var(--at-ink);background:var(--at-surface2);border:1px solid var(--at-line);border-radius:10px;outline:none;transition:border-color .2s,box-shadow .2s}
.pf-field input::placeholder{color:var(--at-muted);opacity:.7}
.pf-field input:focus{border-color:var(--at-accent);box-shadow:0 0 0 3px rgba(var(--at-accent-rgb,229,173,196),.2)}
.pf-msg{min-height:18px;margin:12px 0 0;font:12px 'Jost',sans-serif}
.pf-msg.is-ok{color:#86c297}
.pf-msg.is-err{color:#f08a8a}
.pf-signout{margin-top:52px;padding-top:32px;border-top:1px solid var(--at-line);text-align:center}
.pf-gate{max-width:560px;margin:64px auto;text-align:center}
.pf-gate .at-lead{margin:0 auto 28px}
.pf-gate>.pf-stamp-wrap{margin-bottom:18px}

/* Light mode: pale ground, so envelopes get an edge and warmer shadows. */
html[data-mode=light] .pf-env{box-shadow:inset 0 0 0 1px rgba(90,40,55,.08),0 2px 4px -2px rgba(120,60,50,.28),0 22px 34px -24px rgba(120,60,50,.55)}
html[data-mode=light] .pf-stamp-wrap{filter:drop-shadow(0 10px 12px rgba(120,60,50,.28)) drop-shadow(0 2px 3px rgba(120,60,50,.2))}
html[data-mode=light] .pf-stamp-wrap.is-sm{filter:drop-shadow(0 2px 2px rgba(80,40,40,.22))}
html[data-mode=light] .pf-msg.is-ok{color:#2f7d4b}
html[data-mode=light] .pf-msg.is-err,html[data-mode=light] .pf-page .pf-danger:hover,html[data-mode=light] .pf-page .pf-danger.is-armed{color:#b73a3a}

@media(max-width:980px){
 .pf-promo{grid-template-columns:1fr;gap:26px}
 .pf-settings{grid-template-columns:1fr}
}
@media(max-width:600px){
 .pf-inner{padding:20px 18px 72px}
 .pf-hero{grid-template-columns:1fr;justify-items:center;gap:22px;padding:24px 0 34px;text-align:center}
 .pf-stamp-wrap.is-lg{width:108px;height:132px}
 .pf-summary i{margin:0 8px}
 .pf-meta{justify-content:center}
 .pf-section{margin-top:46px}
 .pf-tabs{gap:20px}
 .pf-letters{grid-template-columns:1fr}
 .pf-promo{margin-top:52px;padding:30px 22px}
 .pf-promo-copy{flex-direction:column;gap:18px}
 .pf-panel{padding:22px 20px}
 .pf-stamp-sheet{gap:18px 6px;padding:16px 6px}
 .pf-field-row{grid-template-columns:1fr;gap:0}
}
@media(prefers-reduced-motion:reduce){
 .pf-env,.pf-avatar-choice .pf-stamp-wrap,.pf-tab,.pf-field input{transition:none}
 .pf-letter:hover .pf-env,.pf-avatar-choice:hover .pf-stamp-wrap{transform:none}
}

/* "Password" chip on a live share link (see letterCard). Deliberately quiet — it reports
   a fact about the link, it isn't an action, so it stays lighter than the status pill it
   sits beside. The lock is drawn in CSS rather than set as an emoji so it inherits the
   text colour and can't render as a colour glyph on one platform and a glyph on another. */
.pf-lock{display:inline-flex;align-items:center;gap:5px;padding:2px 9px 2px 7px;border:1px solid rgba(74,42,56,.28);border-radius:999px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--soft);white-space:nowrap}
.pf-lock::before{content:'';width:7px;height:6px;border:1.2px solid currentColor;border-radius:1.5px;box-shadow:inset 0 0 0 10px transparent;position:relative;top:1px}
.pf-lock::after{content:'';width:5px;height:4px;border:1.2px solid currentColor;border-bottom:none;border-radius:3px 3px 0 0;margin-left:-10px;margin-right:4px;position:relative;top:-3px}