/* Christmas photo frames (frames.html, js/frames/): the frames as cards two to a row, then one frame large with its
   photo under a finger, its line and Save. On the tree pages' dark pine (css/tree-app.css), in a phone-wide column. */
.fr { position: relative; z-index: 1; width: min(100% - 32px, 480px); margin: 0 auto; padding: calc(env(safe-area-inset-top, 0px) + 14px) 0 36px; }
/* The garland over the cards' page: as wide as the screen, its middle on a phone (the bow, both swags' lowest points);
   the headline starts under its hanging baubles. A picture of its SVG (seo/frames/raster.mjs: an iPhone took a second
   to draw the SVG's blurs); up to 589 px wide the screen shows no more than its middle, which comes on its own */
:root { --garland-h: clamp(170px, 20.8vw, 300px); }
.fr-garland { position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: var(--garland-h); background: url('/assets/frames/page/garland.webp') center top / cover no-repeat; pointer-events: none; }
@media (max-width: 589px) { .fr-garland { background-image: url('/assets/frames/page/garland-middle.webp'); } }
#fr-list .fr-headline { margin-top: calc(var(--garland-h) - 62px); }
.fr-top { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 10px; }
.fr-title { grid-column: 2; margin: 0; font-size: clamp(1.25rem, 1.05rem + 1.1vw, 1.55rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; text-align: center; text-wrap: balance; }
.fr-title:focus { outline: none; }
/* The cards' page says what it is in a big headline under the back button, as the site's pages do */
.fr-headline { margin: 10px 0 0; font-size: clamp(2.05rem, 1.6rem + 2.4vw, 2.7rem); font-weight: 700; line-height: 1.04; letter-spacing: -0.04em; text-align: center; text-wrap: balance; }
/* Round icon buttons: back, and "change photo" by Save; on the garland the back button keeps a solid dark disc */
.fr-round {
  position: relative; display: block; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: var(--control); color: var(--text); box-shadow: inset 0 0 0 1px var(--glass-border); cursor: pointer;
  transition: background-color 0.15s, transform 0.15s; -webkit-tap-highlight-color: transparent;
}
.fr-round:hover { background: var(--control-hover); }
#fr-back { background: rgba(8, 22, 15, 0.82); }
.fr-round:active { transform: scale(0.94); }
.fr-round svg { position: absolute; inset: 0; width: 22px; height: 22px; margin: auto; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
[dir='rtl'] #fr-back svg, [dir='rtl'] #fr-edit-back svg { transform: scaleX(-1); }
.fr .btn-icon { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Under the headline: what to do first (the photos are picked in the frame, where the privacy line is) */
.fr-sub { margin: 10px 0 0; color: var(--text-soft); font-size: 1.02rem; font-weight: 600; text-align: center; }
.fr-private { margin: 12px 0 0; color: var(--text-soft); font-size: 0.84rem; line-height: 1.45; text-align: center; text-wrap: balance; }
.fr-private svg { display: inline-block; width: 14px; height: 14px; margin-inline-end: 5px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* The cards: each frame in a 4:5 box (a taller frame stands smaller in it), its name under it */
.fr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.fr-card { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fr-thumb-box { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 14px; background: rgba(0, 0, 0, 0.28); box-shadow: inset 0 0 0 1px var(--hairline); transition: transform 0.15s; }
.fr-card:active .fr-thumb-box { transform: scale(0.97); }
.fr-thumb { display: block; max-width: 100%; max-height: 100%; }
.fr-name { margin-top: 8px; font-size: 1rem; font-weight: 700; line-height: 1.25; }

/* One frame: the picture as big as fits (js/frames/editor.js sizes the canvas), fingers on it move the photo rather than
   the page */
.fr-stage { display: grid; place-items: center; margin-top: 14px; }
.fr-canvas { display: block; max-width: 100%; border-radius: 12px; background: rgba(255, 255, 255, 0.04); box-shadow: 0 22px 44px -22px rgba(0, 0, 0, 0.85); touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.fr-hint { margin: 10px 0 0; color: var(--text-faint); font-size: 0.82rem; text-align: center; }
.fr-caption { margin: 14px 0 0; }
.fr-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.fr-actions .btn { flex: 1; }
.fr-change { width: 54px; height: 54px; }

/* In-app browsers: the finished picture over the page, kept with a long press (js/frames/save.js) */
.fr-keep { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; background: rgba(3, 8, 5, 0.92); }
.fr-keep-picture { max-width: 100%; max-height: 78vh; border-radius: 10px; box-shadow: 0 20px 50px -20px #000; -webkit-touch-callout: default; }
.fr-keep-hint { margin: 0; color: var(--text); font-weight: 600; text-align: center; }
.fr-noscript { padding: 40px 20px; text-align: center; }

/* A frame with several windows: a numbered square per window under the picture, its photo or a dashed plus; a tap
   picks that window's photo (js/frames/editor.js renderSlots) */
.fr-slots { display: flex; justify-content: center; gap: 12px; margin-top: 14px; }
.fr-slot { position: relative; flex: none; width: 56px; height: 56px; padding: 0; overflow: hidden; border: 0; border-radius: 12px; background: var(--control); box-shadow: inset 0 0 0 1.5px var(--glass-border); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.15s; }
.fr-slot:active { transform: scale(0.94); }
.fr-slot canvas { display: block; width: 100%; height: 100%; }
.fr-slot.is-empty { background: transparent; box-shadow: none; outline: 1.5px dashed rgba(244, 241, 232, 0.5); outline-offset: -1.5px; }
.fr-slot-plus { position: absolute; inset: 0; margin: auto; width: 20px; height: 20px;
  background: linear-gradient(var(--text), var(--text)) center / 100% 2.5px no-repeat, linear-gradient(var(--text), var(--text)) center / 2.5px 100% no-repeat; }
.fr-slot-n { position: absolute; top: 4px; inset-inline-start: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--gold); color: var(--gold-ink); font-size: 0.7rem; font-weight: 800; line-height: 18px; text-align: center; }