/* ========================================================================== Profile — Concept C (Aug 2026) Loaded last, so it wins over style.css and design-v2-app.css without !important on layout. Everything here is gated on `body.pc-on`, which show() sets only for the profile view — the same mechanism as dv2-groc. WHY A GATE AND NOT A REWRITE. Profile joined `body.dv2-app` in this release (app.js, show()). That gate was written when the dashboard was the only screen behind it, so 132 rules in design-v2-app.css suddenly reach a screen they were never tested against. Almost all of them are rooted at dashboard-only selectors (.fhc-*, .dv2-dash-*, .dv2-actcard) and match nothing here; the two that ARE generic — the body padding stand-down and #bottomnav — are handled below rather than left to luck. The tokens need no re-declaration: design-v2-app.css hosts the `--dv2-*` set on `body.dv2-app` itself, and is an ancestor of everything on this screen. That is NOT true of grocery (hosted on #view-list), which is why design-v2-grocery.css has to repeat them and this file does not. ========================================================================== */ /* ── The surface ──────────────────────────────────────────────────────── */ /* Painted on , not on #view-profile: the view box ends at its last card, so a background on the view stops mid-screen on a short profile and the tab-bar gutter shows through as a hard seam. Same reason and same treatment as body.dv2-groc. */ body.pc-on { background: radial-gradient(circle at 8% 2%, var(--dv2-blob1) 0%, transparent 45%), radial-gradient(circle at 98% 86%, var(--dv2-blob2) 0%, transparent 48%), radial-gradient(circle at 94% 10%, var(--dv2-blob3) 0%, transparent 38%), radial-gradient(circle at 2% 72%, var(--dv2-blob4) 0%, transparent 42%), var(--dv2-bg-grad); background-attachment: fixed, fixed, fixed, fixed, fixed; background-repeat: no-repeat; } /* body.dv2-app drops style.css's 20px body gutter for the near-full-bleed constellation. Profile is a reading surface and wants it back. */ body.pc-on #view-profile { background: transparent; padding: 0 16px calc(112px + env(safe-area-inset-bottom, 0px)); color: var(--dv2-text-primary); } body.pc-on .settings { max-width: 640px; margin: 0 auto; } body.pc-on .set-head { padding: 14px 2px 8px; } body.pc-on .set-title { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; color: var(--dv2-text-primary); } body.pc-on .set-close { background: var(--dv2-g-09-bg); border: 1px solid var(--dv2-g-16-bd); color: var(--dv2-text-primary); border-radius: 12px; } /* ── Hero identity card ───────────────────────────────────────────────── */ body.pc-on .pc-hero { position: relative; display: block; text-align: center; background: var(--dv2-g-09-bg); border: 1px solid var(--dv2-g-16-bd); border-radius: 22px; padding: 18px 16px 14px; margin: 4px 0 18px; -webkit-backdrop-filter: blur(20px) saturate(var(--dv2-g-sat)); backdrop-filter: blur(20px) saturate(var(--dv2-g-sat)); } body.pc-on .pc-hero-face { position: relative; width: 64px; margin: 0 auto 10px; } body.pc-on .pc-hero .set-avatar { width: 64px; height: 64px; border-radius: 50%; font-size: 24px; font-weight: 800; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #fff; } body.pc-on .pc-hero .set-avatar img { width: 100%; height: 100%; object-fit: cover; } body.pc-on .pc-hero .set-photo-btn { position: absolute; right: -4px; bottom: -4px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; padding: 0; background: var(--dv2-accent); color: #fff; border: 2px solid var(--dv2-g-09-bg); cursor: pointer; } body.pc-on .pc-hero .set-photo-btn svg { width: 13px; height: 13px; stroke-width: 2; } body.pc-on .pc-hero-name { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--dv2-text-primary); } body.pc-on .pc-hero-email { margin: 2px 0 9px; font-size: 12.5px; color: var(--dv2-text-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Same three-track meta grid as the Grocery and task cards. The card grammar is the benchmark; a fourth object type joins it rather than inventing one. */ body.pc-on .pc-hero-meta { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--dv2-divider); } body.pc-on .pc-hero-meta b { display: block; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dv2-text-muted); font-weight: 650; margin-bottom: 2px; } body.pc-on .pc-hero-meta .v { font-size: 15px; font-weight: 700; color: var(--dv2-text-primary); font-variant-numeric: tabular-nums; } /* ── Role pills ───────────────────────────────────────────────────────── */ body.pc-on .pc-pill, .pc-pill { display: inline-block; font-size: 10px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; white-space: nowrap; } body.pc-on .pc-pill-admin { background: hsla(270,70%,52%,0.14); color: hsl(270,70%,42%); } body.pc-on .pc-pill-adult { background: rgba(20,16,38,0.07); color: var(--dv2-text-sub); } body.pc-on .pc-pill-child { background: rgba(255,159,10,0.16); color: #9a5b00; } html[data-theme="dark"] body.pc-on .pc-pill-admin { background: hsla(270,72%,72%,0.18); color: hsl(270,72%,80%); } html[data-theme="dark"] body.pc-on .pc-pill-adult { background: rgba(255,255,255,0.10); color: var(--dv2-text-sub); } html[data-theme="dark"] body.pc-on .pc-pill-child { background: rgba(255,159,10,0.20); color: #ffc46b; } /* ── Domains ──────────────────────────────────────────────────────────── */ body.pc-on .pc-domain { margin: 22px 4px 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--dv2-text-sub); } /* One card per domain, dividers between the rows inside it. The accordion keeps its own expand mechanics; only its chrome stands down. */ body.pc-on .pc-group { background: var(--dv2-g-09-bg); border: 1px solid var(--dv2-g-16-bd); border-radius: 20px; overflow: hidden; -webkit-backdrop-filter: blur(20px) saturate(var(--dv2-g-sat)); backdrop-filter: blur(20px) saturate(var(--dv2-g-sat)); } body.pc-on .pc-group .acc { background: transparent; border: none; border-radius: 0; box-shadow: none; margin: 0; } body.pc-on .pc-group .acc + .acc { border-top: 1px solid var(--dv2-divider); } body.pc-on .pc-group .acc-head { padding: 13px 14px; min-height: 52px; gap: 11px; color: var(--dv2-text-primary); } body.pc-on .pc-group .acc-title { font-size: 15.5px; font-weight: 650; letter-spacing: -0.01em; } body.pc-on .pc-ic { flex: 0 0 auto; width: 21px; height: 21px; display: grid; place-items: center; color: var(--dv2-text-primary); } body.pc-on .pc-ic .dv2-lineic { width: 21px; height: 21px; } body.pc-on .acc-val { font-size: 13.5px; font-weight: 600; color: var(--dv2-text-sub); white-space: nowrap; font-variant-numeric: tabular-nums; } body.pc-on .acc-chev { width: 17px; height: 17px; color: var(--dv2-text-muted); } body.pc-on .acc.open > .acc-head .acc-chev { transform: rotate(180deg); } body.pc-on .pc-explain { margin: 0 0 10px; font-size: 12.5px; line-height: 1.45; color: var(--dv2-text-sub); } /* b197 — #ai-settings is a render target inside .acc-body-in, so its cards are GRANDCHILDREN and the `>` below could not reach them: they kept style.css's hard `background:#fff` while their text used the dark --dv2 tokens, which is white on white. Named here, in the rule that owns the behaviour, rather than restated in a competing one further down the file. */ body.pc-on .acc-body-in > .set-card, body.pc-on #ai-settings > .set-card, body.pc-on .acc-body-in > .contact-card, body.pc-on .acc-body-in > .pc-explain { padding-left: 14px; padding-right: 14px; } body.pc-on .acc-body-in > .set-card, body.pc-on #ai-settings > .set-card { background: transparent; border: none; box-shadow: none; border-radius: 0; margin: 0; padding-top: 0; padding-bottom: 16px; } /* ── Generic rows inside a domain ─────────────────────────────────────── */ body.pc-on .set-members-title { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dv2-text-sub); margin: 12px 0 7px; } body.pc-on .set-row-label { color: var(--dv2-text-primary); font-size: 14.5px; } body.pc-on .set-row-sub, body.pc-on .set-invite-help, body.pc-on .hint { color: var(--dv2-text-sub); } body.pc-on .set-row-action { background: var(--dv2-g-09-bg); border: 1px solid var(--dv2-g-16-bd); color: var(--dv2-accent); border-radius: 11px; } body.pc-on .pc-vrow { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; cursor: pointer; padding: 11px 12px; border-radius: 14px; background: var(--dv2-g-07-bg, rgba(255,255,255,0.42)); border: 1px solid var(--dv2-g-16-bd); color: var(--dv2-text-primary); font-size: 15px; font-family: inherit; } body.pc-on .pc-vrow + .pc-vrow { margin-top: 7px; } body.pc-on .pc-vrow .lab { flex: 1; font-weight: 650; min-width: 0; } body.pc-on .pc-vrow .val { color: var(--dv2-accent); font-weight: 700; font-size: 14.5px; } /* BOTH glyph classes. .dv2-listic deliberately carries no width/height so the caller owns the size — which means a caller that forgets to give it one gets an SVG that expands to fill its flex line. That is exactly what happened here: the centre-tile row rendered 290px tall from a single 24x24 viewBox. */ body.pc-on .pc-vrow .dv2-lineic, body.pc-on .pc-vrow .dv2-listic, body.pc-on .pc-hubic { width: 19px; height: 19px; flex: none; } body.pc-on .pc-vrow.is-open { border-color: hsla(270,70%,52%,0.45); } body.pc-on .pc-vrow.pc-cta { justify-content: center; color: var(--dv2-accent); font-weight: 700; } /* ── Centre tile: a value row + a dropdown, not eight stacked cards ───── */ body.pc-on .pc-menu { margin-top: 7px; border-radius: 14px; overflow: hidden; background: var(--dv2-g-09-bg); border: 1px solid var(--dv2-g-16-bd); } body.pc-on .pc-menu-i { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 13px; font-size: 15px; font-family: inherit; cursor: pointer; background: transparent; border: 0; text-align: left; color: var(--dv2-text-primary); } body.pc-on .pc-menu-i + .pc-menu-i { border-top: 1px solid var(--dv2-divider); } body.pc-on .pc-menu-i .nm { flex: 1; min-width: 0; } body.pc-on .pc-menu-i .dv2-listic, body.pc-on .pc-menu-i .dv2-lineic { width: 19px; height: 19px; flex: none; } body.pc-on .pc-menu-i.on { background: hsla(270,70%,52%,0.09); font-weight: 700; } body.pc-on .pc-menu-i.on .pc-tick { color: var(--dv2-accent); } /* ── Members ──────────────────────────────────────────────────────────── */ /* .pc-mem takes its frame from the tile primitive above; this is only its internal layout. The divider that used to separate members is gone — the tile edge does that job now, which is the whole point of the standard. */ body.pc-on .pc-mem-in { display: flex; align-items: center; gap: 11px; } body.pc-on .pc-mem { font-family: inherit; } body.pc-on .pc-mem-face { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; overflow: hidden; color: #fff; font-weight: 800; font-size: 14px; } body.pc-on .pc-mem-face img { width: 100%; height: 100%; object-fit: cover; } body.pc-on .pc-mem-main { flex: 1; min-width: 0; } body.pc-on .pc-mem-nm { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--dv2-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.pc-on .pc-mem-nm .you { font-weight: 500; font-size: 12px; color: var(--dv2-text-sub); } body.pc-on .pc-mem-meta { margin: 2px 0 0; font-size: 11.5px; color: var(--dv2-text-sub); } body.pc-on .pc-mem-more { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; padding: 0; background: transparent; border: 1px solid var(--dv2-g-16-bd); color: var(--dv2-text-sub); cursor: pointer; } body.pc-on .pc-mem-more .dv2-lineic { width: 15px; height: 15px; } /* ── Notifications ────────────────────────────────────────────────────── */ body.pc-on .pc-nhero { display: flex; gap: 12px; align-items: flex-start; border-radius: 16px; padding: 14px; background: linear-gradient(135deg, hsla(270,70%,52%,0.11), hsla(190,70%,52%,0.09)); border: 1px solid var(--dv2-g-16-bd); } body.pc-on .pc-nhero.is-off { background: linear-gradient(135deg, rgba(180,83,9,0.13), rgba(180,83,9,0.05)); } body.pc-on .pc-nbell { width: 38px; height: 38px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--dv2-g-09-bg); color: var(--dv2-accent); } body.pc-on .pc-nhero.is-off .pc-nbell { color: #B45309; } html[data-theme="dark"] body.pc-on .pc-nhero.is-off .pc-nbell { color: #F0B357; } body.pc-on .pc-nbell .dv2-lineic { width: 20px; height: 20px; } body.pc-on .pc-nhero-t { margin: 0; font-size: 15.5px; font-weight: 800; } body.pc-on .pc-nhero-s { margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--dv2-text-sub); } body.pc-on .notif-pill { font-size: 10px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: rgba(20,16,38,0.07); color: var(--dv2-text-sub); } body.pc-on .notif-pill.on { background: rgba(26,127,55,0.12); color: #1a7f37; } html[data-theme="dark"] body.pc-on .notif-pill { background: rgba(255,255,255,0.10); } html[data-theme="dark"] body.pc-on .notif-pill.on { background: rgba(93,212,143,0.16); color: #5DD48F; } body.pc-on .pc-tog { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 2px; font-size: 14.5px; font-family: inherit; background: none; border: 0; border-bottom: 1px solid var(--dv2-divider); text-align: left; color: var(--dv2-text-primary); cursor: pointer; } body.pc-on .pc-tog:last-of-type { border-bottom: 0; } body.pc-on .pc-tog-main { flex: 1; min-width: 0; } body.pc-on .pc-tog-t { font-weight: 650; } body.pc-on .pc-tog-s { font-size: 11.5px; color: var(--dv2-text-sub); margin-top: 1px; } body.pc-on .pc-sw { width: 44px; height: 26px; border-radius: 999px; flex: none; position: relative; background: rgba(20,16,38,0.18); transition: background .18s; } html[data-theme="dark"] body.pc-on .pc-sw { background: rgba(255,255,255,0.20); } body.pc-on .pc-sw.on { background: var(--dv2-accent); } body.pc-on .pc-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform .18s; } body.pc-on .pc-sw.on::after { transform: translateX(18px); } body.pc-on .pc-step { display: flex; align-items: flex-start; gap: 11px; padding: 9px 2px; font-size: 14px; } body.pc-on .pc-step-n { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--dv2-accent); color: #fff; font-size: 11px; font-weight: 800; } /* ── Shops ────────────────────────────────────────────────────────────── */ body.pc-on .pc-shop { border-radius: 16px; padding: 11px 12px; margin-bottom: 8px; background: var(--dv2-g-07-bg, rgba(255,255,255,0.42)); border: 1px solid var(--dv2-g-16-bd); } body.pc-on .pc-shop-top { display: flex; align-items: center; gap: 11px; } body.pc-on .pc-shop-top .dv2-lineic { width: 20px; height: 20px; flex: none; } body.pc-on .pc-shop-nm { flex: 1; font-size: 15px; font-weight: 700; min-width: 0; } body.pc-on .pc-shop-x { width: 26px; height: 26px; border-radius: 8px; flex: none; padding: 0; display: grid; place-items: center; cursor: pointer; background: transparent; border: 1px solid var(--dv2-g-16-bd); color: var(--dv2-text-muted); } body.pc-on .pc-shop-x .dv2-lineic { width: 13px; height: 13px; } /* The fixed 96px first track is the load-bearing detail. With `auto`, "Tesco" and "Sainsbury's" push the second column to different x and the columns stop lining up — the same fault the Grocery card hit, same fix. */ body.pc-on .pc-shop-meta { display: grid; grid-template-columns: 96px minmax(0,1fr) auto; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--dv2-divider); font-size: 11.5px; } body.pc-on .pc-shop-meta b { display: block; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dv2-text-muted); font-weight: 650; margin-bottom: 1px; } body.pc-on .pc-shop-meta .v { font-size: 12.5px; font-weight: 600; color: var(--dv2-text-primary); } body.pc-on .pc-shop-meta .v.act { color: var(--dv2-accent); } body.pc-on .pc-geo { align-self: center; font-size: 10px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: rgba(26,127,55,0.12); color: #1a7f37; } body.pc-on .pc-geo.off { background: rgba(20,16,38,0.06); color: var(--dv2-text-muted); } html[data-theme="dark"] body.pc-on .pc-geo { background: rgba(93,212,143,0.16); color: #5DD48F; } html[data-theme="dark"] body.pc-on .pc-geo.off { background: rgba(255,255,255,0.08); color: var(--dv2-text-muted); } body.pc-on .pc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; } body.pc-on .pc-chip { font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: var(--dv2-g-09-bg); border: 1px solid var(--dv2-g-16-bd); color: var(--dv2-text-primary); cursor: pointer; font-family: inherit; } body.pc-on .set-field label { color: var(--dv2-text-sub); font-size: 12px; font-weight: 650; } body.pc-on .set-field-row input, body.pc-on #shop-add-input { background: var(--dv2-g-09-bg); border: 1px solid var(--dv2-g-16-bd); color: var(--dv2-text-primary); border-radius: 11px; } body.pc-on .set-add { background: var(--dv2-accent); color: #fff; border: 0; border-radius: 11px; padding: 9px 15px; font-weight: 650; } /* ── Action sheet (member roles) ──────────────────────────────────────── */ .pc-sheet-scrim { position: fixed; inset: 0; z-index: 200; background: rgba(10,6,26,0.45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); display: flex; align-items: flex-end; justify-content: center; padding: 16px calc(16px + env(safe-area-inset-left)) calc(16px + env(safe-area-inset-bottom)); } .pc-sheet { width: 100%; max-width: 420px; border-radius: 20px; overflow: hidden; background: var(--pc-sheet-bg, #fff); box-shadow: 0 18px 44px rgba(10,6,26,0.28); animation: pc-sheet-in .18s cubic-bezier(.2,.8,.3,1); } @keyframes pc-sheet-in { from { transform: translateY(14px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .pc-sheet { animation: none; } } html[data-theme="dark"] .pc-sheet { --pc-sheet-bg: #1b1533; } .pc-sheet-h { padding: 15px 16px 8px; } .pc-sheet-h .t { margin: 0; font-size: 16.5px; font-weight: 800; color: var(--dv2-text-primary); } .pc-sheet-h .s { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--dv2-text-sub); } .pc-sheet-a { display: flex; align-items: center; gap: 11px; width: 100%; padding: 13px 16px; font-size: 15px; font-weight: 600; font-family: inherit; background: none; border: 0; border-top: 1px solid var(--dv2-divider); text-align: left; color: var(--dv2-text-primary); cursor: pointer; } .pc-sheet-a .dv2-lineic { width: 19px; height: 19px; flex: none; color: var(--dv2-text-sub); } .pc-sheet-a.prime, .pc-sheet-a.prime .dv2-lineic { color: var(--dv2-accent); } .pc-sheet-a.danger, .pc-sheet-a.danger .dv2-lineic { color: #B42318; } html[data-theme="dark"] .pc-sheet-a.danger, html[data-theme="dark"] .pc-sheet-a.danger .dv2-lineic { color: #FF8A80; } .pc-sheet-a[disabled] { opacity: .42; cursor: default; } .pc-sheet-a .why { display: block; font-size: 11.5px; font-weight: 500; color: var(--dv2-text-muted); margin-top: 2px; } /* ── Danger zone ──────────────────────────────────────────────────────── */ body.pc-on .set-logout, body.pc-on .set-danger { background: var(--dv2-g-09-bg); border: 1px solid var(--dv2-g-16-bd); border-radius: 14px; margin-top: 14px; color: #B42318; } html[data-theme="dark"] body.pc-on .set-logout, html[data-theme="dark"] body.pc-on .set-danger { color: #FF8A80; } /* Legacy chrome that has no place on this surface. */ body.pc-on .acc-ic, body.pc-on .theme-seg, body.pc-on .uk-more-toggle, body.pc-on .shop-manage-row { display: none !important; } /* ── Fixes from the first render pass ─────────────────────────────────── */ /* .pc-tog-t / .pc-tog-s are spans, so title and subtitle ran together on one line: "Items flagged to buy Someone taps the bell...". */ body.pc-on .pc-tog-main, body.pc-on .pc-tog-t, body.pc-on .pc-tog-s { display: block; } /* --dv2-g-16-bd is white at .85 in light mode, so a card border drawn with it is invisible against a white-ish fill and consecutive shop cards fused into one block. Shop cards get an ink-tinted edge instead. */ body.pc-on .pc-shop { border-color: rgba(20,16,38,0.10); } html[data-theme="dark"] body.pc-on .pc-shop { border-color: rgba(255,255,255,0.14); } /* One line each, so a long blurb can't push the pill and the ... apart. */ body.pc-on .pc-mem-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The legacy rows still used inside accordion bodies (Home name, the location toggle, Quick access, About) — brought onto the surface rather than left as opaque white cards floating on the aurora. */ body.pc-on .set-card-flush .set-nav-row, body.pc-on .set-row.tog { background: var(--dv2-g-07-bg, rgba(255,255,255,0.42)); border: 1px solid rgba(20,16,38,0.10); border-radius: 14px; margin-bottom: 7px; color: var(--dv2-text-primary); } html[data-theme="dark"] body.pc-on .set-card-flush .set-nav-row, html[data-theme="dark"] body.pc-on .set-row.tog { border-color: rgba(255,255,255,0.14); } body.pc-on .set-nav-ic { background: transparent !important; color: var(--dv2-text-primary) !important; width: 22px; height: 22px; display: grid; place-items: center; } body.pc-on .set-nav-ic .dv2-lineic { width: 21px; height: 21px; } body.pc-on .set-nav-label { color: var(--dv2-text-primary); } body.pc-on .set-nav-sub { color: var(--dv2-text-sub); } body.pc-on .set-nav-chev { width: 16px; height: 16px; color: var(--dv2-text-muted); } body.pc-on .set-row.tog .opt-check { color: var(--dv2-accent); } body.pc-on .set-row .lbl { color: var(--dv2-text-primary); } /* Contact card rows. .cc-card is an opaque white tile with a violet icon well — the last piece of the old visual system on this screen. */ body.pc-on .cc-card, body.pc-on .cc-progress-card { background: var(--dv2-g-07-bg, rgba(255,255,255,0.42)); border: 1px solid rgba(20,16,38,0.10); box-shadow: none; } html[data-theme="dark"] body.pc-on .cc-card, html[data-theme="dark"] body.pc-on .cc-progress-card { border-color: rgba(255,255,255,0.14); } body.pc-on .cc-ic { background: transparent !important; color: var(--dv2-text-primary) !important; } body.pc-on .cc-ic .dv2-lineic { width: 20px; height: 20px; } body.pc-on .cc-k { color: var(--dv2-text-sub); } body.pc-on .cc-v { color: var(--dv2-text-primary); } body.pc-on .cc-edit-btn { background: var(--dv2-accent); color: #fff; border: 0; border-radius: 13px; } body.pc-on .cc-progress-note { color: var(--dv2-text-sub); } /* Add-member / invite CTAs. */ body.pc-on .set-add-member, body.pc-on .set-share-btn { background: var(--dv2-g-07-bg, rgba(255,255,255,0.42)); border: 1px solid rgba(20,16,38,0.10); border-radius: 14px; color: var(--dv2-accent); font-weight: 700; } html[data-theme="dark"] body.pc-on .set-add-member, html[data-theme="dark"] body.pc-on .set-share-btn { border-color: rgba(255,255,255,0.14); } body.pc-on .set-add-member .dv2-lineic, body.pc-on .set-share-btn .dv2-lineic { width: 18px; height: 18px; } body.pc-on .set-link-row input { background: var(--dv2-g-09-bg); border: 1px solid var(--dv2-g-16-bd); color: var(--dv2-text-primary); border-radius: 11px; } body.pc-on .set-copy-btn { background: var(--dv2-accent); color: #fff; border: 0; border-radius: 11px; } body.pc-on .set-copy-btn .dv2-lineic { width: 17px; height: 17px; } body.pc-on .pc-invite-in { padding: 0; } body.pc-on .set-qr { display: flex; justify-content: center; margin: 4px 0 10px; } body.pc-on .set-qr img, body.pc-on .set-qr canvas { border-radius: 12px; } /* Child settings rows. */ body.pc-on .cl-row { background: var(--dv2-g-07-bg, rgba(255,255,255,0.42)); border: 1px solid rgba(20,16,38,0.10); border-radius: 14px; margin-bottom: 7px; color: var(--dv2-text-primary); } html[data-theme="dark"] body.pc-on .cl-row { border-color: rgba(255,255,255,0.14); } /* ── Your list order ──────────────────────────────────────────────────── */ /* The icon well was a 34px white disc built to hold a raster illustration. With a line glyph inside it reads as a leftover chip, so the disc goes and the glyph sits on the row like every other icon on this screen. */ body.pc-on .hv-order-row { background: var(--dv2-g-07-bg, rgba(255,255,255,0.42)); border: 1px solid rgba(20,16,38,0.10); border-radius: 14px; color: var(--dv2-text-primary); } html[data-theme="dark"] body.pc-on .hv-order-row { border-color: rgba(255,255,255,0.14); } body.pc-on .hv-order-ic { width: 22px; height: 22px; border-radius: 0; background: transparent; box-shadow: none; color: var(--dv2-text-primary); } body.pc-on .hv-order-img { width: 21px; height: 21px; } body.pc-on .hv-order-row.is-hidden .hv-order-img { filter: none; opacity: .5; } body.pc-on .hv-order-name { color: var(--dv2-text-primary); font-weight: 650; } body.pc-on .hv-grip { color: var(--dv2-text-muted); } /* ══════════════════════════════════════════════════════════════════════ THE ENTITY TILE — the base design standard for PRV (Aug 2026) One rule, everywhere: EVERY entity gets its own tab. A shop, a family member, a child, a contact field, a list in the order picker — each is a discrete rounded block with its own edge and its own breathing room. It is the pattern the contact card already used, and it is now the pattern the whole app follows. Anything built after this should reach for `.pc-tile` rather than invent a row style. The history matters, because both halves were got wrong in turn: * FIRST the section CONTAINER was an opaque white slab (#shops-box and its id-list siblings in style.css:3443, built for the old flat-grey ground). Four tiles inside it read as tiles inside a box inside a section — three surfaces deep. * THEN the fix removed the container AND flattened the tiles to divider-separated rows, which lost the thing that made the contact card read as clean in the first place. The correct shape is: transparent container, tiled children. The container reset lives further down; this is the tile. ══════════════════════════════════════════════════════════════════════ */ body.pc-on .pc-tile, body.pc-on .pc-shop, body.pc-on .pc-mem { display: block; background: var(--pc-tile-bg); border: 1px solid var(--pc-tile-bd); border-radius: 16px; padding: 13px 14px; margin: 0 0 9px; box-shadow: 0 1px 3px rgba(20,20,40,0.05); width: 100%; text-align: left; color: var(--dv2-text-primary); } body.pc-on { --pc-tile-bg: rgba(255,255,255,0.72); --pc-tile-bd: rgba(20,16,38,0.07); } html[data-theme="dark"] body.pc-on { --pc-tile-bg: rgba(255,255,255,0.07); --pc-tile-bd: rgba(255,255,255,0.12); } body.pc-on .pc-tile:last-child, body.pc-on .pc-shop:last-child, body.pc-on .pc-mem:last-child { margin-bottom: 0; } /* Tiles that are buttons get the contact card's press feedback. */ body.pc-on button.pc-tile:active, body.pc-on .pc-mem:active { transform: scale(.985); } @media (prefers-reduced-motion: reduce) { body.pc-on button.pc-tile:active, body.pc-on .pc-mem:active { transform: none; } } /* THE WHITE SLAB. style.css:3443 gives #shops-box (and #push-box, and the rest of that id list) an opaque `--card-surface` fill with a shadow ring — it was built to BE the card on the legacy grey ground. On the aurora it is an opaque white block sitting inside the glass section that already frames it, which is what read as "a big white tab behind every shop". The rows carry their own separation now, so the container stands down. */ body.pc-on #shops-box, body.pc-on #push-box, body.pc-on #me-box, body.pc-on #about-box, body.pc-on #members-box, body.pc-on #invite-list, body.pc-on #default-opts { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; } body.pc-on #shops-box { margin-bottom: 4px; } body.pc-on .sec-embed { border-bottom: 0; } /* The toggle was jammed against the chip row with no separation and no label. It is a different decision from "which shops exist", so it reads as its own group now. */ body.pc-on .pc-loc-lbl { margin-top: 18px; } body.pc-on #uk-supermarkets { margin-top: 12px; } body.pc-on .set-row.tog { padding: 12px 13px; gap: 11px; align-items: center; font-size: 14.5px; line-height: 1.35; } body.pc-on .set-row.tog .dv2-lineic { width: 19px; height: 19px; flex: none; } body.pc-on .set-row.tog .lbl { flex: 1; } body.pc-on .set-row.tog .opt-check { flex: none; } /* ── Quick-add picker ─────────────────────────────────────────────────── */ .pc-picker { display: flex; flex-direction: column; max-height: 76vh; } .pc-picker-search { display: flex; align-items: center; gap: 9px; margin: 2px 16px 10px; padding: 10px 12px; border-radius: 13px; background: rgba(20,16,38,0.05); border: 1px solid rgba(20,16,38,0.10); } html[data-theme="dark"] .pc-picker-search { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.14); } .pc-picker-search .dv2-lineic { width: 17px; height: 17px; flex: none; color: var(--dv2-text-sub); } .pc-picker-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font: inherit; font-size: 16px; color: var(--dv2-text-primary); } .pc-picker-search input::placeholder { color: var(--dv2-text-muted); } .pc-picker-list { overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; } .pc-picker-i { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px 16px; font: inherit; font-size: 15px; font-weight: 600; background: none; border: 0; border-top: 1px solid var(--dv2-divider); text-align: left; color: var(--dv2-text-primary); cursor: pointer; } .pc-picker-i .dv2-lineic { width: 18px; height: 18px; flex: none; color: var(--dv2-text-sub); } .pc-picker-i.is-new, .pc-picker-i.is-new .dv2-lineic { color: var(--dv2-accent); } .pc-picker-i:active { background: rgba(20,16,38,0.04); } html[data-theme="dark"] .pc-picker-i:active { background: rgba(255,255,255,0.06); } .pc-picker-empty { margin: 0; padding: 18px 16px; font-size: 13.5px; color: var(--dv2-text-sub); border-top: 1px solid var(--dv2-divider); } /* ── The standard applied ─────────────────────────────────────────────── */ /* Shop tiles: the name line, then the meta grid, inside one tile. */ body.pc-on .pc-shop-meta { border-top: 1px solid var(--dv2-divider); } /* Contact card tiles were already the pattern — they only needed the same fill and edge as everything else, instead of an opaque #fff. */ body.pc-on .cc-card, body.pc-on .cc-progress-card { background: var(--pc-tile-bg); border: 1px solid var(--pc-tile-bd); border-radius: 16px; box-shadow: 0 1px 3px rgba(20,20,40,0.05); } body.pc-on .cc-card--empty { border-style: dashed; box-shadow: none; } /* Child settings, list order, and the nav rows all take the same frame. */ body.pc-on .cl-row, body.pc-on .hv-order-row, body.pc-on .set-card-flush .set-nav-row, body.pc-on .set-row.tog, body.pc-on .pc-vrow { background: var(--pc-tile-bg); border: 1px solid var(--pc-tile-bd); border-radius: 16px; box-shadow: 0 1px 3px rgba(20,20,40,0.05); margin-bottom: 9px; } body.pc-on .pc-vrow + .pc-vrow { margin-top: 0; } body.pc-on .hv-order-row:last-child, body.pc-on .cl-row:last-child { margin-bottom: 0; } /* The domain groups stay ONE card with dividers: a domain is a heading, not an entity. Tiles are for the things inside it. */ body.pc-on .pc-group .acc { border-radius: 0; } /* ── Child settings ─────────────────────────────────────────────────────── The last section still wearing the old visual system whole: an opaque white .cl-card wrapper, a grey .cl-sub box inside it, emoji icons in hue-tinted wells, iOS-blue links and a green switch. Four surfaces and three accent colours in one panel. Brought onto the entity-tile standard: the wrappers stand down, every row becomes its own tab, and the accents become PRV violet. ─────────────────────────────────────────────────────────────────────── */ /* The child card itself is a tile; its wrapper chrome goes. */ body.pc-on .cl-card { background: var(--pc-tile-bg); border: 1px solid var(--pc-tile-bd); border-radius: 16px; box-shadow: 0 1px 3px rgba(20,20,40,0.05); margin-bottom: 9px; overflow: visible; } body.pc-on .cl-card:last-child { margin-bottom: 0; } body.pc-on .cl-body { border-top: 1px solid var(--dv2-divider); padding: 4px 12px 12px; } /* .cl-sub was a grey #f6f6f9 box holding the rows — the container-behind-the tabs pattern again. Flat, and the rows tile themselves. */ body.pc-on .cl-sub { background: transparent; border-radius: 0; overflow: visible; } body.pc-on .cl-row { background: var(--pc-tile-bg); border: 1px solid var(--pc-tile-bd); border-radius: 14px; box-shadow: 0 1px 3px rgba(20,20,40,0.05); margin-bottom: 8px; padding: 11px 12px; } body.pc-on .cl-sub .cl-row:last-child { margin-bottom: 0; } /* The hairline that used to separate rows inside the grey box. Tiles have their own edges, so it would draw a second line on top of one. */ body.pc-on .cl-row + .cl-row::before { content: none; } /* Icon well: no hue tint, no raster. */ body.pc-on .cl-ic { width: 22px; height: 22px; border-radius: 0; background: transparent !important; color: var(--dv2-text-primary); } body.pc-on .cl-ic .dv2-lineic, body.pc-on .cl-ic .cl-ic-img { width: 21px; height: 21px; } body.pc-on .cl-nm, body.pc-on .cl-lbl { color: var(--dv2-text-primary); } body.pc-on .cl-st, body.pc-on .cl-mini, body.pc-on .cl-note, body.pc-on .cl-loading { color: var(--dv2-text-sub); } body.pc-on .cl-caret { width: 17px; height: 17px; color: var(--dv2-text-muted); } body.pc-on .cl-caret.open { transform: rotate(90deg); } /* iOS blue -> PRV violet. */ body.pc-on .cl-link { color: var(--dv2-accent); } /* The green switch was the only green control left on the screen, and it did not match the violet .pc-sw used by the notification toggles two sections above it. One switch, one colour. */ body.pc-on .cl-sw { background: rgba(20,16,38,0.18); } html[data-theme="dark"] body.pc-on .cl-sw { background: rgba(255,255,255,0.20); } body.pc-on .cl-sw.on { background: var(--dv2-accent); } body.pc-on .cl-pill.ok { background: rgba(26,127,55,0.12); color: #1a7f37; } html[data-theme="dark"] body.pc-on .cl-pill.ok { background: rgba(93,212,143,0.16); color: #5DD48F; } body.pc-on .cl-btn.danger { background: rgba(180,35,24,0.10); color: #B42318; } html[data-theme="dark"] body.pc-on .cl-btn.danger { background: rgba(255,138,128,0.14); color: #FF8A80; } /* The notification category rows were divider-separated too. Same standard. */ body.pc-on .pc-tog { background: var(--pc-tile-bg); border: 1px solid var(--pc-tile-bd); border-radius: 14px; box-shadow: 0 1px 3px rgba(20,20,40,0.05); margin-bottom: 8px; padding: 11px 12px; } body.pc-on .pc-tog:last-of-type { margin-bottom: 0; } body.pc-on .pc-step { background: var(--pc-tile-bg); border: 1px solid var(--pc-tile-bd); border-radius: 14px; margin-bottom: 8px; padding: 11px 12px; } /* An EXPANDED child is a container for its own tiles, not a tile itself. Tile-inside-tile is the same two-surface problem as the section slab, just one level deeper. Collapsed it is a tab; open it steps back. */ body.pc-on .cl-card.open { background: transparent; border-color: transparent; box-shadow: none; padding: 0; } body.pc-on .cl-card.open > .cl-head { background: var(--pc-tile-bg); border: 1px solid var(--pc-tile-bd); border-radius: 16px; } body.pc-on .cl-card.open > .cl-body { border-top: 0; padding: 10px 0 0; } /* ═══════════════════════════════════════════════════════════════════════════ PROFILE → AI (b197) ═══════════════════════════════════════════════════════════════════════════ Gated on body.pc-on like the rest of this file. The meter is the only part drawn as a figure rather than a row: it is the one number on the screen a person checks rather than reads. */ body.pc-on .ai-meter-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } body.pc-on .ai-meter-n { font-size: 30px; font-weight: 760; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--dv2-text-primary); } body.pc-on .ai-meter-of { font-size: 13px; color: var(--dv2-text-sub); } body.pc-on .ai-bar { height: 6px; border-radius: 6px; margin: 10px 0 8px; background: color-mix(in srgb, var(--dv2-text-sub, #888) 22%, transparent); overflow: hidden; } body.pc-on .ai-bar i { display: block; height: 100%; border-radius: 6px; background: var(--dv2-accent, #8F5FBE); transition: width .35s cubic-bezier(.25,.9,.3,1); } /* Semantic, not decorative: amber is "you are close", red is "it has stopped spending". Neither is the accent, so the accent keeps meaning "this is AI". */ body.pc-on .ai-meter.is-near .ai-bar i { background: hsl(38 88% 55%); } body.pc-on .ai-meter.is-over .ai-bar i { background: hsl(4 74% 58%); } body.pc-on .ai-cap { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 14px; font-weight: 600; /* Explicit: