/* ============================================================================
   devices/ring · § 9 · BIOMETRICS, READ CONTINUOUSLY BY FIVE SENSORS

   2026-09-16, by request: the sensor cutaway (a dial drawn in the ring's
   hollow, four marks and an expanding list) is replaced by devices/ring-lab
   § 33, the biometrics band. What it reads on the left,
   the ring and where on it those readings come from on the right, each
   sensor named in the gutter at the end of a leader line.

   Sizes are the lab's, raised to this page's ladder: the lab set the readings'
   second line at 12 to 15px and the sensor names at 12 to 18px, which is the
   size of a caption on a phone. Nothing here is set under 17px.
   ========================================================================= */

.ph-flat .rbio {
  --rbio-ease: cubic-bezier(.16, 1, .3, 1);
  background: #fff;
  padding: clamp(80px, 8vw, 140px) 0 clamp(90px, 9vw, 150px);
  overflow: clip;
}

/* The heading was a single line in a blue gradient ink until 2026-09-16. It is
   the kit's two tone display now, by request, like every other statement on
   this page: the held back line first, the line that carries the point under
   it. The gradient went with it, and `--rbio-grad` with the gradient. */
.ph-flat .rbio-h {
  margin: 0 auto clamp(40px, 4vw, 72px); max-width: calc(100% - 40px);
  font-size: clamp(40px, 5.6vw, 84px);
}

.ph-flat .rbio-row {
  position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr);
  align-items: center; gap: clamp(28px, 3vw, 56px);
  width: 100%; max-width: calc(var(--ph-content-max, 1260px) + var(--ph-margin, 90px) * 2);
  margin: 0 auto; padding-inline: var(--ph-margin, 90px);
}

.ph-flat .rbio-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(22px, 2.2vw, 34px); }
.ph-flat .rbio-list li {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: clamp(16px, 1.4vw, 22px); row-gap: 2px; align-items: center;
}
.ph-flat .rbio-list i {
  grid-row: 1 / 3; display: grid; place-items: center;
  width: clamp(44px, 3.4vw, 52px); aspect-ratio: 1; border-radius: 50%; background: var(--c);
}
.ph-flat .rbio-list i svg { width: 56%; fill: #fff; }
.ph-flat .rbio-list i svg.is-line { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ph-flat .rbio-list b { font-size: clamp(20px, 1.6vw, 25px); line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; color: var(--ph-text-1, #10214b); }
.ph-flat .rbio-list span { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.4; color: var(--ph-text-2, #4a5578); }

/* The ring holds the middle half and the names stand clear in a quarter
   either side, each joined to its point by a leader that grows to fill the gap:
   written over the photograph they are silver on silver. */
.ph-flat .rbio-ring { position: relative; padding: 0 25%; }
/* The render ships on white, on a white band, and multiply keeps any off white edge of the plate from showing. */
.ph-flat .rbio-ring img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
/* 2026-09-21: the leaders were horizontal lines from a dot, which forced every
   dot onto its label's height and so off the part it named. They are one SVG
   now (see the markup), each dot on its part and each a short diagonal then level to its
   name in the gutter; the names are HTML so they stay real, selectable text. */
.ph-flat .rbio-lead { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ph-flat .rbio-lead path { fill: none; stroke: #7f9be0; stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ph-flat .rbio-lead circle { fill: #3e6ad6; }
.ph-flat .rbio-lead circle.halo { fill: rgba(62, 106, 214, .2); }
.ph-flat .rbio-call { position: absolute; top: var(--y); transform: translateY(-50%); }
.ph-flat .rbio-call.is-l { left: 0; right: calc(76.6% + 12px); text-align: right; }
.ph-flat .rbio-call.is-r { left: calc(76.6% + 12px); right: 0; }
.ph-flat .rbio-call em {
  display: block; font-style: normal;
  font-size: clamp(17px, 1.25vw, 20px); line-height: 1.3; font-weight: 500; color: var(--ph-text-1, #10214b);
}
/* The leaders draw from the dot to the name as the band arrives. */
.rbio-js .ph-flat .rbio-lead path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--rbio-ease) .25s; }
.rbio-js .ph-flat .rbio-lead circle { opacity: 0; transition: opacity .5s ease .2s; }
.rbio-js .ph-flat .rbio.is-in .rbio-lead path { stroke-dashoffset: 0; }
.rbio-js .ph-flat .rbio.is-in .rbio-lead circle { opacity: 1; }

/* Entry: the list rises in a stagger, then the sensors are named in turn. */
.rbio-js .ph-flat .rbio-list li { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform 1s var(--rbio-ease); }
.rbio-js .ph-flat .rbio-call { opacity: 0; transform: translate(-8px, -50%); transition: opacity .6s ease, transform .8s var(--rbio-ease); }
.rbio-js .ph-flat .rbio.is-in .rbio-list li { opacity: 1; transform: none; }
.rbio-js .ph-flat .rbio.is-in .rbio-call { opacity: 1; transform: translateY(-50%); }
.ph-flat .rbio-list li:nth-child(2) { transition-delay: .06s; }
.ph-flat .rbio-list li:nth-child(3) { transition-delay: .12s; }
.ph-flat .rbio-list li:nth-child(4) { transition-delay: .18s; }
.ph-flat .rbio-list li:nth-child(5) { transition-delay: .24s; }
.ph-flat .rbio-list li:nth-child(6) { transition-delay: .30s; }
.ph-flat .rbio-call:nth-of-type(1) { transition-delay: .35s; }
.ph-flat .rbio-call:nth-of-type(2) { transition-delay: .5s; }
.ph-flat .rbio-call:nth-of-type(3) { transition-delay: .65s; }
.ph-flat .rbio-call:nth-of-type(4) { transition-delay: .8s; }

@media (max-width: 900px) {
  .ph-flat .rbio-row { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .ph-flat .rbio-h br { display: none; }
  .ph-flat .rbio-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; }
  .ph-flat .rbio-ring { padding: 0; max-width: 520px; margin: 0 auto; }
  .ph-flat .rbio-call, .ph-flat .rbio-lead { display: none; }
}
@media (max-width: 520px) {
  .ph-flat .rbio-list { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .rbio-js .ph-flat .rbio-list li, .rbio-js .ph-flat .rbio-call,
  .rbio-js .ph-flat .rbio-lead path, .rbio-js .ph-flat .rbio-lead circle { transition: none; }
}