/* The warm paper and dark ink are intentional material colors, scoped to correspondence. */
.home-letter-entry { position:absolute; z-index:5; right:48px; top:84px; display:flex; align-items:center; gap:8px; min-height:64px; max-width:calc(100% - 24px); padding:8px 12px; border:1px solid var(--letter-edge); border-radius:4px; background-color:var(--letter-paper); background-image:var(--letter-grain); background-size:144px 144px; background-blend-mode:multiply; color:var(--letter-ink); box-shadow:0 3px 9px #0005; font:inherit; text-align:left; }
.home-letter-envelope {
  position:relative; width:48px; height:34px; flex:none;
  border:1px solid var(--letter-edge); border-radius:2px;
  background-color:var(--letter-paper);
  background-image:var(--letter-grain),linear-gradient(155deg,transparent 49%,rgb(168 143 99 / 50%) 50%,transparent 52%),linear-gradient(205deg,#fbf6e9 49%,#cfbc95 50%,#eee1c6 52%);
  background-size:144px 144px,100% 100%,100% 100%;
  background-blend-mode:multiply,normal,normal;
  box-shadow:0 2px 3px #43352526;
}
.home-letter-envelope i { position:absolute; left:15px; top:12px; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:#7e3d32; color:#f9e8c7; font-size:var(--ga-font-caption, .6875rem); font-style:normal; box-shadow:inset 0 0 0 2px #f2d0a838; }
.home-letter-entry:not(.has-new-letters) .home-letter-envelope i { opacity:.5; }
.home-letter-entry-copy { display:grid; gap:4px; overflow-wrap:anywhere; }
.home-letter-entry-copy strong { font-size:var(--ga-font-body, .875rem); }
.home-letter-entry-copy small { font-size:var(--ga-font-note, .75rem); }
.home-letter-entry.has-new-letters::after { content:""; position:absolute; right:-4px; top:-4px; width:10px; height:10px; background:#b33d32; border:2px solid #eee1bf; border-radius:50%; }
.home-screen:not(.home-town-screen) > .home-letter-entry { position:relative; inset:auto; margin:12px 0; }
body.home-letter-modal-open { overflow:hidden; }
.home-letter-dialog { --letter-paper:#f1e5c8; --letter-ink:#443528; box-sizing:border-box; width:min(560px,calc(100vw - 24px)); max-height:calc(100dvh - 32px); padding:0; border:1px solid #ad9161; border-radius:4px; color:var(--letter-ink); background:var(--letter-paper); box-shadow:0 18px 70px #0008; overflow:hidden; }
.home-letter-dialog[open] { display:flex; flex-direction:column; }
.home-letter-dialog::backdrop { background:#17120ed1; }
.home-letter-heading { display:flex; align-items:flex-start; justify-content:space-between; flex-shrink:0; gap:8px; padding:16px 16px 12px; border-bottom:1px solid #88714a55; background:linear-gradient(100deg,#e2cea555,transparent); }
.home-letter-heading > div { min-width:0; }
.home-letter-heading p { margin:0 0 4px; font-size:var(--ga-font-note); color:#6c563e; }
.home-letter-heading h2 { margin:0; font-size:var(--ga-font-page); overflow-wrap:anywhere; }
.home-letter-heading .text-button { flex:none; color:var(--letter-ink); min-width:44px; }
.home-letter-scroll { overflow-y:auto; overscroll-behavior:contain; min-height:0; padding:12px 16px; }
:is(.home-letter-dialog, .home-letter-entry) {
  --letter-paper:#f4ecd7;
  --letter-ink:#46382a;
  --letter-muted:#6b563e;
  --letter-edge:#cbb88c;
  --letter-hover:#eee1c3;
  --letter-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='144' height='144'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.09' filter='url(%23grain)'/%3E%3C/svg%3E");
}

/* The sheet keeps its paper and ink colours across UI themes. Texture is a small,
   tiled SVG background, so it needs no image request or animation. */
.home-letter-paper {
  position:relative;
  padding:24px 22px 26px;
  border:1px solid var(--letter-edge);
  border-radius:2px;
  background-color:var(--letter-paper);
  background-image:var(--letter-grain),
    linear-gradient(90deg,transparent 48.8%,rgb(137 105 55 / 6%) 49.8%,rgb(255 255 255 / 36%) 50.2%,transparent 51.2%),
    radial-gradient(ellipse at 20% 0%,rgb(255 253 242 / 74%),transparent 70%),
    linear-gradient(90deg,rgb(142 111 58 / 7%),transparent 5% 94%,rgb(142 111 58 / 9%));
  background-size:144px 144px,100% 100%,100% 100%,100% 100%;
  background-repeat:repeat,no-repeat,no-repeat,no-repeat;
  background-blend-mode:multiply,normal,normal,normal;
  box-shadow:inset 0 1px 0 #fff9,inset 0 0 28px rgb(139 102 43 / 7%),0 2px 5px rgb(0 0 0 / 11%);
  color:var(--letter-ink);
  font-size:var(--ga-font-body);
  line-height:1.95;
  overflow-wrap:anywhere;
}
.home-letter-paper p { margin:0 0 16px; color:var(--letter-ink); }
.home-letter-paper-rule { display:block; width:48px; height:2px; background:#927348; margin:0 0 20px; }
.home-letter-paper .home-letter-salutation { color:var(--letter-muted); font-size:var(--ga-font-note); }
.home-letter-paper .home-letter-signature { text-align:right; margin-top:24px; }
.home-letter-actions { display:flex; flex-direction:column; flex-shrink:0; gap:8px; padding:12px 16px 16px; border-top:1px solid #88714a55; }
.home-letter-actions button { width:100%; white-space:normal; overflow-wrap:anywhere; }
.home-letter-list { display:grid; gap:10px; }
.home-letter-tabs { flex-shrink:0; margin:8px 16px 0; }
.home-letter-dialog :is(#home-letter-tab-unread, #home-letter-tab-read) { min-width:0; border-color:var(--letter-edge); border-radius:2px; background:var(--letter-paper); color:var(--letter-ink); font-size:var(--ga-font-body); }
.home-letter-dialog :is(#home-letter-tab-unread, #home-letter-tab-read)[aria-selected="true"] { border-color:var(--letter-ink); background:var(--letter-hover); color:var(--letter-ink); box-shadow:inset 0 -2px var(--letter-ink); font-weight:700; }
.home-letter-retention { flex-shrink:0; margin:8px 16px 0; color:var(--letter-muted); font-size:var(--ga-font-note); }
.home-letter-pagination { display:flex; align-items:center; gap:8px; }
.home-letter-dialog .home-letter-pagination button { flex:1; width:auto; min-width:0; }
.home-letter-pagination > span { flex:none; color:var(--letter-ink); font-size:var(--ga-font-note); }
.home-letter-dialog .home-letter-list-item {
  display:flex; align-items:center; gap:12px; width:100%; min-height:64px; padding:14px 12px;
  border:1px solid var(--letter-edge); border-radius:2px;
  background-color:var(--letter-paper);
  background-image:var(--letter-grain),linear-gradient(110deg,rgb(255 253 242 / 46%),transparent 65%);
  background-size:144px 144px,100% 100%; background-blend-mode:multiply,normal;
  box-shadow:inset 0 1px 0 #fff9,0 2px 4px rgb(44 31 16 / 13%);
  color:var(--letter-ink); text-align:left; font:inherit;
}
.home-letter-dialog .home-letter-list-item:hover:not(:disabled) { background-color:var(--letter-hover); border-color:#b2996d; }
.home-letter-dialog .home-letter-list-item:is(:active,.button-pressing) { background-color:var(--letter-hover); box-shadow:inset 0 2px 5px rgb(92 66 29 / 12%); }
.home-letter-dialog .home-letter-list-item:focus-visible { outline:3px solid var(--letter-ink); outline-offset:-4px; }
.home-letter-dialog .home-letter-scroll:focus-visible { outline:3px solid var(--letter-ink); outline-offset:-3px; }
html[data-color-theme]:not([data-color-theme="default"]) .home-letter-dialog .home-letter-scroll:focus-visible { outline-color:var(--gold-strong); }
.home-letter-list-item > span:nth-child(2) { display:grid; gap:4px; min-width:0; flex:1; }
.home-letter-list-item strong { font-size:var(--ga-font-body); overflow-wrap:anywhere; }
.home-letter-list-item small { color:var(--letter-muted); font-size:var(--ga-font-note); }
.home-letter-list-mark { font-size:var(--ga-font-page); flex:none; color:#85663e; }
.home-letter-empty { margin:0; padding:16px; border:1px solid var(--letter-edge); border-radius:2px; background-color:var(--letter-paper); background-image:var(--letter-grain); background-size:144px 144px; background-blend-mode:multiply; color:var(--letter-ink); font-size:var(--ga-font-body); line-height:1.8; }
.home-letter-save-status { display:flex; align-items:center; flex-wrap:wrap; gap:8px; min-height:24px; font-size:var(--ga-font-note); color:#6c563e; }
.home-letter-dialog button:focus-visible,.home-letter-entry:focus-visible { outline:3px solid #a06b28; outline-offset:2px; }
.home-letter-notification small { display:block; }
@media(max-width:360px) { .home-letter-entry { top:88px; right:48px; padding:8px; } .home-letter-entry-copy small { display:none; } .home-letter-heading { padding:12px 12px 8px; } .home-letter-scroll { padding:8px 12px; } .home-letter-actions { padding:8px 12px 12px; } }
@media(max-width:360px) { .home-letter-paper { padding:20px 16px 22px; } }

/* A small physical envelope on the background's tabletop; the transparent hit area stays 44px. */
.home-letter-entry.is-on-table { z-index:1800; left:var(--home-letter-x); top:var(--home-letter-y); right:auto; display:grid; place-items:center; width:44px; height:44px; min-width:44px; min-height:44px; max-width:none; margin:0; padding:0; border:0; border-radius:3px; overflow:visible; background:transparent; box-shadow:none; transform:translate(-50%,-50%); }
/* Keep the tabletop anchor ahead of the shared button press/pop transforms. */
.home-town-home .home-town-scene button.home-letter-entry.is-on-table:not(:disabled):is(:hover,:active,.button-pressing,.button-confirmed) { background:transparent; transform:translate(-50%,-50%); box-shadow:none; animation:none; }
.home-letter-entry.is-on-table.button-confirmed::after { animation:none; }
.home-letter-entry.is-on-table .home-letter-envelope { display:block; width:var(--home-letter-paper-width); height:calc(var(--home-letter-paper-width) * .66); transform:perspective(160px) rotateX(40deg) rotateZ(-12deg); box-shadow:1px 4px 3px #25180875,0 1px 1px #25180880; }
.home-letter-entry.is-on-table .home-letter-envelope i { left:34%; top:32%; width:30%; height:auto; aspect-ratio:1; font-size:.5rem; }
.home-letter-entry.is-on-table .home-letter-entry-copy { position:absolute; top:calc(100% - 7px); left:50%; transform:translateX(-50%); display:block; width:max-content; max-width:110px; padding:3px 7px; border:1px solid var(--letter-edge); border-radius:3px; background-color:var(--letter-paper); background-image:var(--letter-grain); background-size:144px 144px; background-blend-mode:multiply; color:var(--letter-ink); box-shadow:0 2px 5px #10090466; }
.home-letter-entry.is-on-table .home-letter-entry-copy strong { display:block; font-size:var(--ga-font-note,.75rem); font-weight:500; white-space:nowrap; }
.home-letter-entry.is-on-table .home-letter-entry-copy small { display:none; }
.home-letter-entry.is-on-table[data-letter-label="right"] .home-letter-entry-copy { left:0; transform:none; }
.home-letter-entry.is-on-table[data-letter-label="left"] .home-letter-entry-copy { left:auto; right:0; transform:none; }
.home-letter-entry.is-on-table.has-new-letters::after { top:5px; right:4px; width:7px; height:7px; border-width:1px; box-shadow:0 1px 2px #170b0766; }
.home-letter-entry.is-on-table.has-new-letters .home-letter-envelope { animation:home-letter-arrive .4s ease-out both; }
@keyframes home-letter-arrive { from { opacity:0; transform:perspective(160px) translateY(-7px) rotateX(25deg) rotateZ(-8deg); } to { opacity:1; transform:perspective(160px) translateY(0) rotateX(40deg) rotateZ(-12deg); } }
@media(prefers-reduced-motion:reduce) { .home-letter-entry.is-on-table.has-new-letters .home-letter-envelope { animation:none; } }

/* The room heading's empty area must not intercept the tabletop envelope. */
.home-town-home:has(.home-letter-entry) .home-room-heading { pointer-events:none; }
.home-town-home:has(.home-letter-entry) .home-room-heading :is(button,a) { pointer-events:auto; }

/* Keep every link in a multi-destination letter reachable, including page zoom. */
.home-letter-dialog[open]:has(.home-letter-actions button:nth-child(n+4)) {
  display:block;
  overflow-y:auto;
  overscroll-behavior:contain;
}
@media (pointer:coarse) and (max-height:650px) {
  /* The library's upper-right desk also needs space while the event is open. */
  .home-town-home[data-background="library"]:has(.home-letter-entry) .home-room-heading:has(>.home-anomaly-entry) {
    flex-direction:column;
    align-items:flex-start;
  }
  .home-letter-dialog[open] {
    display:block;
    overflow-y:auto;
    overscroll-behavior:contain;
  }
}

.home-town-home .home-room-heading[data-letter-avoid] { flex-direction:column; align-items:flex-start; }
.home-town-home .home-room-heading[data-letter-avoid="right"]>.home-anomaly-entry { align-self:flex-end; }

/* Keep the tabletop correspondence reachable in a page-zoomed desktop window. */
@media (pointer:fine) and (max-height:350px) {
  body:has(.home-town-screen .home-letter-entry) main { overflow-y:auto; overscroll-behavior:contain; }
  .home-town-screen:has(.home-letter-entry) { min-height:360px; }
  body:has(.home-town-screen .home-letter-entry) main:focus-visible { outline:3px solid var(--gold-strong); outline-offset:-3px; }
}