/* ═══════════════════════════════════════════════════════════════════════ HEALTH · Concept C — The Health Book (b211) Loaded last, after design-v2-app.css, profile-c.css, trips-c.css, garage-c.css, school-c.css and pets-c.css. Gated on `body.hv-on`, set by show() for the Health view only. The Health PROFILE is a sheet and so lives outside #view-health, which is why the gate is on and not on the view — the same arrangement School uses. ON THE PREFIX. `hv-` was already half-taken: Profile owns .hv-order-row, .hv-order-ic, .hv-order-img, .hv-order-name, .hv-order-hint, .hv-hide-sw, .hv-opt, .hv-seg and .hv-grip for the list-ordering screen, and style.css owns .hv-task for the Health task-row modifier from b210. Those nine names are avoided here by hand. Everything this file adds is new, `hv-` prefixed, and gated — `body.pc-on` and `body.hv-on` are never set together, so the two families cannot meet. AND WHY IT DOES NOT REDEFINE THE TASK ROW. Health's checklist renders through prvTaskRow() with mod 'hv-task', exactly as Home, Grocery, School, Garage and Pets do: bell leads, history trails, purple drawn tick, delete in the edit sheet. There is no rule in this file that touches .tc-row. WHAT HEALTH IS. A record: who looks after you, what you need to do, what changed in your medical information, where the records are, and how to reach the right provider. There is no rule below for a step count, a weight, a sleep score or a blood pressure, because there is no such screen and there is no endpoint that would feed one. ═══════════════════════════════════════════════════════════════════════ */ body.hv-on { /* The tile tokens the other four Concept-C sections already agree on. Same values, not a fifth set. */ --hv-tile-bg: rgba(255, 255, 255, 0.72); --hv-tile-bd: rgba(20, 16, 38, 0.07); --hv-shadow: 0 1px 3px rgba(20, 20, 40, 0.05); --hv-rad: 16px; --hv-act-bg: rgba(255, 255, 255, 0.62); --hv-chip-bd: rgba(20, 16, 38, 0.22); /* The call button. Garage uses this green at the roadside, School for the office, Pets for the vet; Health's equivalent is ringing the surgery. */ --hv-call-bg: #16704A; --hv-call-tx: #ffffff; --hv-ok-ink: #1F7A52; --hv-ok-bg: rgba(31, 122, 82, 0.10); --hv-warn-ink: #A0620C; --hv-warn-bg: rgba(232, 147, 12, 0.14); --hv-quiet-bg: rgba(120, 120, 128, 0.09); /* Health's own colour, hue 350 — the soft red the member cards have worn since b158. Deliberately NOT the semantic red (355) used for a warning: this identifies a section, that reports a state. */ --hv-rose: hsl(350 62% 44%); --hv-rose-sf: hsl(350 72% 52% / 0.13); /* The earlier of the two trend bars. Muted so a reading and the one before it are told apart at a glance. */ --hv-trend-was: hsl(350 62% 44% / 0.30); /* Out of range, high. Separate from --hv-rose: rose identifies the section, this reports a state. */ --hv-high-ink: #B3261E; --hv-high-bg: rgba(179, 38, 30, 0.10); --hv-band: linear-gradient(145deg, hsl(350 78% 92%), hsl(350 62% 84%)); /* Role tints for the care circle. */ --hv-t-gp: rgba(10, 108, 255, 0.13); --hv-t-dentist: rgba(232, 147, 12, 0.16); --hv-t-pharmacy: rgba(47, 143, 95, 0.16); --hv-t-optician: rgba(110, 86, 207, 0.16); --hv-t-physio: rgba(0, 150, 160, 0.15); --hv-t-consultant: rgba(200, 60, 90, 0.14); --hv-t-hospital: rgba(120, 120, 128, 0.16); --hv-t-other: rgba(120, 120, 128, 0.14); /* The AI reading surface. One tint, used nowhere else, so "a machine read this" is legible at a glance and never confused with a status. */ --hv-ai-bg: rgba(110, 86, 207, 0.09); --hv-ai-ink: #4A3AB8; /* THE GROUND. Concept C specifies it (--bg-grad) and b211 never painted it, which is what made night mode grey-on-grey: the tiles below are translucent white, and translucent white over the app's light aurora wallpaper is a washed grey, not a card. They only read as surfaces over this. */ --hv-ground: radial-gradient(ellipse 90% 70% at 20% 10%, #DDD5FF 0%, #EEF2FF 50%, #DFF4F0 100%); /* Text fields. Health defines its own rather than borrowing a light default that would stay light in the dark. */ --hv-field-bg: rgba(255, 255, 255, 0.80); --hv-field-bd: rgba(20, 16, 38, 0.12); --hv-field-tx: #14121F; } html[data-theme="dark"] body.hv-on { --hv-tile-bg: rgba(255, 255, 255, 0.07); --hv-tile-bd: rgba(255, 255, 255, 0.12); --hv-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); --hv-act-bg: rgba(255, 255, 255, 0.07); --hv-chip-bd: rgba(255, 255, 255, 0.30); --hv-call-bg: #2F8F5F; --hv-ok-ink: #7BE0AE; --hv-ok-bg: rgba(123, 224, 174, 0.14); --hv-warn-ink: #F0B45C; --hv-warn-bg: rgba(240, 180, 92, 0.16); --hv-quiet-bg: rgba(255, 255, 255, 0.08); --hv-rose: hsl(350 88% 76%); --hv-rose-sf: hsl(350 80% 62% / 0.20); --hv-trend-was: hsl(350 88% 76% / 0.32); --hv-high-ink: #FF9A90; --hv-high-bg: rgba(255, 120, 110, 0.15); --hv-band: linear-gradient(145deg, hsl(350 44% 30%), hsl(350 38% 20%)); --hv-t-gp: rgba(90, 166, 255, 0.20); --hv-t-dentist: rgba(255, 180, 80, 0.20); --hv-t-pharmacy: rgba(123, 224, 174, 0.18); --hv-t-optician: rgba(168, 150, 240, 0.22); --hv-t-physio: rgba(90, 220, 225, 0.18); --hv-t-consultant: rgba(255, 140, 165, 0.18); --hv-t-hospital: rgba(255, 255, 255, 0.12); --hv-t-other: rgba(255, 255, 255, 0.10); --hv-ai-bg: rgba(168, 150, 240, 0.14); --hv-ai-ink: #C3B4FF; --hv-ground: radial-gradient(ellipse 90% 70% at 20% 10%, #1a0845 0%, #06001a 45%, #000d18 100%); --hv-field-bg: rgba(255, 255, 255, 0.06); --hv-field-bd: rgba(255, 255, 255, 0.16); --hv-field-tx: rgba(255, 255, 255, 0.95); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body.hv-on { --hv-tile-bg: rgba(255, 255, 255, 0.07); --hv-tile-bd: rgba(255, 255, 255, 0.12); --hv-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); --hv-act-bg: rgba(255, 255, 255, 0.07); --hv-chip-bd: rgba(255, 255, 255, 0.30); --hv-call-bg: #2F8F5F; --hv-ok-ink: #7BE0AE; --hv-ok-bg: rgba(123, 224, 174, 0.14); --hv-warn-ink: #F0B45C; --hv-warn-bg: rgba(240, 180, 92, 0.16); --hv-quiet-bg: rgba(255, 255, 255, 0.08); --hv-rose: hsl(350 88% 76%); --hv-rose-sf: hsl(350 80% 62% / 0.20); --hv-trend-was: hsl(350 88% 76% / 0.32); --hv-high-ink: #FF9A90; --hv-high-bg: rgba(255, 120, 110, 0.15); --hv-band: linear-gradient(145deg, hsl(350 44% 30%), hsl(350 38% 20%)); --hv-t-gp: rgba(90, 166, 255, 0.20); --hv-t-dentist: rgba(255, 180, 80, 0.20); --hv-t-pharmacy: rgba(123, 224, 174, 0.18); --hv-t-optician: rgba(168, 150, 240, 0.22); --hv-t-physio: rgba(90, 220, 225, 0.18); --hv-t-consultant: rgba(255, 140, 165, 0.18); --hv-t-hospital: rgba(255, 255, 255, 0.12); --hv-t-other: rgba(255, 255, 255, 0.10); --hv-ai-bg: rgba(168, 150, 240, 0.14); --hv-ai-ink: #C3B4FF; --hv-ground: radial-gradient(ellipse 90% 70% at 20% 10%, #1a0845 0%, #06001a 45%, #000d18 100%); --hv-field-bg: rgba(255, 255, 255, 0.06); --hv-field-bd: rgba(255, 255, 255, 0.16); --hv-field-tx: rgba(255, 255, 255, 0.95); } } /* Health owns its whole screen, so it paints its own ground rather than inheriting the app wallpaper. Fixed, so the gradient does not slide up the page as a long record scrolls. */ body.hv-on { background: var(--hv-ground); } body.hv-on #view-health { background: var(--hv-ground); } /* Fixed and behind everything, so a short record does not leave the app's own wallpaper showing in the strip below the last card. */ body.hv-on::before { content: ''; position: fixed; inset: 0; z-index: -1; background: var(--hv-ground); pointer-events: none; } /* THE SECTION CARD. style.css only gives .pet-section a surface under `.sheet.profile-page` — Health used to be a sheet and now is a view, so every card lost its background and its rows floated on the wallpaper. School hit exactly this and answered it the same way (body.sv-on .pet-section). */ body.hv-on .pet-section, body.hv-on .pet-info-cell, body.hv-on .pet-act { background: var(--hv-tile-bg); border: 1px solid var(--hv-tile-bd); border-radius: var(--hv-rad); box-shadow: var(--hv-shadow); color: var(--dv2-text-primary); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); } body.hv-on .pet-section { padding: 13px 14px; margin-top: 10px; } /* .pet-profile-body caps itself at 78vh and scrolls internally — right for a bottom sheet, wrong for a home screen, where it made the record scroll inside a 702px box while the page underneath stayed still. The view scrolls now. */ body.hv-on .pet-profile-body { max-height: none; overflow: visible; padding: 0 0 28px; } /* Read / Explain / Compare, shown only while the book is empty. */ body.hv-on .hv-value { margin-top: 10px; padding: 15px 16px 16px; border-radius: var(--hv-rad); background: var(--hv-tile-bg); border: 1px solid var(--hv-tile-bd); box-shadow: var(--hv-shadow); color: var(--dv2-text-primary); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); } body.hv-on .hv-value-h { margin: 0 0 11px; font-size: 15.5px; font-weight: 700; letter-spacing: -.014em; } body.hv-on .hv-value-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } body.hv-on .hv-value-l li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.4px; line-height: 1.45; color: var(--dv2-text-sub); } body.hv-on .hv-value-l li b { color: var(--dv2-text-primary); font-weight: 700; } body.hv-on .hv-value-l .hv-ic { width: 17px; height: 17px; margin-top: 1px; color: var(--hv-rose); } body.hv-on .hv-value-f { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding-top: 11px; border-top: 1px solid var(--hv-tile-bd); font-size: 12.2px; line-height: 1.45; color: var(--dv2-text-muted); } body.hv-on .hv-value-f .hv-ic { width: 15px; height: 15px; margin-top: 1px; flex: none; } body.hv-on .hv-value-cta { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 13px; padding: 12px; border: 0; cursor: pointer; border-radius: 13px; font-size: 14.5px; font-weight: 700; background: var(--hv-rose); color: #fff; } body.hv-on .hv-value-cta .hv-ic { width: 17px; height: 17px; } /* Fields. .pe-input is transparent by default and .pe-field paints a light card in style.css, so in the dark the NHS number sat in a pale grey pill with grey-on-grey text inside it. */ body.hv-on .pe-field { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0 0 10px; } body.hv-on .pe-field:last-child { margin-bottom: 0; } body.hv-on .pe-label { display: block; margin-bottom: 5px; color: var(--dv2-text-muted); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } body.hv-on .pe-input { -webkit-appearance: none; appearance: none; box-sizing: border-box; max-width: 100%; min-width: 0; padding: 11px 13px; border-radius: 12px; background: var(--hv-field-bg); border: 1px solid var(--hv-field-bd); color: var(--hv-field-tx); } body.hv-on .pe-input::placeholder { color: var(--dv2-text-muted); opacity: 1; } body.hv-on .pe-input:disabled { opacity: .6; } body.hv-on .pe-input:focus { border-color: var(--hv-rose); } /* THE ACCORDIONS. style.css only collapses under `.sheet.profile-page`, so in a view wireProfileAccordions() added the chevron and the toggle handler set .collapsed — and nothing hid. Every card sat open and no chevron did anything. Third thing this file has had to un-sheet. */ body.hv-on .pf-acc.collapsed .pf-acc-chev { transform: rotate(-90deg); } body.hv-on .pf-acc:not(.collapsed) .pf-acc-body { margin-top: 12px; } body.hv-on .pf-acc.collapsed .pf-acc-body { display: none; } /* The header is title | tools | chevron. Without flex:1 on the title the tools sat jammed against the last word and the chevron floated off on its own. */ body.hv-on .pf-acc-header { display: flex; align-items: center; gap: 10px; cursor: pointer; } body.hv-on .pf-acc-header .pet-info-h { flex: 1; min-width: 0; margin: 0; } body.hv-on .pet-sec-tools { flex: none; display: flex; align-items: center; gap: 8px; } body.hv-on .pet-sec-head { display: flex; align-items: center; gap: 10px; } body.hv-on .pet-sec-head .pet-info-h { flex: 1; min-width: 0; margin: 0; } body.hv-on .pf-acc-chev { flex: none; color: var(--dv2-text-muted); transition: transform .18s ease; } /* The care circle needs air under it before the provider cards start. */ body.hv-on .hv-circle { margin-bottom: 12px; } body.hv-on .hv-prov + .hv-prov { margin-top: 10px; } /* #12 — the back button sat hard against the left edge and looked clipped. .pets-topbar-row carries no horizontal padding of its own. b232 · 14px was two short of SECTION_CHROME R1's 16 and not in the exemptions table — the only section carrying its own wrong number rather than none at all, which is why it read as fixed. Both states. */ body.hv-on #view-health .pets-topbar-row { padding: 0 16px; } body.hv-on #view-health .pets-topbar-row .title-wrap { flex: 0 1 auto; } /* The hamburger on the name card — the shortcut School's card has. */ body.hv-on .hv-burger { flex: none; width: 34px; height: 34px; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; /* b221.1 — SECTION_CHROME R2: round, like every other section's burger. 11px made it the only squared one in the app. */ gap: 4px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.22); } body.hv-on .hv-burger span { display: block; width: 15px; height: 1.9px; border-radius: 2px; background: var(--dv2-text-primary); } html[data-theme="dark"] body.hv-on .hv-burger { background: rgba(255, 255, 255, 0.14); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body.hv-on .hv-burger { background: rgba(255, 255, 255, 0.14); } } /* NHS number, on the name card rather than in a section of its own. */ body.hv-on .hv-nhs { display: flex; align-items: baseline; gap: 10px; margin-top: 11px; padding-top: 11px; border-top: 1px solid rgba(255, 255, 255, 0.28); } body.hv-on .hv-nhs-l { flex: none; font-size: 10.6px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; opacity: .72; } body.hv-on .hv-nhs-i { flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; padding: 0; font-family: inherit; font-size: 14.5px; font-weight: 700; letter-spacing: .01em; color: inherit; text-align: right; } body.hv-on .hv-nhs-i::placeholder { color: inherit; opacity: .5; font-weight: 600; } body.hv-on .hv-nhs-i:focus { outline: none; } /* The sex picker sits in the same row as the NHS number and must look like it, not like a form control dropped onto a coloured card. */ body.hv-on select.hv-nhs-i { -webkit-appearance: none; appearance: none; cursor: pointer; text-align: right; text-align-last: right; padding-right: 0; } body.hv-on select.hv-nhs-i option { color: #14121F; } body.hv-on .hv-nhs + .hv-nhs { margin-top: 7px; padding-top: 7px; } /* Expand / collapse all. */ /* The menu's line icons, at the size .pm-item expects. */ body.hv-on .hv-ic-sm, #profile-menu .hv-ic-sm { width: 18px; height: 18px; } /* b221.1 — SECTION_CHROME R3. Two right-aligned accent text links, the Pets control, replacing two half-width filled boxes. Secondary controls should not carry more weight than the card above them. */ body.hv-on .hv-allfold { display: flex; justify-content: flex-end; padding: 8px 2px 2px; margin-top: 4px; } body.hv-on .hv-allfold button { border: 0; background: none; cursor: pointer; padding: 6px 4px; border-radius: 0; color: var(--dv2-link, #5b4fe0); font-family: inherit; font-size: 13.5px; font-weight: 600; } /* The one way into the Vault, in place of a second copy of every document. */ body.hv-on .hv-vault-link { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 11px; padding: 12px 13px; cursor: pointer; border-radius: 13px; border: 1px solid var(--hv-tile-bd); background: var(--hv-act-bg); color: var(--dv2-text-primary); font-family: inherit; font-size: 14px; font-weight: 650; text-align: left; } body.hv-on .hv-vault-link > span { flex: 1; min-width: 0; } body.hv-on .hv-vault-link > .hv-ic:last-child { color: var(--dv2-text-muted); } /* ── b214 · Results, by test rather than by report ─────────────────────── One row per measurement. The coloured edge is the only judgement on the row, and it is the lab's own: inside the printed range, or outside it. No edge means the range could not be read, or is split by sex and disagrees with itself — the row says nothing rather than guess. */ body.hv-on .hv-panel { margin-bottom: 12px; } body.hv-on .hv-panel:last-child { margin-bottom: 0; } body.hv-on .hv-panel-h { display: flex; align-items: center; gap: 10px; padding: 2px 0 9px; } body.hv-on .hv-panel-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--hv-rose-sf); color: var(--hv-rose); } body.hv-on .hv-panel-ic .hv-ic { width: 16px; height: 16px; } body.hv-on .hv-panel-n { flex: 1; min-width: 0; } body.hv-on .hv-panel-n b { display: block; font-size: 14.5px; font-weight: 750; letter-spacing: -.012em; } body.hv-on .hv-panel-n span { display: block; font-size: 11.8px; color: var(--dv2-text-muted); font-variant-numeric: tabular-nums; } /* The report's own verdict, and the honest blank where a range was not printed. Neither is the app's opinion — one is quoted, the other is an admission. */ body.hv-on .hv-says { flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--hv-quiet-bg); color: var(--dv2-text-sub); } body.hv-on .hv-says.hv-says-flag { background: var(--hv-warn-bg); color: var(--hv-warn-ink); } body.hv-on .hv-norange { font-style: normal; opacity: .7; } /* Marks a range that came from published reference data rather than from this person's own report. It must never look like their lab's own figure. */ body.hv-on .hv-rsrc { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; background: var(--hv-quiet-bg); color: var(--dv2-text-muted); vertical-align: 1px; } body.hv-on .hv-rrow { display: flex; align-items: center; gap: 11px; width: 100%; cursor: pointer; position: relative; text-align: left; padding: 11px 12px 11px 14px; border: 1px solid var(--hv-tile-bd); border-radius: 13px; background: var(--hv-act-bg); color: var(--dv2-text-primary); font-family: inherit; margin-bottom: 7px; } body.hv-on .hv-rrow:last-child { margin-bottom: 0; } body.hv-on .hv-rrow::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3.5px; border-radius: 0 3px 3px 0; background: var(--dv2-text-muted); opacity: .25; } body.hv-on .hv-rrow.hv-is-normal::before { background: var(--hv-ok-ink); opacity: 1; } body.hv-on .hv-rrow.hv-is-low::before { background: var(--hv-warn-ink); opacity: 1; } body.hv-on .hv-rrow.hv-is-high::before { background: var(--hv-high-ink); opacity: 1; } body.hv-on .hv-rrow-n { flex: 1; min-width: 0; } body.hv-on .hv-rrow-n b { display: block; font-size: 13.6px; font-weight: 680; letter-spacing: -.008em; } body.hv-on .hv-rrow-n span { display: block; font-size: 11.2px; color: var(--dv2-text-muted); font-variant-numeric: tabular-nums; } body.hv-on .hv-rrow-v { flex: none; text-align: right; font-variant-numeric: tabular-nums; } body.hv-on .hv-rrow-v b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.02em; } body.hv-on .hv-st { display: inline-block; margin-top: 2px; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: var(--hv-ok-bg); color: var(--hv-ok-ink); } body.hv-on .hv-st-low { background: var(--hv-warn-bg); color: var(--hv-warn-ink); } body.hv-on .hv-st-high { background: var(--hv-high-bg); color: var(--hv-high-ink); } body.hv-on .hv-rail { display: flex; align-items: flex-end; gap: 3px; height: 20px; flex: none; } body.hv-on .hv-rail i { width: 5px; border-radius: 2px 2px 0 0; display: block; background: var(--hv-trend-was); } body.hv-on .hv-rail i.hv-rail-now { background: var(--hv-rose); } body.hv-on .hv-rh-head { margin-bottom: 12px; } body.hv-on .hv-rh-sub { margin: 2px 0 0; font-size: 12.8px; color: var(--dv2-text-sub); font-variant-numeric: tabular-nums; } body.hv-on .hv-rh-list { display: flex; flex-direction: column; } /* The AI reading overlay. Deliberately outside body.hv-on's tile system and fixed to the viewport: it must be visible whatever section is open, and it must survive the record being re-rendered underneath it. */ .hv-reading { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 24px; background: rgba(10, 7, 20, 0.52); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .hv-reading-card { max-width: 320px; width: 100%; text-align: center; padding: 26px 22px 22px; border-radius: 20px; background: #fff; color: #14121F; box-shadow: 0 18px 50px rgba(10, 7, 20, .3); font-family: inherit; } .hv-reading-card b { display: block; font-size: 17px; font-weight: 750; letter-spacing: -.015em; margin: 14px 0 6px; } .hv-reading-card span { display: block; font-size: 13.4px; line-height: 1.5; color: rgba(20, 18, 31, .62); } .hv-reading-note { margin-top: 9px; font-size: 12px !important; color: rgba(20, 18, 31, .42) !important; } .hv-reading-spin { width: 30px; height: 30px; margin: 0 auto; border-radius: 50%; border: 3px solid rgba(20, 18, 31, .12); border-top-color: hsl(350 62% 44%); animation: hv-spin .8s linear infinite; } @keyframes hv-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .hv-reading-spin { animation-duration: 2.4s; } } html[data-theme="dark"] .hv-reading-card { background: #1A1428; color: rgba(255,255,255,.95); } html[data-theme="dark"] .hv-reading-card span { color: rgba(255,255,255,.62); } html[data-theme="dark"] .hv-reading-note { color: rgba(255,255,255,.42) !important; } html[data-theme="dark"] .hv-reading-spin { border-color: rgba(255,255,255,.14); border-top-color: hsl(350 88% 76%); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .hv-reading-card { background: #1A1428; color: rgba(255,255,255,.95); } html:not([data-theme="light"]) .hv-reading-card span { color: rgba(255,255,255,.62); } html:not([data-theme="light"]) .hv-reading-note { color: rgba(255,255,255,.42) !important; } html:not([data-theme="light"]) .hv-reading-spin { border-color: rgba(255,255,255,.14); border-top-color: hsl(350 88% 76%); } } body.hv-on .hv-hero-locked { opacity: .78; } body.hv-on .hv-lock { flex: none; opacity: .72; } body.hv-on .hv-lock .hv-ic { width: 20px; height: 20px; } /* The next appointment. Above everything except the person it belongs to. */ body.hv-on .hv-appt { display: flex; align-items: center; gap: 12px; width: 100%; cursor: pointer; margin-top: 10px; padding: 13px 14px; border-radius: var(--hv-rad); text-align: left; font-family: inherit; color: var(--dv2-text-primary); background: var(--hv-tile-bg); border: 1px solid var(--hv-tile-bd); box-shadow: var(--hv-shadow); } body.hv-on .hv-appt-near { border-color: var(--hv-rose); } body.hv-on .hv-appt-ic { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--hv-rose-sf); color: var(--hv-rose); } body.hv-on .hv-appt-grow { flex: 1; min-width: 0; } body.hv-on .hv-appt-k { display: block; font-size: 10.6px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--hv-rose); } body.hv-on .hv-appt-n { display: block; font-size: 14.6px; font-weight: 720; letter-spacing: -.012em; margin-top: 2px; } body.hv-on .hv-appt-s { display: block; font-size: 12.2px; color: var(--dv2-text-sub); font-variant-numeric: tabular-nums; } body.hv-on .hv-appt > .hv-ic { flex: none; color: var(--dv2-text-muted); } body.hv-on .hv-empty { margin: 2px 0 0; font-size: 13.2px; line-height: 1.5; color: var(--dv2-text-sub); } body.hv-on .pet-info-k { color: var(--dv2-text-muted); } body.hv-on .pet-info-v { color: var(--dv2-text-primary); } body.hv-on .hv-ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; display: block; flex: none; } /* ── The shelf: one book per family member ─────────────────────────────── */ body.hv-on .hv-family { display: flex; flex-direction: column; gap: 9px; } body.hv-on .hv-mcard { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 13px; border-radius: var(--hv-rad); text-align: left; background: var(--hv-tile-bg); border: 1px solid var(--hv-tile-bd); box-shadow: var(--hv-shadow); color: var(--dv2-text-primary); } body.hv-on .hv-avat { width: 46px; height: 46px; border-radius: 14px; flex: none; display: grid; place-items: center; background: var(--hv-band); color: var(--hv-rose); font-size: 19px; font-weight: 800; } body.hv-on .hv-mcard-grow { flex: 1; min-width: 0; } body.hv-on .hv-mcard-n { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.014em; } body.hv-on .hv-mcard-s { display: block; font-size: 12.4px; margin-top: 1px; color: var(--dv2-text-sub); } body.hv-on .hv-amber { color: var(--hv-warn-ink); font-weight: 650; } body.hv-on .hv-green { color: var(--hv-ok-ink); font-weight: 650; } body.hv-on .hv-pill { flex: none; font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: var(--hv-ok-bg); color: var(--hv-ok-ink); } body.hv-on .hv-pill.hv-pill-warn { background: var(--hv-warn-bg); color: var(--hv-warn-ink); } body.hv-on .hv-pill.hv-pill-rose { background: var(--hv-rose-sf); color: var(--hv-rose); } /* ── The person carousel ────────────────────────────────── */ /* Same control School and Pets use, same size and spacing. Sits under the hero because that is the card it pages. */ body.hv-on .hv-dots { display: flex; justify-content: center; gap: 2px; padding: 6px 0 0; } /* b214.1 — the dot you SEE is 7px; the dot you TAP is 28px. A 7px control is about a sixth of a fingertip, and this is the one you press every time you want a different person — a synthetic tap dead on its centre missed it more often than not, which is a fair proxy for a thumb. The visual mark is a pseudo-element so the button can be as big as it needs to be. */ body.hv-on .hv-dot { width: 28px; height: 28px; border: 0; padding: 0; cursor: pointer; background: none; display: grid; place-items: center; border-radius: 50%; -webkit-tap-highlight-color: transparent; } body.hv-on .hv-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--hv-chip-bd); transition: background .15s ease; } body.hv-on .hv-dot[aria-current="true"]::before { background: var(--dv2-text-primary); } /* ── C1 · the hero ─────────────────────────────────────────────────────── */ body.hv-on .hv-hero { border-radius: 20px; padding: 16px; margin-bottom: 4px; background: var(--hv-band); color: var(--dv2-text-primary); box-shadow: var(--hv-shadow); } body.hv-on .hv-hero-top { display: flex; align-items: center; gap: 12px; } body.hv-on .hv-hero-av { width: 50px; height: 50px; border-radius: 16px; flex: none; display: grid; place-items: center; background: rgba(255, 255, 255, 0.55); color: var(--hv-rose); font-size: 21px; font-weight: 800; } html[data-theme="dark"] body.hv-on .hv-hero-av { background: rgba(255, 255, 255, 0.14); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body.hv-on .hv-hero-av { background: rgba(255, 255, 255, 0.14); } } body.hv-on .hv-hero-n { display: block; font-size: 22px; font-weight: 780; letter-spacing: -.025em; } body.hv-on .hv-hero-s { display: block; font-size: 12.5px; margin-top: 2px; opacity: .72; font-variant-numeric: tabular-nums; } body.hv-on .hv-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; } body.hv-on .hv-fact { border-radius: 12px; padding: 9px 10px; background: rgba(255, 255, 255, 0.45); } html[data-theme="dark"] body.hv-on .hv-fact { background: rgba(255, 255, 255, 0.09); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body.hv-on .hv-fact { background: rgba(255, 255, 255, 0.09); } } body.hv-on .hv-fact b { display: block; font-size: 15px; font-weight: 780; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } body.hv-on .hv-fact span { display: block; font-size: 9.5px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; opacity: .62; margin-top: 1px; } /* ── Values read off a document, and how they moved ────────────────────── */ body.hv-on .hv-res { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; border-bottom: 1px solid var(--hv-tile-bd); width: 100%; text-align: left; color: var(--dv2-text-primary); } body.hv-on .hv-res:last-child { border-bottom: 0; } body.hv-on .hv-res-top { display: flex; align-items: center; gap: 8px; } body.hv-on .hv-res-bot { display: flex; align-items: baseline; gap: 10px; } body.hv-on .hv-res-grow { flex: 1; min-width: 0; } body.hv-on .hv-res-n { display: block; font-size: 14px; font-weight: 650; letter-spacing: -.012em; flex: 1; min-width: 0; } body.hv-on .hv-res-r { display: block; font-size: 11.5px; flex: 1; min-width: 0; color: var(--dv2-text-muted); font-variant-numeric: tabular-nums; } body.hv-on .hv-vals { display: flex; align-items: baseline; gap: 8px; flex: none; font-variant-numeric: tabular-nums; } body.hv-on .hv-old { font-size: 12.5px; font-weight: 600; color: var(--dv2-text-muted); } body.hv-on .hv-new { font-size: 16px; font-weight: 750; letter-spacing: -.02em; } body.hv-on .hv-delta { display: inline-flex; align-items: center; gap: 2px; flex: none; font-size: 11.5px; font-weight: 750; padding: 3px 7px; border-radius: 999px; font-variant-numeric: tabular-nums; } /* Direction is stated, never judged. Down is not "bad" and up is not "good" — these two colours say WHICH WAY, and the app does not say more than that. */ body.hv-on .hv-delta.hv-dn { background: var(--hv-warn-bg); color: var(--hv-warn-ink); } body.hv-on .hv-delta.hv-up { background: var(--hv-ok-bg); color: var(--hv-ok-ink); } body.hv-on .hv-delta.hv-flat { background: var(--hv-quiet-bg); color: var(--dv2-text-sub); } body.hv-on .hv-delta .hv-ic { width: 12px; height: 12px; stroke-width: 2.4; } body.hv-on .hv-trend { display: flex; align-items: flex-end; gap: 3px; height: 20px; flex: none; } body.hv-on .hv-trend i { width: 5px; border-radius: 2px 2px 0 0; display: block; background: var(--hv-rose); } /* Two bars: the earlier reading, then this one. Both were the same rose, so the pair read as two alarms rather than a direction of travel — and sat red beside a green +28%. Muting the earlier one says WHICH IS WHICH; which way it went is the delta badge's job, and this does not repeat it. */ body.hv-on .hv-trend i:first-child { background: var(--hv-trend-was); } /* ── C2 · the care circle ──────────────────────────────────────────────── */ body.hv-on .hv-circle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } body.hv-on .hv-cc { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px 10px; border-radius: 15px; min-width: 0; background: var(--hv-tile-bg); border: 1px solid var(--hv-tile-bd); color: var(--dv2-text-primary); } body.hv-on .hv-cc-n { font-size: 11.8px; font-weight: 680; letter-spacing: -.01em; text-align: center; } body.hv-on .hv-cc-s { font-size: 10.2px; color: var(--dv2-text-muted); text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.hv-on .hv-cc.hv-cc-add { border-style: dashed; background: transparent; color: var(--dv2-text-sub); justify-content: center; } body.hv-on .hv-cc.hv-cc-add > .hv-ic { width: 22px; height: 22px; margin: 7px 0; } body.hv-on .hv-mcard > .hv-ic, body.hv-on .hv-prov-h > .hv-ic { color: var(--dv2-text-muted); } body.hv-on .hv-role { width: 34px; height: 34px; border-radius: 11px; flex: none; display: grid; place-items: center; background: var(--hv-t-other); } body.hv-on .hv-cc .hv-role { width: 36px; height: 36px; border-radius: 12px; } body.hv-on .hv-role .hv-ic { width: 17px; height: 17px; } body.hv-on .hv-role-gp { background: var(--hv-t-gp); color: #0A6CFF; } body.hv-on .hv-role-dentist { background: var(--hv-t-dentist); color: var(--hv-warn-ink); } body.hv-on .hv-role-pharmacy { background: var(--hv-t-pharmacy); color: var(--hv-ok-ink); } body.hv-on .hv-role-optician { background: var(--hv-t-optician); color: #6E56CF; } body.hv-on .hv-role-physio { background: var(--hv-t-physio); color: #0A7C86; } body.hv-on .hv-role-consultant { background: var(--hv-t-consultant); color: var(--hv-rose); } body.hv-on .hv-role-hospital { background: var(--hv-t-hospital); color: var(--dv2-text-sub); } body.hv-on .hv-role-other { background: var(--hv-t-other); color: var(--dv2-text-sub); } html[data-theme="dark"] body.hv-on .hv-role-gp { color: #7FB4FF; } html[data-theme="dark"] body.hv-on .hv-role-optician { color: #C3B4FF; } html[data-theme="dark"] body.hv-on .hv-role-physio { color: #6FDCE3; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body.hv-on .hv-role-gp { color: #7FB4FF; } html:not([data-theme="light"]) body.hv-on .hv-role-optician { color: #C3B4FF; } html:not([data-theme="light"]) body.hv-on .hv-role-physio { color: #6FDCE3; } } /* ── A provider, and the four ways to reach one ────────────────────────── */ body.hv-on .hv-prov { padding: 13px 14px; border-radius: var(--hv-rad); background: var(--hv-tile-bg); border: 1px solid var(--hv-tile-bd); box-shadow: var(--hv-shadow); } body.hv-on .hv-prov + .hv-prov { margin-top: 9px; } body.hv-on .hv-prov-h { display: flex; align-items: center; gap: 10px; } body.hv-on .hv-prov-grow { flex: 1; min-width: 0; } body.hv-on .hv-role-lbl { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dv2-text-muted); } body.hv-on .hv-prov-n { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.012em; } body.hv-on .hv-prov-s { display: block; font-size: 12.2px; margin-top: 1px; color: var(--dv2-text-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Four actions, always four. An action with nothing behind it is dimmed, not removed, so the row never changes shape between one provider and the next. */ body.hv-on .hv-acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 12px; } body.hv-on .hv-act { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px 8px; border-radius: 13px; min-width: 0; background: var(--hv-act-bg); border: 1px solid var(--hv-tile-bd); color: var(--dv2-text-primary); text-decoration: none; } body.hv-on .hv-act .hv-ic { width: 18px; height: 18px; } body.hv-on .hv-act-l { font-size: 11.5px; font-weight: 650; letter-spacing: -.01em; } body.hv-on .hv-act.hv-act-call { background: var(--hv-call-bg); border-color: var(--hv-call-bg); color: var(--hv-call-tx); } body.hv-on .hv-act.hv-act-off { opacity: .42; pointer-events: none; } /* ── C3 · insurance, mirrored from Renewals ────────────────────────────── */ body.hv-on .hv-ins { border-radius: 18px; padding: 15px 16px; color: #fff; position: relative; overflow: hidden; box-shadow: 0 6px 18px rgba(14, 27, 54, 0.28); background: linear-gradient(142deg, #1F3A6E 0%, #16294F 58%, #0E1B36 100%); } body.hv-on .hv-ins.hv-ins-dental { background: linear-gradient(142deg, #1F5E56 0%, #16443F 58%, #0D2A27 100%); box-shadow: 0 6px 18px rgba(13, 42, 39, 0.28); } body.hv-on .hv-ins + .hv-ins { margin-top: 10px; } body.hv-on .hv-ins::after { content: ''; position: absolute; inset: 0; opacity: .22; pointer-events: none; background: radial-gradient(circle at 84% 12%, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 46%); } body.hv-on .hv-ins-top { display: flex; align-items: flex-start; gap: 10px; position: relative; z-index: 1; } body.hv-on .hv-ins-grow { flex: 1; min-width: 0; } body.hv-on .hv-ins-k { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); } body.hv-on .hv-ins-n { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.018em; margin-top: 2px; } body.hv-on .hv-ins-ren { text-align: right; flex: none; } body.hv-on .hv-ins-ren b { display: block; font-size: 15px; font-weight: 750; font-variant-numeric: tabular-nums; } body.hv-on .hv-ins-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin-top: 14px; position: relative; z-index: 1; } body.hv-on .hv-ins-grid .hv-ins-k { color: rgba(255, 255, 255, 0.55); } body.hv-on .hv-ins-v { display: block; font-size: 13.5px; font-weight: 650; margin-top: 2px; font-variant-numeric: tabular-nums; } body.hv-on .hv-ins .hv-acts { grid-template-columns: repeat(3, minmax(0, 1fr)); position: relative; z-index: 1; } body.hv-on .hv-ins .hv-act { background: rgba(255, 255, 255, 0.13); border-color: rgba(255, 255, 255, 0.18); color: #fff; } body.hv-on .hv-ins .hv-act.hv-act-call { background: #fff; border-color: #fff; color: #10203E; } body.hv-on .hv-ins .hv-act.hv-act-off { opacity: .38; } /* Where the renewal really lives. Health mirrors it and says so. */ body.hv-on .hv-ins-src { display: flex; align-items: center; gap: 6px; margin-top: 12px; position: relative; z-index: 1; font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.66); } body.hv-on .hv-ins-src .hv-ic { width: 13px; height: 13px; } /* ── C4 · the book ─────────────────────────────────────────────────────── */ body.hv-on .hv-spine { position: relative; padding-left: 24px; } body.hv-on .hv-spine::before { content: ''; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 1.5px; background: var(--hv-tile-bd); } body.hv-on .hv-yr { position: relative; margin-bottom: 16px; } body.hv-on .hv-yr:last-child { margin-bottom: 0; } body.hv-on .hv-knot { position: absolute; left: -24px; top: 3px; width: 13px; height: 13px; border-radius: 50%; background: var(--hv-tile-bg); border: 2px solid var(--dv2-text-sub); } body.hv-on .hv-yr.hv-now .hv-knot { border-color: var(--hv-rose); background: var(--hv-rose); } body.hv-on .hv-yr-y { font-size: 13px; font-weight: 800; letter-spacing: .04em; color: var(--dv2-text-sub); font-variant-numeric: tabular-nums; } body.hv-on .hv-yr-c { font-size: 11.5px; font-weight: 600; margin-left: 7px; color: var(--dv2-text-muted); } body.hv-on .hv-ev { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 11px; margin-top: 7px; border-radius: 13px; background: var(--hv-tile-bg); border: 1px solid var(--hv-tile-bd); color: var(--dv2-text-primary); } body.hv-on .hv-ev-grow { flex: 1; min-width: 0; } body.hv-on .hv-ev-n { display: block; font-size: 13.8px; font-weight: 620; letter-spacing: -.01em; } body.hv-on .hv-ev-s { display: block; font-size: 11.8px; margin-top: 1px; color: var(--dv2-text-sub); } body.hv-on .hv-ev-d { flex: none; font-size: 11.5px; font-weight: 700; color: var(--dv2-text-muted); font-variant-numeric: tabular-nums; } /* ── C5 · the reading surface ──────────────────────────────────────────── */ body.hv-on .hv-ai { border-radius: 14px; padding: 13px 14px; margin-top: 10px; background: var(--hv-ai-bg); } body.hv-on .hv-ai-h { display: flex; align-items: center; gap: 7px; color: var(--hv-ai-ink); font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } body.hv-on .hv-ai-h .hv-ic { width: 14px; height: 14px; } body.hv-on .hv-ai p { margin: 8px 0 0; font-size: 13.2px; line-height: 1.55; color: var(--dv2-text-primary); } /* THE BOUNDARY. Not a setting, not conditional, not dismissible. Every AI explanation in Health carries it, and it is rendered from one server-side constant so no client path can omit it. */ body.hv-on .hv-ai-foot { display: flex; gap: 6px; align-items: flex-start; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--hv-tile-bd); font-size: 11.2px; line-height: 1.45; color: var(--dv2-text-sub); } body.hv-on .hv-ai-foot .hv-ic { width: 13px; height: 13px; margin-top: 1px; } /* ── C7 · an action the document asked for ─────────────────────────────── */ body.hv-on .hv-sug { padding: 13px 14px; border-radius: var(--hv-rad); margin-bottom: 9px; background: var(--hv-tile-bg); border: 1px solid var(--hv-ai-ink); box-shadow: var(--hv-shadow); } body.hv-on .hv-sug-h { display: flex; align-items: flex-start; gap: 10px; } body.hv-on .hv-sug-grow { flex: 1; min-width: 0; } body.hv-on .hv-sug-n { display: block; font-size: 14.5px; font-weight: 650; letter-spacing: -.012em; } body.hv-on .hv-sug-s { display: block; font-size: 11.8px; margin-top: 2px; line-height: 1.45; color: var(--dv2-text-sub); } body.hv-on .hv-sug-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 11px; } body.hv-on .hv-btn { padding: 10px 8px; border-radius: 12px; font-size: 13px; font-weight: 650; background: var(--hv-act-bg); border: 1px solid var(--hv-tile-bd); color: var(--dv2-text-primary); } body.hv-on .hv-btn.hv-btn-go { background: var(--hv-ai-ink); border-color: var(--hv-ai-ink); color: #fff; } html[data-theme="dark"] body.hv-on .hv-btn.hv-btn-go { color: #14121F; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body.hv-on .hv-btn.hv-btn-go { color: #14121F; } } /* ── Privacy ───────────────────────────────────────────────────────────── */ body.hv-on .hv-choice { display: flex; align-items: flex-start; gap: 11px; width: 100%; text-align: left; padding: 12px 13px; border-radius: 14px; margin-bottom: 8px; background: var(--hv-tile-bg); border: 1px solid var(--hv-tile-bd); color: var(--dv2-text-primary); } body.hv-on .hv-choice.hv-sel { border-color: var(--hv-rose); box-shadow: 0 0 0 1px var(--hv-rose); } body.hv-on .hv-radio { width: 20px; height: 20px; border-radius: 50%; flex: none; margin-top: 1px; border: 2px solid var(--hv-chip-bd); display: grid; place-items: center; } body.hv-on .hv-choice.hv-sel .hv-radio { border-color: var(--hv-rose); } body.hv-on .hv-choice.hv-sel .hv-radio::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--hv-rose); } body.hv-on .hv-choice-grow { flex: 1; min-width: 0; } body.hv-on .hv-choice-n { display: block; font-size: 14.5px; font-weight: 650; } body.hv-on .hv-choice-s { display: block; font-size: 12px; margin-top: 2px; line-height: 1.45; color: var(--dv2-text-sub); } body.hv-on .hv-who { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 0; border-bottom: 1px solid var(--hv-tile-bd); color: var(--dv2-text-primary); } body.hv-on .hv-who:last-child { border-bottom: 0; } body.hv-on .hv-who-grow { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; } body.hv-on .hv-who-s { display: block; font-size: 11.5px; font-weight: 500; color: var(--dv2-text-muted); } body.hv-on .hv-box { width: 22px; height: 22px; border-radius: 6px; flex: none; border: 2px solid var(--hv-chip-bd); display: grid; place-items: center; color: transparent; } body.hv-on .hv-box.hv-on-box { background: var(--hv-rose); border-color: var(--hv-rose); color: #fff; } body.hv-on .hv-box .hv-ic { width: 13px; height: 13px; stroke-width: 3; } /* ── The quiet note a section uses to explain itself once ──────────────── */ body.hv-on .hv-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding: 9px 11px; border-radius: 11px; background: var(--hv-quiet-bg); font-size: 11.8px; line-height: 1.45; color: var(--dv2-text-sub); } body.hv-on .hv-note .hv-ic { width: 14px; height: 14px; margin-top: 2px; color: var(--dv2-text-muted); } body.hv-on .hv-empty { padding: 14px 4px; font-size: 13px; color: var(--dv2-text-sub); } /* b223 — SECTION_CHROME R4. The chip in front of a section title: 30x30, r9, tinted with Health's own hue (350, the number RENEWAL_SECTIONS assigns it). Light and dark are written out rather than one dimmed — the b212 lesson. Scoped to `body.hv-on`, so the shared accordion upgrader that School and the profile-documents renderer also use is untouched by it. */ body.hv-on .pf-acc-ic { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; margin-right: 10px; background: hsl(350 70% 93%); color: hsl(350 48% 34%); } body.hv-on .pf-acc-ic svg { width: 17px; height: 17px; } html[data-theme="dark"] body.hv-on .pf-acc-ic { background: hsl(350 38% 19%); color: hsl(350 72% 80%); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body.hv-on .pf-acc-ic { background: hsl(350 38% 19%); color: hsl(350 72% 80%); } }