/* The picture frame screen (module frame): /screen/frame/ on an old iPad, a tablet or a TV browser, and /tv/frame on
   an in room TV. Full screen photos on black with a crossfade, a large clock and date that read from across a room,
   the caption and who sent it, and "New photo from Nina" for a minute when one arrives. Sizes follow the screen
   (vmin), so a 1366x1024 iPad and a 1920x1080 TV look alike. Written for old browsers too (iOS 9 Safari, webOS 3):
   flexbox and absolute positioning only, no grid, no gap, no inset, prefixed transforms and filters. Brand colors
   come from the client's tokens (partials/theme). */

html.frs-html, .frs { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #000; }
.frs { color: #fff; font-family: var(--sans, "Helvetica Neue", Arial, sans-serif); line-height: 1.2;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.frs p { margin: 0; }
.frs [hidden] { display: none !important; }
.frs svg.ico { width: 1em; height: 1em; vertical-align: -.12em; }

/* ---------- The slideshow ---------- */
.frs-show { position: fixed; top: 0; right: 0; bottom: 0; left: 0; cursor: none; }
.frs-stage { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; background: #000; }
.frs-layer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0;
  -webkit-transition: opacity 1.6s ease-in-out; transition: opacity 1.6s ease-in-out; }
.frs-layer.frs-on { opacity: 1; }
/* The same photo, blurred and dimmed, fills the bars beside a photo that does not match the screen's shape. */
.frs-back { position: absolute; top: -6%; right: -6%; bottom: -6%; left: -6%; background-color: #000; background-position: center;
  background-size: cover; background-repeat: no-repeat; -webkit-filter: blur(40px) brightness(.45); filter: blur(40px) brightness(.45); }
.frs-img { position: absolute; top: 50%; left: 50%; max-width: 100%; max-height: 100%;
  -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.frs-img:not([src]) { display: none; }
@supports (object-fit: contain) {
  .frs-img { top: 0; left: 0; width: 100%; height: 100%; max-width: none; max-height: none; -webkit-transform: none; transform: none; object-fit: contain; }
  /* On an in room TV a photo close to the screen's shape fills it (frame.js adds frs-fill there only: at most 26
     percent of its width or height left out; usability R32.3, "grey bars" on a TV), a little more off the bottom than
     the top, where faces are. A picture frame screen keeps every photo whole. */
  .frs-layer.frs-fill .frs-img { object-fit: cover; object-position: 50% 40%; }
}

/* Bottom: the clock on the left, the caption on the right, over a dark fade so both read on any photo. */
.frs-bottom { position: absolute; left: 0; right: 0; bottom: 0; display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-align: end; -webkit-align-items: flex-end; align-items: flex-end; -webkit-box-pack: justify; -webkit-justify-content: space-between;
  justify-content: space-between; padding: 14vmin 4.5vmin 4vmin;
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 55%, rgba(0, 0, 0, .78) 100%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 55%, rgba(0, 0, 0, .78) 100%);
  text-shadow: 0 .2vmin 1.2vmin rgba(0, 0, 0, .6); }
.frs-clock { -webkit-flex-shrink: 0; flex-shrink: 0; margin-right: 4vmin; }
.frs-time { font-size: 15vmin; font-weight: 700; line-height: .95; letter-spacing: -.02em; white-space: nowrap; }
.frs-ampm { font-size: 6.4vmin; font-weight: 700; margin-left: 1.6vmin; letter-spacing: 0; }
.frs-date { font-size: 5.6vmin; font-weight: 700; margin-top: 1.4vmin; white-space: nowrap; color: #F4F1EA; }
.frs-cap { max-width: 46%; text-align: right; }
.frs-captext { font-size: 3.6vmin; line-height: 1.3; }
.frs-captext:empty { display: none; }
.frs-from { font-size: 3.2vmin; margin-top: .8vmin; color: #E8E2D6; font-weight: 700; }
.frs-from:empty { display: none; }

/* "New photo from Nina", for a minute. */
.frs-newnote { position: absolute; top: 4.5vmin; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);
  display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  max-width: 90%; padding: 1.8vmin 3.6vmin 1.8vmin 2.6vmin; border-radius: 10vmin; background: rgba(0, 0, 0, .62);
  background: var(--forest, rgba(0, 0, 0, .62)); color: #fff; font-size: 4.8vmin; font-weight: 700; line-height: 1.15;
  box-shadow: 0 .6vmin 3vmin rgba(0, 0, 0, .45); white-space: nowrap; -webkit-animation: frs-pop .6s ease-out; animation: frs-pop .6s ease-out; }
.frs-heart { display: inline-block; color: #FF8FA3; margin-right: 1.8vmin; font-size: 5.4vmin; line-height: 1; }
@-webkit-keyframes frs-pop { from { opacity: 0; -webkit-transform: translate(-50%, -2vmin); } to { opacity: 1; -webkit-transform: translate(-50%, 0); } }
@keyframes frs-pop { from { opacity: 0; transform: translate(-50%, -2vmin); } to { opacity: 1; transform: translate(-50%, 0); } }

/* The Today card and an Urgent notice's card (decision 51), in place of a photo: big words on the brand's dark color
   (plain dark first for browsers without CSS variables), the same flexbox and absolute positioning as the rest. */
.frs-card { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; box-sizing: border-box; padding: 6vmin 7vmin;
  display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column;
  -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; overflow: hidden;
  background: #1E2B24; background: var(--forest, #1E2B24); color: #fff; }
.frs-card.frs-urgent { background: #9B1C1C; border: 1.2vmin solid #FFD866; }
/* For you: news that reached the frame's resident no other way (README "Residents without the app"). */
.frs-card.frs-foryou { background: #14532D; border: 1.2vmin solid #BBF7D0; }
.frs-card-kick { font-size: 4vmin; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #FFD866; margin-bottom: 2vmin !important; }
.frs-card-title { font-size: 8vmin; font-weight: 700; line-height: 1.08; margin-bottom: 3vmin !important; }
.frs-card-lines p { font-size: 5.4vmin; line-height: 1.25; margin-bottom: 1.6vmin; }
.frs-card-lines .frs-card-sub { font-size: 4.2vmin; font-weight: 700; color: #FFD866; margin-top: 2vmin; }

.frs-paused { position: absolute; top: 4.5vmin; right: 4.5vmin; padding: 1vmin 2.4vmin; border-radius: 6vmin; background: rgba(0, 0, 0, .6);
  font-size: 3vmin; font-weight: 700; }
.frs-hint { position: absolute; top: 4.5vmin; left: 4.5vmin; padding: 1vmin 2.4vmin; border-radius: 6vmin; background: rgba(0, 0, 0, .6);
  font-size: 2.8vmin; font-weight: 700; }

/* Screen off at night (usability R31.3): black over everything in the frame's screen off hours, above the cards and
   the note, with one dim line low on the screen that says when it comes back on (dim on purpose: it is night). */
.frs-dark { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; background: #000; cursor: none; }
.frs-darktext { position: absolute; left: 0; right: 0; bottom: 6vmin; text-align: center; font-size: 3vmin; color: #5C5C5C; }

/* No photos yet. */
.frs-empty { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center;
  justify-content: center; -webkit-box-align: center; -webkit-align-items: center; align-items: center; padding: 0 8vmin 30vmin; text-align: center;
  background: var(--forest, #12302A); }
.frs-empty-title { font-family: var(--serif, Georgia, serif); font-size: 7vmin; font-weight: 600; }
.frs-empty-text { font-size: 4vmin; margin-top: 2vmin; color: #E8E2D6; }

/* ---------- Pairing ---------- */
.frs-pair { min-height: 100%; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical;
  -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center; padding: 3.5vmin 5vmin; text-align: center;
  background: var(--forest, #12302A); }
.frs-brand { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  font-size: 3.6vmin; font-weight: 700; margin-bottom: 2vmin; }
.frs-mark { display: inline-block; margin-right: 1.4vmin; font-size: 5vmin; line-height: 1; color: var(--side-accent, #A7D46A); }
.frs-pair h1 { font-family: var(--serif, Georgia, serif); font-weight: 600; font-size: 6.6vmin; line-height: 1.1; margin: 0 0 2.5vmin; color: #fff; }
.frs-code { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;
  margin-bottom: 4vmin; }
.frs-digit { display: inline-block; width: 10vmin; height: 13vmin; line-height: 13vmin; margin: 0 .7vmin; border-radius: 1.8vmin; background: #FBF8F2;
  color: var(--forest, #12302A); font-size: 9vmin; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.frs-gap { display: inline-block; width: 3vmin; }
.frs-lead { font-size: 3.8vmin; line-height: 1.35; max-width: 110vmin; margin: 0 auto 2.5vmin; }
/* The code with its words, and beside it the QR code that opens Pair a frame on a staff phone: side by side on a
   screen wider than tall (an iPad on its side, a TV), the QR code under the words on one standing upright. The QR
   code is 46 percent of the shorter side either way, on white with its own quiet zone: about 9 cm (471 px) on a 12.9
   inch iPad, 7 cm (377 px) on an iPad Air, and 4 cm (276 px) on a 7 inch 1024x600 frame, which a phone reads from
   closer. A phone standing upright gets 50 percent. */
.frs-pairrow { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center;
  align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; margin-bottom: 2vmin; }
.frs-pairmain { max-width: 74vmin; }
.frs-pairmain .frs-code { margin-bottom: 3vmin; }
.frs-pairmain .frs-lead { margin-bottom: 0; font-size: 3vmin; text-wrap: balance; }
.frs-qr { margin: 0 0 0 4.5vmin; -webkit-flex-shrink: 0; flex-shrink: 0; }
.frs-qrimg { display: block; width: 46vmin; height: 46vmin; margin: 0 auto; border-radius: 1.6vmin; background: #fff; }
.frs-qrcap { max-width: 46vmin; margin: 1.6vmin auto 0; font-size: 3vmin; line-height: 1.3; color: #fff; text-wrap: balance; }
@media (orientation: portrait) {
  .frs-pairrow { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; }
  .frs-qr { margin: 3vmin 0 0; }
  .frs-qrimg { width: 46vmin; height: 46vmin; }
  .frs-qrcap { max-width: 60vmin; }
}
/* A phone, or anything much taller than wide, has room for a larger QR code and caption. */
@media (orientation: portrait) and (max-aspect-ratio: 2/3) {
  .frs-qrimg { width: 50vmin; height: 50vmin; }
  .frs-qrcap { max-width: 80vmin; font-size: 3.8vmin; }
}
/* The steps (numbered, in plain words), under the code beside the QR code. With them and Back to sign in (2026-11-02)
   the whole pairing screen still fits one screen on a TV (1920x1080) and an iPad on its side (1366x1024, the 13 inch
   1376x1032), demo line and clock included (journeys 16 and 73 measure it): the steps and the line under them are a
   little smaller than the code's words were, and the spaces between the parts are tighter. */
.frs-steps { margin: 0 auto 2vmin; padding: 0 0 0 1.2em; max-width: 74vmin; text-align: left; font-size: 3.3vmin; line-height: 1.3; }
.frs-steps li { margin: 0 0 1vmin; padding-left: .3em; }
.frs-note { font-size: 2.8vmin; color: rgba(255, 255, 255, .82); margin-top: 1vmin; }
.frs-demo { font-size: 2.6vmin; color: rgba(255, 255, 255, .82); margin-top: 2.5vmin; max-width: 90vmin; }
.frs-pclock { font-size: 3.4vmin; font-weight: 700; margin-top: 2.5vmin; color: rgba(255, 255, 255, .9); }

/* Back to sign in, on every state of the pairing screen and on the page that moves a frame on: a plain link to
   /signin, which leaves the iPhone app's picture frame mode, so a frame is never full screen with no way out. In the
   top left corner, first in the page, so it is on the first screen whatever the screen's shape and takes no room from
   the code; big enough to tap from arm's length on an iPad, on cream like the code's digits (well over 7:1 on the dark
   color). On a screen standing upright the page starts below it, so it never covers the name at the top. The pairing
   screen and that page scroll when a small screen cannot hold them. */
html.frs-html-pair { overflow-x: hidden; overflow-y: auto; height: auto; min-height: 100%; }
html.frs-html-pair .frs { overflow: visible; height: auto; min-height: 100%; }
/* The body carries the page's mode as a class too (frs-pair): there it is a plain block, so the page is the main's
   padding and no more, the main as wide as the screen and at least as tall. */
html.frs-html-pair body.frs-pair { display: block; padding: 0; }
html.frs-html-pair main.frs-pair { min-height: 100vh; }
.frs-exit { position: absolute; top: 2.5vmin; left: 3vmin; margin: 0; z-index: 1; }
.frs-exit { top: max(2.5vmin, env(safe-area-inset-top)); left: max(3vmin, env(safe-area-inset-left)); }
@media (orientation: portrait) {
  .frs-pair { padding-top: -webkit-calc(48px + 7vmin); padding-top: calc(48px + 7vmin); }
}
.frs .frs-backbtn { display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; -webkit-box-align: center;
  -webkit-align-items: center; align-items: center; box-sizing: border-box; min-height: 48px; min-width: 48px; padding: 1.4vmin 4.5vmin;
  border: 0; border-radius: 6vmin; background: #FBF8F2; color: #12302A; color: var(--forest, #12302A); font-size: 3.6vmin;
  font-size: max(16px, 3.6vmin); font-weight: 700; line-height: 1.3; text-decoration: none; box-shadow: none; }
.frs .frs-backbtn:focus-visible { outline: .5vmin solid #fff; outline-offset: .6vmin; }
/* The page that moves a frame on (frame/move): "One moment." and Continue. */
.frs-continue { color: #fff; font-weight: 700; text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .frs-layer { -webkit-transition-duration: .3s; transition-duration: .3s; }
  .frs-newnote { -webkit-animation: none; animation: none; }
}