/* The app's first screen. Frank shows in full and stands with her list at every size. */
.entry-screen { min-height: 100svh; box-sizing: border-box; display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; padding: max(22px, calc(env(safe-area-inset-top) + 10px)) 24px max(14px, env(safe-area-inset-bottom)); background: var(--paper); color: var(--ink); }
.entry-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.entry-head .wordmark { color: var(--green); font: 700 40px/1 Georgia, serif; letter-spacing: -2.4px; text-decoration: none; }
.entry-head .wordmark span { color: var(--clay); }
.entry-top-signin { display: none; }
.entry-text-button { min-height: 44px; padding: 8px 6px; border: 0; background: transparent; color: var(--ink); font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer; }
.entry-text-button:focus-visible, .entry-footer a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.entry-body { flex: 1 0 auto; display: grid; grid-template-columns: minmax(0,1fr); gap: 20px; align-content: start; margin-top: 22px; }
#app .entry-screen h1, .entry-screen h1 { margin: 0 0 12px; color: var(--green); font: 400 clamp(40px,12vw,48px)/1.06 Georgia, serif; letter-spacing: -1.6px; text-wrap: balance; }
.entry-lede { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.45; text-wrap: pretty; }

/* A small card (owner, November 5: "the card is too big"): three lines, so Frank stays the bigger thing in the picture. */
.entry-scene { position: relative; isolation: isolate; display: grid; grid-template-columns: 42% minmax(0,1fr); align-items: end; min-height: 200px; }
.entry-halo { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.entry-halo-blue { left: -4%; bottom: 0; width: 46%; aspect-ratio: 1; background: var(--blue); }
.entry-halo-wheat { right: -3%; top: -2%; width: 50%; aspect-ratio: 1; background: var(--wheat); }
.entry-halo-blush { right: 7%; bottom: -3%; width: 28%; aspect-ratio: 1; background: var(--blush); }
.entry-frank { align-self: end; margin-bottom: 6px; animation: frank-rise .45s .05s both, frank-hop .42s 1.5s; }
.frank-mascot { display: block; width: 100%; height: auto; overflow: visible; }
.frank-mascot .fm-hat { fill: var(--hat-cream); }
.frank-mascot .fm-outline { fill: var(--ink); stroke: var(--ink); stroke-width: 12; }
.frank-mascot .fm-ink { fill: var(--ink); }
.frank-mascot .fm-line { fill: none; stroke: var(--ink); stroke-width: 15; stroke-linecap: round; }
.frank-mascot .fm-dot { fill: var(--clay); }

.entry-list { align-self: center; max-width: 230px; margin: 0 0 0 6px; padding: 4px 12px; list-style: none; background: var(--white); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 8px 18px rgb(36 57 48 / .1); transform: rotate(1.6deg); }
.entry-row { display: grid; grid-template-columns: 16px minmax(0,1fr); gap: 7px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.entry-row:last-child { border-bottom: 0; }
.entry-check { width: 16px; height: 16px; margin-top: 2px; fill: none; stroke: var(--green); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* Each tick draws itself in turn while Frank works through the list. */
.entry-check path { stroke-dasharray: 1; animation: entry-tick .28s both; }
.entry-row:nth-child(1) .entry-check path { animation-delay: .45s; }
.entry-row:nth-child(2) .entry-check path { animation-delay: .75s; }
.entry-row:nth-child(3) .entry-check path { animation-delay: 1.3s; }
.entry-row-title { display: block; font: 16px/1.25 Georgia, serif; color: var(--ink); }
/* The grocery list is crossed out by a drawn line, so the strike can travel left to right. */
.entry-row-title s { position: relative; text-decoration: none; color: var(--muted); }
.entry-row-title s::after { content: ""; position: absolute; left: -2px; right: -2px; top: 54%; height: 1.5px; background: var(--red); transform-origin: left center; animation: entry-strike .3s .95s both; }
.entry-row-detail { display: block; margin-top: 1px; font-size: 14px; line-height: 1.3; color: var(--muted); }
.entry-stamp { display: inline-block; margin-top: 5px; padding: 3px 7px; border: 1.5px solid var(--red); border-radius: 3px; color: var(--red); font-size: 14px; font-weight: 700; letter-spacing: .04em; line-height: 1.2; white-space: nowrap; transform: rotate(-3deg); animation: frank-stamp .3s 1.12s both; }

.entry-actions .primary { display: block; width: 100%; min-height: 54px; font-size: 17px; }
.entry-signin-row { margin: 6px 0 0; color: var(--muted); font-size: 16px; text-align: center; }
.entry-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 12px; margin-top: 8px; color: var(--muted); font-size: 13px; }
.entry-footer a { display: inline-flex; align-items: center; min-height: 44px; margin-right: 14px; color: var(--muted); }

/* A small phone keeps the promise and gives up the optional line. */
@media (max-width: 374px), (max-height: 700px) and (max-width: 699px) {
 .entry-row-budget { display: none; }
 .entry-row:nth-last-child(2) { border-bottom: 0; }
 .entry-scene { grid-template-columns: 34% minmax(0,1fr); min-height: 176px; }
 .entry-list { max-width: none; }
 .entry-body { gap: 16px; margin-top: 14px; }
}
/* Tablet portrait, and any narrower tablet window. */
@media (min-width: 700px) {
 .entry-screen { max-width: 760px; padding-left: 44px; padding-right: 44px; }
 .entry-body { justify-items: center; align-content: center; gap: 28px; margin-top: 12px; }
 .entry-copy { text-align: center; max-width: 520px; }
 #app .entry-screen h1, .entry-screen h1 { font-size: 60px; }
 .entry-lede { font-size: 19px; }
 .entry-scene { width: 100%; max-width: 460px; min-height: 240px; }
 .entry-list { max-width: 250px; }
 .entry-row-title { font-size: 17px; }
 .entry-actions { width: 100%; max-width: 360px; }
}
/* Tablet landscape: message and action on the left, Frank with her list on the right. */
@media (min-width: 1000px) {
 .entry-screen { max-width: 1120px; }
 .entry-top-signin { display: inline-block; }
 .entry-signin-row { display: none; }
 .entry-body { flex: 1 0 auto; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); grid-template-areas: "copy scene" "actions scene"; justify-items: stretch; align-content: center; column-gap: 44px; row-gap: 24px; margin-top: 0; }
 .entry-copy { grid-area: copy; align-self: end; text-align: left; }
 .entry-actions { grid-area: actions; align-self: start; max-width: 300px; }
 .entry-scene { grid-area: scene; align-self: center; justify-self: center; max-width: 480px; }
 #app .entry-screen h1, .entry-screen h1 { font-size: 58px; }
}
@keyframes frank-rise { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes frank-hop { 0%, 100% { transform: none; } 40% { transform: translateY(-10px) rotate(-3deg); } 70% { transform: translateY(0) rotate(1deg); } }
@keyframes entry-tick { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes entry-strike { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes frank-stamp { from { opacity: 0; transform: rotate(-3deg) scale(1.5); } to { opacity: 1; transform: rotate(-3deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .entry-frank, .entry-stamp, .entry-check path, .entry-row-title s::after { animation: none; } }
@media (forced-colors: active) { .entry-list { border-color: CanvasText; } .frank-mascot .fm-outline { fill: CanvasText; stroke: CanvasText; } }