/* Layout additions for the interactive mock. Colors remain semantic tokens. */
.stack{display:grid;gap:20px}.compact-stack{display:grid;gap:12px}.split{display:flex;align-items:center;justify-content:space-between;gap:12px}.muted{color:var(--onSurfaceVariant)}.small{font-size:13px}.spacer{height:24px}.full{width:100%}.grow{flex:1;min-width:0}.empty-state{padding:40px 4px;text-align:center;display:grid;justify-items:center;gap:16px}.empty-state>.icon svg{width:32px;height:32px;color:var(--onSurfaceVariant)}.empty-state p{color:var(--onSurfaceVariant);max-width:28em}.inline-icon{display:inline-flex;align-items:center;gap:8px}.entry-actions{display:flex;justify-content:flex-end;gap:8px}.entry-actions .button{width:auto;min-width:48px}.relationship-ticket{display:block;text-align:left;width:100%;color:var(--onSurface)}.relationship-ticket .relationship-days{display:flex;align-items:baseline;gap:8px;margin-top:10px}.relationship-days strong{font:400 40px/1.2 Georgia,serif}.relationship-days span{font-size:14px}.relationship-ticket footer{margin-top:14px;padding-top:12px;border-top:1px dashed var(--outline);font-size:13px;color:var(--onSurfaceVariant)}.date-line{display:flex;align-items:center;gap:12px;padding-block:14px}.date-line .icon{color:var(--onSurfaceVariant)}.check-button[aria-pressed=true]{background:var(--primaryContainer);color:var(--primary)}.check-button[aria-pressed=true]+.row-copy .row-title{text-decoration:line-through;color:var(--onSurfaceVariant)}.calendar-week{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:13px;color:var(--onSurfaceVariant);padding-block:12px}.calendar-grid{gap:3px!important;grid-template-columns:repeat(7,minmax(0,1fr))!important}.calendar-day{width:100%;min-width:0!important}.calendar-day.has-event::after{content:'';display:block;width:4px;height:4px;border-radius:50%;background:var(--primary);margin:auto}.letter-paper{padding:24px 20px;background:var(--surface);border:1px solid var(--outline);border-radius:10px;white-space:pre-wrap;line-height:1.9}.letter-paper h2{font-family:var(--font-display);font-size:24px;font-weight:500;margin-bottom:24px}.locked-letter{text-align:center;padding:36px 16px;border:1px solid var(--outline);background:var(--surface);border-radius:12px}.locked-letter .icon{display:inline-flex;color:var(--primary);margin-bottom:20px}.locked-letter .icon svg{width:40px;height:40px}.locked-letter h2{font-size:22px;margin-bottom:12px}.menu-row button.grow{text-align:left;border:0;padding:0;background:none}.menu-row .icon-button{color:var(--primary);border:1px solid var(--outline);border-radius:9px}.cart-summary{border-top:1px solid var(--outline);padding-top:20px}.price{white-space:nowrap}.order-status{padding:20px 0}.order-status h2{font-size:24px;margin-bottom:8px}.setting-icon{color:var(--onSurfaceVariant)}.photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-block:16px}.photo-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px}.photo-grid figure{margin:0;position:relative}.photo-grid figcaption{font-size:12px;margin-top:4px}.photo-input{display:block;padding:24px;text-align:center;border:1px dashed var(--outline);border-radius:10px;color:var(--primary);cursor:pointer}.photo-input input{max-width:100%;margin-top:12px}.select-row{display:flex;gap:12px;flex-wrap:wrap}.select-row label{display:flex;gap:8px;align-items:center;min-height:48px}.select-row input{accent-color:var(--primary);width:20px;height:20px}.auth-page form{display:block}.auth-page .form-actions{margin-top:4px}.auth-page .auth-links{margin-top:16px}.auth-brand{font-family:Georgia,serif;color:var(--primary)}.input-with-button{display:flex;gap:8px}.input-with-button input{min-width:0;flex:1}.input-with-button button{flex:0 0 auto;width:auto;min-width:100px}.state-gallery{font-size:13px;color:var(--onSurfaceVariant)}.preview-note{font-size:12px;line-height:1.6;text-align:center;color:var(--onSurfaceVariant);margin:32px 0 8px}.form-error:empty{display:none}.toast[hidden]{display:none}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px}.toggle-row input{width:42px;height:24px;accent-color:var(--primary)}.photo-viewer img{max-height:70dvh;object-fit:contain;width:100%}.theme-choice{width:100%;display:flex;align-items:center;gap:12px;padding:16px;border:1px solid var(--outline);background:var(--surface);color:var(--onSurface);border-radius:12px}.theme-choice[aria-pressed=true]{border:2px solid var(--primary);padding:15px}.theme-swatch{width:36px;height:36px;border-radius:50%;border:1px solid var(--outline);flex-shrink:0}.status-label{font-size:12px;padding:4px 8px;background:var(--primaryContainer);color:var(--onPrimaryContainer);border-radius:5px}.order-items .list-row{align-items:flex-start}.page-body>.section-heading:first-child{margin-top:0}.app-header .page-title{font-size:21px}.app-header .header-actions .icon-button{margin-right:-8px}.dialog-form .form-actions{margin-top:20px}.dialog-close{position:absolute;right:12px;top:12px}.dialog-title{padding-right:44px}.download-link{display:inline-flex;min-height:48px;align-items:center}.layout-footer{margin-top:28px}.safe-gap{height:12px}.button.tertiary{background:transparent;color:var(--primary);border:0}.button.danger{background:var(--error);color:var(--onError)}.button.text.danger{background:transparent;color:var(--error)}.list-row.button-row{width:100%;background:none;text-align:left;border:0;border-bottom:1px solid var(--outline);border-radius:0;padding-inline:0}.row-copy span{display:block}.row-meta,.row-body{white-space:pre-line}.search-form{display:flex;gap:8px;margin-bottom:24px}.search-form input{flex:1;min-width:0;border:1px solid var(--outline);background:var(--surface);color:var(--onSurface);border-radius:9px;padding:12px 14px;font-size:16px}.search-form .button{width:auto;min-width:68px}.row-trailing{margin-left:auto;color:var(--onSurfaceVariant)}.field textarea{min-height:120px}.dialog-body>.helper{margin-bottom:16px}.dialog-actions{display:grid;gap:12px}.divider{height:1px;background:var(--outline);margin-block:24px}.image-caption{font-size:12px;color:var(--onSurfaceVariant);margin-top:6px}.row-title{white-space:normal}.calendar-month{margin-top:12px}.app-header .brand{margin:0}.app-shell .page-body{overscroll-behavior:contain}.spinner{width:16px!important;height:16px!important}.button .spinner{margin-right:8px}.feedback-toast{pointer-events:none}@media(max-width:360px){.quick-links{gap:0}.quick-link{font-size:12px}.input-with-button{flex-wrap:wrap}.input-with-button button{width:100%}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.spinner{animation:none!important}}

.check-button:empty::before{content:"";width:20px;height:20px;border:1.5px solid var(--onSurfaceVariant);border-radius:4px;display:block}.row-trailing .icon{display:flex}.field select{min-height:50px}

@media(max-width:375px){:root{--page-gutter:16px}.calendar-grid{gap:0!important}}