/* The scene while nothing waits (site_scene.rs): where the account stands, drawn by the server,
   its title, what happens next and its one press. The live line is the accent's; it draws once
   where motion is allowed and stands still everywhere else. A stylesheet of its own
   (/account/scene.css), after site.css on the account page and the proposals list only: it uses
   the values of site.css and adds no byte to it. */
.xf-scene { display: flex; align-items: center; gap: 24px; padding: 20px 24px; border-radius: 16px; background: var(--xf-raised); box-shadow: inset 0 0 0 1px var(--xf-line); scroll-margin-top: 72px; }
.xf-scene-art { flex: none; width: min(168px, 34%); }
.xf-scene-art > svg { display: block; width: 100%; height: auto; overflow: visible; }
.xf-scene-ground { stroke: var(--xf-rule); }
.xf-scene-live { stroke: var(--xf-accent); }
.xf-scene-dot { fill: var(--xf-quiet); stroke: none; }
.xf-scene-words { display: grid; flex: 1; row-gap: 8px; min-width: 0; }
.xf-scene-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.5rem; }
.xf-scene-next { max-width: 34rem; margin: 0; color: var(--xf-quiet); font-size: .875rem; line-height: 1.25rem; }
.xf-scene-latest { display: grid; row-gap: 2px; margin: 0; }
.xf-scene-latest-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .875rem; line-height: 1.25rem; }
.xf-scene-latest-line > bdi { font-weight: 500; }
.xf-scene-latest-line > .xf-num { color: var(--xf-quiet); }
.xf-scene-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 4px; }
.xf-scene-copy { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
/* The phone page (phone.rs). Its script shows the block of one step (data-step); the block "on"
   stands before the fold of the setup steps, also when it is empty. While that block is hidden a
   step is open: the fold has no line, and the script holds it open as a plain list. When it shows,
   the phone is set up: the fold is one quiet line. The line of what appears here stands under a
   setup step's scene only. While a step is open, the answer of its press (data-message) stands
   directly under the step's scene: the line of what appears here and the list of steps stand after
   it (.xf-phone is a grid). After "Turn off on this phone" the script brings the step into view. */
.xf-phone-setup > summary { color: var(--xf-quiet); }
[data-step="on"][hidden] ~ .xf-phone-setup > summary, [data-step="on"]:not([hidden]) ~ .xf-phone-setup .xf-section-head, [data-step="on"]:not([hidden]) ~ [data-appear], [data-step="on"]:empty { display: none; }
[data-step="on"][hidden] ~ .xf-phone-setup > .xf-fold-body { padding-top: 0; }
[data-step="on"][hidden] ~ .xf-phone-setup::details-content { transition: none; }
.xf-phone-setup .xf-first { padding-left: 0; list-style: none; }
[data-step="on"][hidden] ~ :is(.xf-phone-setup, [data-appear]) { order: 1; }
.xf-phone > [data-step] { scroll-margin-top: 16px; }
@media (max-width: 34rem) {
  .xf-scene { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; }
  .xf-scene-art { width: 120px; }
}
@media (prefers-reduced-motion: no-preference) {
  .xf-scene-live { stroke-dasharray: 1 2; animation: xf-scene-draw .9s cubic-bezier(.16, 1, .3, 1) .2s backwards; }
  .xf-scene-dot { animation: xf-scene-dot .4s ease-out .45s backwards; }
  .xf-scene-dot + .xf-scene-dot { animation-delay: .57s; }
  .xf-scene-dot + .xf-scene-dot + .xf-scene-dot { animation-delay: .69s; }
}
@keyframes xf-scene-draw { from { stroke-dashoffset: 1.5; } }
@keyframes xf-scene-dot { from { opacity: 0; } }