/* Phenome redesign, the app harness: the Phenome Longevity app's health
   screens in dark mode, at the app's own 390 point width. Every size, colour
   and radius below is the Flutter code's (health_detail.dart, app_colors.dart);
   the page scales the whole screen to its phone with --pl-scale. The pl-
   prefix is the harness's alone: Tiffany's lab.css already owns app-. */

.pl-view {
  position: absolute; left: 0; top: 0; width: 390px; height: 844px;
  transform: scale(var(--pl-scale, 1)); transform-origin: 0 0;
  overflow: hidden; text-align: left;
  background: linear-gradient(180deg, #2d2e30 0%, #242124 100%);
  color: #fff; font-family: 'Helvetica Neue', HelveticaNeue, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; letter-spacing: 0;
}
.pl-view p { margin: 0; color: inherit; }
.pl-view i, .pl-view em { font-style: normal; }
.pl-ic { display: inline-block; flex: none; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.pl-info { width: 14px; height: 14px; flex: none; }

/* status bar and the page's bar: a chevron and "Your Health Monitor" */
.pl-status { display: flex; justify-content: space-between; align-items: center; height: 54px; padding: 4px 30px 0 44px; box-sizing: border-box; font-size: 16px; font-weight: 600; }
.pl-status-r { display: flex; gap: 6px; align-items: center; fill: #fff; color: #fff; }
.pl-bar { display: flex; align-items: center; padding: 12px 16px 8px; }
.pl-bar .pl-chev { width: 28px; height: 28px; color: #fff; }
.pl-bar p { flex: 1; text-align: center; font-size: 17px; font-weight: 400; }
.pl-bar-gap { width: 28px; }

.pl-body { padding: 0 16px; }

/* the status bar (54) and the bar (48) stay; the page scrolls under them, moved
   by harness.js as its feature is read */
.pl-view .pl-scroll { position: absolute; left: 0; right: 0; top: 102px; bottom: 0; overflow: hidden; }
.pl-view .pl-scroll > .pl-body { will-change: transform; }
.pl-gap12 { height: 12px; } .pl-gap16 { height: 16px; } .pl-gap24 { height: 24px; } .pl-gap36 { height: 36px; } .pl-gap40 { height: 40px; }

/* the metric picker: the icon, the metric's name, a chevron */
.pl-drop { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 16px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(90deg, rgba(148, 147, 150, 0) 0%, rgba(148, 147, 150, 0.3) 100%), rgba(148, 147, 150, 0.15); }
.pl-drop p { flex: 1; font-size: 15px; font-weight: 600; }
.pl-chev-d { width: 24px; height: 24px; color: rgba(255, 255, 255, 0.7); }

/* D W M 6M Y: the chosen period's letters in the app's blue gradient */
.pl-toggle { display: flex; margin-top: 16px; padding: 4px; border-radius: 30px; background: rgba(255, 255, 255, 0.06); }
.pl-toggle span { flex: 1; padding: 8px 0; border-radius: 20px; text-align: center; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.6); }
.pl-toggle .on { background: #343434; }
.pl-toggle .on em { font-weight: 700; background: linear-gradient(90deg, #30b0cd, #2394cc, #2e74b2); -webkit-background-clip: text; background-clip: text; color: transparent; }

.pl-date { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 16px; }
.pl-date .pl-chev { width: 28px; height: 28px; color: rgba(255, 255, 255, 0.7); }
.pl-date p { font-size: 14px; font-weight: 500; }

/* a vital's headline, chip, description and chart */
.pl-view .pl-k { margin-top: 20px; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.6); }
.pl-view .pl-v { margin-top: 4px; display: flex; align-items: baseline; gap: 4px; }
.pl-v b { font-size: 34px; font-weight: 700; }
.pl-v span { font-size: 18px; }
.pl-view .pl-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 10px; border-radius: 8px; background: rgba(52, 199, 89, 0.15); color: #34c759; font-size: 12px; font-weight: 600; }
.pl-chip i { width: 7px; height: 7px; border-radius: 50%; background: #34c759; }
.pl-view .pl-desc { margin-top: 12px; font-size: 13px; line-height: 1.35; color: rgba(255, 255, 255, 0.6); }
.pl-view .pl-legend { display: flex; justify-content: flex-end; align-items: center; gap: 5px; margin-top: 20px; font-size: 11px; color: rgba(255, 255, 255, 0.6); }
.pl-legend i { width: 14px; height: 4px; border-radius: 2px; opacity: 0.25; }
.pl-legend .pl-info { width: 13px; height: 13px; }
.pl-plot { display: block; margin-top: 6px; overflow: visible; }
.pl-plot text { font-size: 9px; font-weight: 700; fill: rgba(255, 255, 255, 0.3); font-family: inherit; }

/* sleep: the half circle score and its chip */
.pl-gauge { position: relative; margin-top: 20px; }
.pl-gauge svg { display: block; }
.pl-gauge-in { position: absolute; left: 0; right: 0; top: 34%; display: flex; flex-direction: column; align-items: center; }
.pl-gauge-in b { font-size: 48px; font-weight: 600; line-height: 1.15; }
.pl-view .pl-score-chip { display: inline-flex; align-items: center; gap: 3px; margin-top: 4px; padding: 3px 10px; border-radius: 4px; font-size: 12px; font-weight: 500; }
.pl-score-chip .pl-info { width: 12px; height: 12px; }

/* the three sleep tiles: icon, name, percent, a 7 point bar */
.pl-tiles { display: flex; gap: 10px; margin-top: 24px; }
.pl-tile { flex: 1; padding: 14px; border-radius: 12px; background: rgba(240, 255, 255, 0.05); }
.pl-view .pl-tile-l { margin-top: 10px; font-size: 13px; font-weight: 500; line-height: 1.25; }
.pl-view .pl-tile-v { margin-top: 6px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.6); }
.pl-bar7 { display: block; height: 7px; margin-top: 10px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, 0.12); }
.pl-bar7 i { display: block; height: 100%; }

/* last night: the section title, duration and restorative, the stage bars */
.pl-body-scrolled { padding-top: 16px; }
.pl-sec { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 600; }
.pl-sec .pl-info { width: 16px; height: 16px; color: rgba(255, 255, 255, 0.6); }
.pl-pair { display: flex; margin-top: 14px; }
.pl-pair > div { flex: 1; }
.pl-view .pl-pair-k { font-size: 13px; color: rgba(255, 255, 255, 0.6); }
.pl-view .pl-pair-v { margin-top: 6px; }
.pl-pair-v b { font-size: 26px; font-weight: 700; }
.pl-pair-v span { font-size: 18px; font-weight: 400; color: #b44bd7; }
.pl-stages { margin-top: 20px; padding: 12px; border-radius: 12px; background: rgba(148, 147, 150, 0.15); }
.pl-view .pl-stages-legend { display: flex; justify-content: flex-end; align-items: center; gap: 5px; margin-bottom: 10px; font-size: 11px; }
.pl-stages-legend i { width: 14px; height: 10px; box-sizing: border-box; background: rgba(180, 75, 215, 0.15); border-left: 1px dashed #fff; border-right: 1px dashed #fff; }
.pl-stage { margin-bottom: 32px; }
.pl-stage:last-child { margin-bottom: 20px; }
.pl-stage p { display: flex; justify-content: space-between; font-size: 13px; }
.pl-thin { font-weight: 300; }
.pl-track { position: relative; display: block; height: 10px; margin-top: 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.06); }
.pl-track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; }
.pl-track em { position: absolute; top: -3px; bottom: -3px; box-sizing: border-box; background: rgba(180, 75, 215, 0.15); border-left: 1px dashed #fff; border-right: 1px dashed #fff; }

/* under a vital's chart: the day's average and range, in the metric's colour */
.pl-view .pl-fig-t { font-size: 15px; font-weight: 600; }
.pl-view .pl-fig { margin-top: 6px; display: flex; align-items: baseline; gap: 4px; }
.pl-view .pl-fig b { font-size: 28px; font-weight: 700; }
.pl-view .pl-fig span { font-size: 16px; }
.pl-view .pl-fig.is-range b { font-size: 24px; }
.pl-view .pl-fig.is-range span { font-size: 14px; }

/* the cards: daily changes, the green longevity analysis */
.pl-view .pl-card { padding: 16px; border-radius: 14px; background: rgba(148, 147, 150, 0.15); }
.pl-view .pl-card.is-good { background: rgba(52, 199, 89, 0.12); }
.pl-view .pl-card-t { font-size: 14px; font-weight: 600; }
.pl-view .pl-card-b { margin-top: 8px; font-size: 13px; line-height: 1.35; color: rgba(255, 255, 255, 0.6); }

/* highest and lowest, two to a row */
.pl-view .pl-stats { display: flex; gap: 12px; }
.pl-view .pl-stat { flex: 1; min-width: 0; padding: 14px; border-radius: 14px; background: rgba(148, 147, 150, 0.15); }
.pl-view .pl-stat-k { font-size: 13px; color: rgba(255, 255, 255, 0.6); }
.pl-view .pl-stat-v { margin-top: 6px; display: flex; align-items: center; gap: 4px; }
.pl-view .pl-stat-v b { font-size: 22px; font-weight: 700; }
.pl-view .pl-stat-v span { font-size: 13px; color: rgba(255, 255, 255, 0.6); }
.pl-view .pl-stat-v i { width: 8px; height: 8px; margin-left: 2px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.pl-view .pl-stat-s { margin-top: 6px; }

/* influencing factors: cards hung off one line, a branch to each */
.pl-view .pl-h { margin-bottom: 12px; font-size: 16px; font-weight: 600; }
.pl-view .pl-tree { position: relative; }
.pl-view .pl-leaf { position: relative; margin-left: 26px; padding: 14px; border-radius: 14px; background: rgba(148, 147, 150, 0.15); }
.pl-view .pl-leaf + .pl-leaf { margin-top: 8px; }
.pl-view .pl-leaf .pl-card-b { margin-top: 4px; }
.pl-view .pl-leaf::before { content: ''; position: absolute; left: -16px; top: 50%; width: 16px; height: 1.5px; background: rgba(255, 255, 255, 0.12); }
.pl-view .pl-leaf::after { content: ''; position: absolute; left: -16px; top: 0; bottom: -8px; width: 1.5px; background: rgba(255, 255, 255, 0.12); }
.pl-view .pl-leaf:first-child::after { top: 50%; }
.pl-view .pl-leaf:last-child::after { bottom: 50%; }
.pl-view .pl-about { margin-top: -2px; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.6); }

/* blood pressure: systolic and diastolic side by side, a filled and an open dot */
.pl-view .pl-bp { display: flex; gap: 32px; margin-top: 4px; }
.pl-view .pl-bp .pl-v { margin-top: 2px; }
.pl-view .pl-bp-k { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.6); }
.pl-view .pl-bp-k i { width: 8px; height: 8px; border-radius: 50%; background: #9b59b6; box-sizing: border-box; }
.pl-view .pl-bp-k i.is-open { background: none; border: 2px solid #9b59b6; }

/* sleep: today against yesterday, and hours against what was needed */
.pl-view .pl-cmp { display: flex; margin-top: 12px; }
.pl-view .pl-cmp > div { flex: 1; }
.pl-view .pl-cmp-v { margin-top: 2px; font-size: 14px; }
.pl-view .pl-cmp-v b { font-size: 26px; font-weight: 700; }
.pl-view .pl-cmp-v small { font-size: 10px; }
.pl-view .pl-cmp-v.is-then { color: rgba(255, 255, 255, 0.6); }
.pl-view .pl-cmp-v.is-then small { font-size: 8px; opacity: 0.4; }
.pl-view .pl-need { margin-top: 16px; padding: 12px; border-radius: 12px; background: rgba(148, 147, 150, 0.15); }
.pl-view .pl-need p { display: flex; justify-content: space-between; font-size: 13px; }
.pl-view .pl-need .pl-track { margin: 12px 0; border-radius: 2px; background: rgba(255, 255, 255, 0.12); }
.pl-view .pl-dim { color: rgba(255, 255, 255, 0.3); }

/* ---- the genome screens (comprehensive_genomics.dart, disease_slideshow.dart,
   PDF.dart): blue200 #a9b5d9 is the app's colour in dark mode, #1e3a5f its
   secondary, #1e1e1e its cards ------------------------------------------------ */
.gx-ic { display: block; flex: none; }
.gx-head { display: flex; align-items: center; gap: 16px; padding: 16px 24px; }
.gx-head-t { flex: 1; }
.pl-view .gx-hi { font-size: 11px; line-height: 1.2; color: rgba(255, 255, 255, 0.6); }
.pl-view .gx-title { font-size: 15px; line-height: 1.25; font-weight: 600; }
.pl-view .gx-pdf { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 20px; background: rgba(169, 181, 217, 0.15); color: #a9b5d9; font-size: 12px; font-weight: 500; }
.pl-view .pl-scroll.gx-scroll { top: 117px; }
.pl-view .pl-body.gx-body { padding: 0; }
.gx-gap24 { height: 24px; } .gx-gap12 { height: 12px; }
.pl-view .gx-intro { margin: 0 16px; padding: 16px; border-radius: 16px; background: #1e3a5f; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.6); }

/* the card: 560 tall, header, highlights, panels, and View All at its foot */
.gx-card { display: flex; flex-direction: column; height: 560px; margin: 0 6px; border-radius: 16px; background: #1e1e1e; overflow: hidden; }
.gx-card-h { display: flex; align-items: center; gap: 8px; padding: 15px 16px; border-bottom: 1px solid #1e3a5f; }
.gx-card-ic { display: grid; place-items: center; flex: none; width: 60px; height: 60px; border-radius: 50%; background: rgba(169, 181, 217, 0.1); }
.pl-view .gx-card-t { font-size: 16px; line-height: 1.3; font-weight: 600; }
.pl-view .gx-card-d { font-size: 12px; line-height: 1.3; color: rgba(255, 255, 255, 0.6); }
.gx-hl { display: flex; padding: 15px 8px; border-bottom: 1px solid #1e3a5f; }
.gx-hl > div { flex: 1; text-align: center; }
.gx-hl b { display: block; font-size: 28px; line-height: 1.15; font-weight: 600; color: #a9b5d9; }
.pl-view .gx-hl p { margin-top: 4px; font-size: 12px; line-height: 1.25; color: rgba(255, 255, 255, 0.6); }
.pl-view .gx-panels { padding: 12px 16px 0 8px; font-size: 16px; font-weight: 600; }
.gx-row { display: flex; align-items: center; gap: 8px; height: 65px; padding: 0 8px 0 16px; border-bottom: 1px solid #1e3a5f; }
.gx-row.is-last { border-bottom: 0; }
.gx-row-t { flex: 1; min-width: 0; }
.pl-view .gx-row-n { font-size: 14px; line-height: 1.3; font-weight: 500; }
.pl-view .gx-row-d { font-size: 11px; line-height: 1.3; color: rgba(255, 255, 255, 0.6); }
.gx-n { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; font-size: 10px; font-weight: 500; color: #fff; }
.gx-n + .gx-n { margin-left: -2px; }
.pl-view .gx-all { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: auto; padding: 12px 0; background: rgba(30, 58, 95, 0.5); color: #a9b5d9; font-size: 15px; font-weight: 500; }
.gx-dots { display: flex; justify-content: center; gap: 8px; padding: 16px 0; }
.gx-dots i { width: 8px; height: 8px; border-radius: 12px; background: rgba(255, 255, 255, 0.38); }
.gx-dots i.on { width: 24px; background: #a9b5d9; }

/* the card's overview under the dots, then About Genetic Testing */
.gx-ov { padding: 0 20px; }
.pl-view .gx-ov-t { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 600; }
.gx-ov-i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(169, 181, 217, 0.1); }
.pl-view .gx-ov-p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.6); }
.pl-view .gx-pt { display: flex; gap: 10px; margin-top: 8px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.6); }
.pl-view .gx-ov-p + .gx-pt { margin-top: 16px; }
.gx-pt i { flex: none; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: #a9b5d9; }
.gx-about { padding: 24px; }
.pl-view .gx-about-t { margin-bottom: 12px; font-size: 17px; font-weight: 600; }
.gx-info { display: flex; gap: 12px; margin-bottom: 12px; padding: 14px; border-radius: 12px; background: #1e3a5f; }
.gx-info-ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: rgba(169, 181, 217, 0.15); }
.pl-view .gx-info-t { font-size: 15px; font-weight: 600; }
.pl-view .gx-info-b { margin-top: 4px; font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, 0.6); }

/* a panel's findings: the bar, Critical Findings, one card per finding */
.gx-appbar { display: flex; align-items: center; height: 56px; padding: 0 12px; }
.gx-appbar > span { width: 24px; }
.pl-view .gx-appbar p { flex: 1; text-align: center; font-size: 18px; font-weight: 600; }
.gx-slides { position: absolute; left: 0; right: 0; top: 110px; bottom: 0; display: flex; flex-direction: column; }
.pl-view .gx-crit { margin-top: 16px; text-align: center; font-size: 20px; line-height: 1.2; font-weight: 700; }
.pl-view .gx-crit-d { margin-bottom: 8px; text-align: center; font-size: 14px; line-height: 1.3; color: rgba(255, 255, 255, 0.6); }
.gx-track { position: relative; flex: 1; }
.gx-dcard { position: absolute; top: 8px; bottom: 8px; left: 23.5px; width: 343px; display: flex; flex-direction: column; border-radius: 20px; background: #1e1e1e; overflow: hidden; }
.gx-dhead { padding: 20px; border-left: 6px solid; border-radius: 20px 20px 0 0; }
.gx-dtop { display: flex; align-items: center; justify-content: space-between; }
.gx-chip { padding: 6px 16px; border-radius: 20px; font-size: 12px; line-height: 1.2; font-weight: 600; }
.gx-dic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; }
.pl-view .gx-dname { margin: 16px 0 6px; font-size: 16px; line-height: 1.2; font-weight: 700; }
.gx-irow { display: flex; padding: 6px 0; }
.pl-view .gx-irow p:first-child { width: 90px; flex: none; font-size: 11px; font-weight: 500; color: rgba(255, 255, 255, 0.6); }
.pl-view .gx-irow p:last-child { flex: 1; font-size: 10px; font-weight: 600; }
.gx-dbody { flex: 1; padding: 8px 20px 20px; overflow: hidden; }
.pl-view .gx-sec { padding: 12px 0; font-size: 14px; font-weight: 600; }
.gx-sec i { display: block; width: 40px; height: 2px; margin-top: 4px; border-radius: 2px; opacity: 0.6; }
.gx-dt { display: flex; padding: 8px 0; }
.pl-view .gx-dt-k { flex: 2; font-size: 11px; font-weight: 500; color: rgba(255, 255, 255, 0.6); }
.pl-view .gx-dt-v { flex: 3; font-size: 10px; font-weight: 600; }
.pl-view .gx-dtext { padding: 8px 0 16px; font-size: 13px; line-height: 1.6; }
.gx-ind { display: flex; justify-content: center; gap: 8px; padding: 24px 0; }
.gx-ind i { width: 8px; height: 8px; border-radius: 4px; background: rgba(169, 181, 217, 0.2); }
.gx-ind i.on { width: 24px; background: #a9b5d9; }

/* Generate PDF: the page dims under the app's dialog */
.gx-veil { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.54); }
.gx-dialog { width: 320px; box-sizing: border-box; padding: 24px; border-radius: 16px; background: #1e1e1e; text-align: center; }
.pl-view .gx-dialog-t { font-size: 16px; line-height: 1.3; font-weight: 600; }
.pl-view .gx-dialog-b { margin-top: 12px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.6); }
.pl-view .gx-dialog-btn { display: inline-block; margin-top: 12px; padding: 5px 30px; border-radius: 50px; background: #a9b5d9; color: #fff; font-size: 12px; line-height: 26px; font-weight: 500; }

/* ---- the gut and oral microbiome screens (GutHealth.dart, circular_header.dart,
   diversity_detail_page.dart, risk_detail_page.dart, OralHealth.dart, PDF.dart):
   blue200 #a9b5d9 and its tints again, #1e3a5f the secondary, #1e1e1e the cards.
   The header and the page under it are the genome screens' (gx-head, gx-scroll).
   Their prefix is mg-, as the microbiome page's own mb.css owns mb- ------------ */
.mg-grow { flex: 1; min-width: 0; }
.mg-nowrap { white-space: nowrap; }
.mg-gap9 { height: 9px; } .mg-gap12 { height: 12px; } .mg-gap15 { height: 15px; } .mg-gap16 { height: 16px; } .mg-gap20 { height: 20px; } .mg-gap24 { height: 24px; }
.mg-safe { height: 34px; }
.mg-tile, .mg-sec-ic, .mg-disc { display: grid; place-items: center; flex: none; background: rgba(169, 181, 217, 0.1); }
.mg-tile { width: 36px; height: 36px; border-radius: 10px; }
.mg-sec-ic { width: 40px; height: 40px; border-radius: 50%; }
.mg-disc { width: 50px; height: 50px; border-radius: 50%; }
.mg-ring { display: block; overflow: visible; }

/* over the cards: what the analysis is, then the overall score and the three
   sections, each with its ring, its chips and View all under it */
.mg-about { display: flex; align-items: center; gap: 12px; margin: 12px 20px; padding: 12px; border: 1px solid rgba(169, 181, 217, 0.1); border-radius: 16px; background: rgba(30, 58, 95, 0.3); }
.pl-view .mg-about p { flex: 1; font-size: 11px; line-height: 1.5; color: rgba(255, 255, 255, 0.6); }
.mg-over { margin: 0 8px; padding: 0 8px; border-radius: 20px; background: #1e1e1e; }
.mg-over.is-tail { border-radius: 0 0 20px 20px; }
.mg-overall { display: flex; flex-direction: column; align-items: center; padding: 12px; }
.pl-view .mg-overall-t { font-size: 12px; line-height: 1.2; font-weight: 600; }
.mg-big { position: relative; display: grid; place-items: center; width: 170px; height: 170px; margin-top: 12px; border-radius: 50%; background: #1e1e1e; box-shadow: 0 0 15px 2px rgba(169, 181, 217, 0.03); }
.mg-big-in { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.mg-big-in b { font-size: 44px; line-height: 1.2; font-weight: 700; }
.pl-view .mg-big-in p { font-size: 13px; line-height: 1.2; font-weight: 500; color: rgba(255, 255, 255, 0.6); }
.mg-sec-box { padding: 12px; border: 1px solid rgba(169, 181, 217, 0.1); border-radius: 25px 25px 0 0; background: rgba(30, 58, 95, 0.2); }
.mg-sec-h { display: flex; align-items: center; }
.mg-sec-h > .mg-sec-ic, .mg-metric-h > .mg-sec-ic, .mg-cat-h > .mg-sec-ic { margin-right: 12px; }
.pl-view .mg-sec-t { font-size: 12px; line-height: 1.2; font-weight: 600; }
.pl-view .mg-sec-d { font-size: 10px; line-height: 1.2; color: rgba(255, 255, 255, 0.6); }
.mg-gauge { position: relative; display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: #1e1e1e; }
.mg-gauge.is-glow { box-shadow: 0 0 10px 1px rgba(169, 181, 217, 0.05); }
.mg-gauge-in { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; }
.mg-gauge-in b { font-size: 11px; line-height: 1.2; font-weight: 700; }
.mg-sec-rule { display: block; height: 1px; margin-top: 12px; background: rgba(158, 158, 158, 0.3); }
.mg-chips { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 12px; }
.mg-chip { display: flex; align-items: center; gap: 6px; padding: 4px 5px; border: 0.5px solid rgba(169, 181, 217, 0.15); border-radius: 12px; background: rgba(169, 181, 217, 0.08); color: #a9b5d9; font-size: 9px; line-height: 1.2; font-weight: 500; }
.mg-chip i { width: 4px; height: 4px; border-radius: 50%; background: #a9b5d9; }
.pl-view .mg-find { display: flex; justify-content: center; align-items: center; gap: 4px; padding: 8px 12px; border: 0.5px solid rgba(169, 181, 217, 0.2); border-radius: 0 0 20px 20px; background: rgba(169, 181, 217, 0.12); color: #a9b5d9; font-size: 12px; line-height: 1.2; font-weight: 600; }

/* the intro, then the three cards the page swipes between (425 tall), the dots
   and the card in view's About */
.pl-view .mg-intro { margin: 0 16px; padding: 16px; border-radius: 16px; background: #1e1e1e; font-size: 11px; line-height: 1.6; color: rgba(255, 255, 255, 0.6); }
.mg-swiper { position: relative; height: 425px; overflow: hidden; }
.mg-page { position: absolute; top: 0; width: 351px; height: 425px; padding: 10px 6px; box-sizing: border-box; }
.mg-page.on { padding: 0 6px; }
.mg-card { display: flex; flex-direction: column; height: 100%; border-radius: 16px; background: #1e1e1e; }
.mg-card-h { display: flex; align-items: center; padding: 14px; border-bottom: 1px solid #1e3a5f; }
.mg-card-h > .mg-disc { margin-right: 16px; }
.pl-view .mg-card-t { font-size: 14px; line-height: 1.2; font-weight: 600; }
.pl-view .mg-card-d { font-size: 10px; line-height: 1.2; color: rgba(255, 255, 255, 0.6); }
.mg-hl { display: flex; justify-content: space-around; margin: 10px 0 16px; text-align: center; }
.mg-hl b { display: block; font-size: 18px; line-height: 1.2; font-weight: 700; color: #a9b5d9; }
.pl-view .mg-hl p { font-size: 10px; line-height: 1.2; color: rgba(255, 255, 255, 0.6); }
.mg-panel { flex: 1; min-height: 0; padding: 0 20px; }
.pl-view .mg-panel-t { margin-bottom: 8px; font-size: 12px; line-height: 1.2; font-weight: 600; }
.mg-row { display: flex; align-items: center; height: 55px; padding: 0 8px; border-bottom: 1px solid #1e3a5f; }
.mg-row > .gx-ic { margin-right: 10px; }
.pl-view .mg-row-t { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; line-height: 1.2; font-weight: 500; }
.pl-view .mg-row-d { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 9px; line-height: 1.2; color: rgba(255, 255, 255, 0.6); }
.mg-row-s { flex: none; padding: 1px 4px; border-radius: 6px; background: rgba(169, 181, 217, 0.1); color: #a9b5d9; font-size: 7px; line-height: 1.2; font-weight: 500; }
.mg-row-gap { flex: none; width: 6px; }
.mg-row-v { flex: none; font-size: 11px; line-height: 1.2; font-weight: 600; color: #a9b5d9; }
.pl-view .mg-all { display: flex; justify-content: center; align-items: center; gap: 4px; padding: 8px 0; border: 0.5px solid rgba(169, 181, 217, 0.2); border-radius: 0 0 25px 25px; background: rgba(169, 181, 217, 0.12); color: #a9b5d9; font-size: 10px; line-height: 1.2; font-weight: 600; }
.mg-dots { display: flex; justify-content: center; gap: 8px; padding: 16px 0; }
.mg-dots i { width: 8px; height: 8px; border-radius: 12px; background: rgba(169, 181, 217, 0.3); }
.mg-dots i.on { width: 24px; background: #a9b5d9; }
.mg-ov { margin: 0 20px; padding: 20px; border-radius: 16px; background: #1e1e1e; }
.mg-ov-h { display: flex; align-items: center; gap: 12px; }
.pl-view .mg-ov-h p { flex: 1; font-size: 16px; line-height: 1.2; font-weight: 600; }
.pl-view .mg-ov-b { margin-top: 16px; padding: 16px; border: 1px solid rgba(169, 181, 217, 0.1); border-radius: 12px; background: rgba(30, 58, 95, 0.3); font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, 0.6); }

/* a card's View all page: the bar (back, the page's name centred as on iOS),
   the list 16 in from 110 down, its header card */
.mg-bar { position: relative; height: 56px; }
.mg-bar .gx-ic { position: absolute; left: 16px; top: 16px; }
.pl-view .mg-bar p { font-size: 18px; line-height: 56px; font-weight: 600; text-align: center; }
.pl-view .pl-scroll.mg-scroll { top: 110px; }
.pl-view .pl-body.mg-body { padding: 16px 16px 0; overflow: hidden; }
.mg-headcard { padding: 20px; border-radius: 16px; background: #1e1e1e; }
.mg-headcard-r { display: flex; align-items: center; gap: 16px; }
.pl-view .mg-hc-t { font-size: 16px; line-height: 1.2; font-weight: 600; }
.pl-view .mg-hc-s { font-size: 12px; line-height: 1.2; color: rgba(255, 255, 255, 0.6); }
.pl-view .mg-hc-d { margin-top: 16px; font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, 0.6); }

/* Diversity Analysis: a card per metric, the value on its gauge, the analysis
   and the recommendation */
.mg-metric { margin-bottom: 16px; padding: 20px; border-radius: 16px; background: #1e1e1e; }
.mg-metric-h { display: flex; align-items: center; }
.pl-view .mg-metric-t { font-size: 16px; line-height: 1.2; font-weight: 600; }
.pl-view .mg-metric-d { font-size: 12px; line-height: 1.2; color: rgba(255, 255, 255, 0.6); }
.mg-badge { flex: none; padding: 4px 8px; border-radius: 12px; background: rgba(169, 181, 217, 0.1); color: #a9b5d9; font-size: 12px; line-height: 1.2; font-weight: 600; }
.pl-view .mg-your { display: flex; align-items: center; margin-top: 16px; font-size: 14px; line-height: 1.2; color: rgba(255, 255, 255, 0.6); }
.mg-your span { white-space: pre; }
.mg-your b { font-size: 18px; font-weight: 700; color: #a9b5d9; }
.mg-reg { margin-top: 12px; }
.mg-reg-top { position: relative; height: 25px; }
.mg-reg-v { position: absolute; bottom: 0; display: flex; flex-direction: column; align-items: center; }
.mg-reg-v span { padding: 0 5px; border: 1.5px solid #a9b5d9; border-radius: 10px; color: #a9b5d9; font-size: 10px; line-height: 1.2; font-weight: 700; }
.mg-reg-v i { width: 0; height: 0; border-left: 2.5px solid transparent; border-right: 2.5px solid transparent; border-top: 3px solid #a9b5d9; }
.mg-reg-bar { position: relative; height: 15px; }
.mg-reg-bar i { position: absolute; left: 0; right: 0; top: 2.5px; height: 10px; border-radius: 5px; background: #c3c4c3; }
.mg-reg-bar b { position: absolute; top: 0.5px; display: flex; justify-content: space-between; align-items: center; height: 14px; padding: 0 8px; box-sizing: border-box; border-radius: 5px; background: #a9b5d9; }
.mg-reg-bar em { font-size: 8px; line-height: 1.2; font-weight: 700; color: #fff; }
.pl-view .mg-an-t { margin-top: 16px; font-size: 14px; line-height: 1.2; font-weight: 600; }
.pl-view .mg-an { margin-top: 8px; font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, 0.6); }
.mg-note { margin-top: 12px; padding: 12px; border: 1px solid rgba(169, 181, 217, 0.1); border-radius: 8px; background: rgba(169, 181, 217, 0.05); }
.pl-view .mg-note-t { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.2; font-weight: 600; color: #a9b5d9; }
.pl-view .mg-note-b { margin-top: 6px; font-size: 11px; line-height: 1.4; color: rgba(255, 255, 255, 0.6); }

/* Health Risk Assessment: the summary, search and the category filters (all on),
   the legend, then a card per category with a card per condition */
.mg-box { padding: 16px; border-radius: 12px; background: #1e1e1e; }
.pl-view .mg-box-t { font-size: 14px; line-height: 1.2; font-weight: 600; }
.mg-sum, .mg-legend { display: flex; margin-top: 12px; text-align: center; }
.mg-sum > div, .mg-legend > div { flex: 1; min-width: 0; }
.mg-sum b { display: block; font-size: 18px; line-height: 1.2; font-weight: 700; color: #a9b5d9; }
.pl-view .mg-sum p { font-size: 10px; line-height: 1.2; color: rgba(255, 255, 255, 0.6); }
.mg-legend > div { display: flex; flex-direction: column; align-items: center; }
.mg-legend i { width: 32px; height: 8px; margin-bottom: 6px; border-radius: 4px; }
.mg-legend b { font-size: 10px; line-height: 1.2; font-weight: 600; }
.pl-view .mg-legend p { font-size: 8px; line-height: 1.2; color: rgba(255, 255, 255, 0.6); }
.mg-search { display: flex; align-items: center; height: 48px; border: 1px solid rgba(169, 181, 217, 0.2); border-radius: 12px; background: #1e1e1e; }
.mg-search .gx-ic { margin: 0 8px 0 12px; }
.pl-view .mg-search p { font-size: 12px; line-height: 1.2; color: rgba(255, 255, 255, 0.6); }
.mg-filters { display: flex; margin-top: 12px; overflow: hidden; }
.mg-filter { display: flex; flex: none; align-items: center; gap: 6px; margin-right: 8px; padding: 3px 6px; border: 1px solid #a9b5d9; border-radius: 20px; background: #a9b5d9; color: #fff; font-size: 9px; line-height: 1.2; font-weight: 500; white-space: nowrap; }
.mg-cat { margin-bottom: 16px; padding: 16px; border-radius: 16px; background: #1e1e1e; }
.mg-cat-h { display: flex; align-items: center; margin-bottom: 16px; }
.mg-cat-chips { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.mg-cat-chips span { padding: 3px 8px; border-radius: 10px; color: #fff; font-size: 10px; line-height: 1.2; font-weight: 600; }
.mg-dis { margin-bottom: 12px; padding: 12px; border: 0.5px solid rgba(169, 181, 217, 0.1); border-radius: 12px; background: #1e1e1e; }
.mg-dis-h { display: flex; align-items: center; }
.mg-dis-t { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; }
.pl-view .mg-dis-t p { font-size: 13px; line-height: 1.2; font-weight: 600; white-space: nowrap; }
.mg-dis-b { display: flex; flex: none; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 50px; color: #fff; font-size: 12px; line-height: 1.2; font-weight: 700; }
.mg-dis-s, .mg-dis-e { display: flex; justify-content: space-between; }
.mg-dis-s { margin-top: 12px; }
.pl-view .mg-dis-s p { font-size: 10px; line-height: 1.2; font-weight: 500; }
.pl-view .mg-dis-s p + p { font-weight: 600; color: #a9b5d9; }
.mg-dis-bar { position: relative; height: 8px; margin-top: 6px; border-radius: 4px; background: linear-gradient(90deg, rgba(169, 181, 217, 0.2) 0%, rgba(169, 181, 217, 0.5) 40%, #a9b5d9 100%); }
.mg-dis-bar span { position: absolute; inset: 0; overflow: hidden; }
.mg-dis-bar i { position: absolute; top: -4px; width: 16px; height: 16px; box-sizing: border-box; border: 2px solid #a9b5d9; border-radius: 50%; background: #fff; }
.mg-dis-e { margin-top: 4px; }
.pl-view .mg-dis-e p { font-size: 8px; line-height: 1.2; color: rgba(255, 255, 255, 0.6); }
.pl-view .mg-dis-k { margin-top: 12px; font-size: 11px; line-height: 1.2; font-weight: 600; }
.pl-view .mg-dis-k.is-rec { margin-top: 8px; }
.pl-view .mg-dis-p { margin-top: 4px; white-space: pre-wrap; font-size: 10px; line-height: 1.4; color: rgba(255, 255, 255, 0.6); }
.mg-dis-btns { display: flex; gap: 8px; margin-top: 12px; }
.pl-view .mg-dis-btns p { display: flex; flex: 1; justify-content: center; align-items: center; gap: 6px; min-width: 0; padding: 8px 12px; border: 0.5px solid rgba(169, 181, 217, 0.3); border-radius: 8px; background: rgba(169, 181, 217, 0.1); color: #a9b5d9; font-size: 10px; line-height: 1.2; font-weight: 500; text-align: center; }