/* The pictures in guide.html (29 Sept 2026).
   Every page in this folder is ONE phone screen, drawn with the app's own css/style.css and made-up
   demo data, and guide.html shows it inside a phone frame, scaled to fit its column. No app.js, no
   account, no network: a figure is markup and nothing else, and every control in it is inert.
   Because the stylesheet is the live one, a restyle in the app shows up in the guide on its own. The
   MARKUP is copied, though, so a figure only needs touching when its screen's structure changes.
   The browser figures (ios-*, android-*, samsung-*) draw the browser's own menus. Those are not
   ours and are drawn loosely, with grey bars standing in for every row that isn't the one to tap. */

:root { --ring: #e8412c; --fig-bar: 34px; }
html, body { overflow: hidden; }
body { padding-top: var(--fig-bar); }
* { pointer-events: none; }

/* A phone's status bar, so the screen reads as a phone and not as a cropped web page. */
.fig-status {
  position: fixed; top: 0; left: 0; right: 0; height: var(--fig-bar); z-index: 10000;
  display: flex; align-items: center; justify-content: space-between; padding: 0 24px 0 30px;
  background: var(--bg); color: var(--text);
  font: 600 14px/1 -apple-system, 'DM Sans', sans-serif; letter-spacing: -0.2px;
}
.fig-status::after {
  content: ''; position: absolute; left: 50%; top: 7px; width: 84px; height: 22px; margin-left: -42px;
  border-radius: 12px; background: #16130f;
}
.fig-status.android::after { top: 10px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; }
.fig-bat { position: relative; width: 23px; height: 11px; border: 1.5px solid currentColor; border-radius: 3.5px; opacity: 0.85; }
.fig-bat::before { content: ''; position: absolute; inset: 1.5px 5px 1.5px 1.5px; border-radius: 1.5px; background: currentColor; }
.fig-bat::after { content: ''; position: absolute; right: -4px; top: 2.5px; width: 2px; height: 4px; border-radius: 0 1px 1px 0; background: currentColor; }

/* Fixed screens start under the status bar, not behind it. The login screen's 999 is dropped so the
   browser menus drawn over it in the install figures can sit on top. */
#login-screen { top: var(--fig-bar); z-index: 1; }
#onboarding { top: var(--fig-bar); height: calc(100% - var(--fig-bar)); }

/* ── THE RING ── the one thing to tap. A colour the app never uses, so it cannot be read as part of
   the screen, with a white halo so it holds on the cream and on the orange buttons alike. */
.ring {
  position: relative;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ring);
  animation: fig-pulse 2s ease-in-out infinite;
}
@keyframes fig-pulse {
  50% { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ring), 0 0 0 14px color-mix(in srgb, var(--ring) 20%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .ring { animation: none; } }
/* Around a line of text rather than a full-width block. */
.ring-text { display: inline-block; border-radius: 6px; padding: 3px 6px; }
/* Two taps on one screen get numbered. */
.ring[data-n]::after {
  content: attr(data-n); position: absolute; top: -14px; right: -14px; z-index: 5;
  width: 24px; height: 24px; border-radius: 50%; background: var(--ring); color: #fff;
  box-shadow: 0 0 0 2px #fff; font: 700 13px/24px 'DM Sans', sans-serif; text-align: center;
  text-decoration: none; letter-spacing: 0;
}
.ring[data-n].n-left::after { right: auto; left: -14px; }
.ring[data-n].n-low::after { top: auto; bottom: -14px; }
.fig-num { position: absolute; z-index: 20; width: 24px; height: 24px; border-radius: 50%; background: var(--ring); color: #fff; box-shadow: 0 0 0 2px #fff; font: 700 13px/24px 'DM Sans', sans-serif; text-align: center; }

/* ── BROWSER CHROME ── drawn for the install figures. */
.fig-page { position: fixed; inset: var(--fig-bar) 0 0 0; overflow: hidden; }
.fig-shade { position: fixed; inset: 0; z-index: 50; background: rgba(20, 17, 13, 0.34); }
.skel { display: block; height: 11px; border-radius: 6px; background: #d9d4cc; }
.skel.dim { background: #e7e3dc; }