/* The signed-in app: home, Watching, and the shared pieces they use.
   Same identity as the public site (docs/IDENTITY.md: SF Pro/Inter, white and near-black, green as light, the
   Viper result) at app density: fixed type steps, no heroes, no eyebrows,
   containers only where the product needs them. */

:root {
  --ap-ink: #1D1D1F; --ap-body: #424245; --ap-mute: #6E6E73; --ap-rule: #E5E5EA; --ap-paper: #FFFFFF;
  --ap-green: #0B7A3E; --ap-green-deep: #075C2E; --ap-tint: #F5F5F7;
  --ap-red: #C4271D; --ap-red-tint: #FDECEB; --ap-amber: #965A00; --ap-amber-mark: #FFB224; --ap-amber-tint: #FFF6E5; --ap-grey: #8E8E93;
  --ap-gutter: clamp(16px, 4vw, 40px);
  --ap-measure: 46rem;
}

/* Who sees what: signed-in people get the app, visitors get the homepage. */
html[data-auth="out"] [data-app-only] { display: none !important; }
html[data-auth="out"] .topnav .tb-in { display: none !important; }
html[data-auth="in"] .topnav .tb-out { display: none !important; }
html[data-auth="in"] #v-check [data-home-section]:not([data-home-section="checker"]):not([data-home-section="footer"]):not([data-home-section="pricing"]) { display: none !important; }
/* Plans stay reachable when signed in: shown when asked for, or for someone on Free. */
html[data-auth="in"]:not([data-plans]) #v-check [data-home-section="pricing"] { display: none !important; }
html[data-auth="in"] #v-check .hp-check-head { display: none; }
html[data-auth="in"] #v-check .hp-check { display: block; max-width: calc(var(--ap-measure) + 2 * var(--ap-gutter)); margin: 0 auto; padding: 0 var(--ap-gutter); }
html[data-auth="in"] #v-check .hp-check .hero-tool { max-width: none; }

/* The certainty mark, wherever it appears on its own (rows, timelines). */
.vr-shape[data-verdict] { display: inline-block; width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto; box-shadow: inset 0 0 0 2.5px var(--ap-grey); background: none; }
.vr-shape[data-verdict="SCAM"] { background: var(--ap-red); box-shadow: none; }
.vr-shape[data-verdict="CAUTION"] { background: linear-gradient(to top, var(--ap-amber-mark) 50%, transparent 50%); box-shadow: inset 0 0 0 2.5px var(--ap-amber-mark); }
.vr-shape[data-verdict="NO_KNOWN_THREAT_FOUND"] { background: radial-gradient(circle, var(--ap-green) 0 3px, transparent 3.5px); box-shadow: inset 0 0 0 2.5px var(--ap-green); }

/* ── page frame ──────────────────────────────────────────────────────────── */
.ap-view.act, .ap-home, .ap-after { font-family: var(--sans); color: var(--ap-ink); }
.ap-view.act { display: block; max-width: calc(var(--ap-measure) + 2 * var(--ap-gutter)); margin: 0 auto; padding: clamp(24px, 4vw, 48px) var(--ap-gutter) 96px; }
.ap-home, .ap-after { display: block; max-width: calc(var(--ap-measure) + 2 * var(--ap-gutter)); margin: 0 auto; padding: 0 var(--ap-gutter); }
.ap-home { padding-top: clamp(24px, 4vw, 48px); }
.ap-after { padding-bottom: 72px; }
.ap-head { margin: 0 0 20px; }
.ap-title { margin: 0; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; overflow-wrap: anywhere; text-wrap: balance; }
.ap-lead { margin: 8px 0 0; font-size: 1.0625rem; line-height: 1.5; color: var(--ap-body); max-width: 38rem; }
.ap-back { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 4px; color: var(--ap-green); font-weight: 600; text-decoration: none; }
.ap-back:hover { text-decoration: underline; text-underline-offset: 3px; }
#v-check .ap-h2, .ap-h2 { margin: 0; max-width: none; font-size: 1.125rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
.ap-line { margin: 6px 0 0; color: var(--ap-body); line-height: 1.5; }

/* A note: the one thing that needs attention, an empty state, or a problem. */
.ap-note { margin: 0 0 20px; padding: 18px 20px; border-radius: 16px; background: var(--ap-paper); box-shadow: 0 0 0 1px var(--ap-rule); display: grid; gap: 6px; justify-items: start; }
.ap-note[data-kind="alert"] { background: var(--ap-red-tint); box-shadow: 0 0 0 1px #F7C6C2; }
.ap-note[data-kind="problem"] { background: var(--ap-amber-tint); box-shadow: 0 0 0 1px #F5D9A8; }
.ap-note-t { margin: 0; display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.0625rem; line-height: 1.3; }
.ap-note-b { margin: 0; color: var(--ap-body); line-height: 1.5; overflow-wrap: anywhere; }
.ap-note-b b { color: var(--ap-ink); }
.ap-note .vw-btn, .ap-note .linkbtn { margin-top: 8px; }
a.vw-btn { display: inline-flex; align-items: center; text-decoration: none; }

/* Home blocks after the checker */
.ap-block { padding: 24px 0; border-top: 1px solid var(--ap-rule); }
.ap-block:first-child { margin-top: 32px; }
.ap-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ap-block-head .linkbtn { min-height: 44px; display: inline-flex; align-items: center; }
.ap-rows { list-style: none; margin: 10px 0 0; padding: 0; }
.ap-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 48px; padding: 8px 0; color: inherit; text-decoration: none; border-bottom: 1px solid var(--ap-rule); }
.ap-rows li:last-child .ap-row { border-bottom: 0; }
.ap-row:hover .ap-row-subj { text-decoration: underline; text-underline-offset: 3px; }
.ap-row-subj { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-row-meta { color: var(--ap-mute); font-size: 0.9375rem; white-space: nowrap; }
@container (max-width: 420px) { .ap-row { grid-template-columns: auto minmax(0, 1fr); } .ap-row-meta { grid-column: 2; white-space: normal; } }
.ap-after, .wl-group { container-type: inline-size; }

/* ── Watching list ───────────────────────────────────────────────────────── */
.wl-quiet { margin: -4px 0 20px; color: var(--ap-body); }
.wl-group { margin-top: 28px; }
.wl-gh { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; font-size: 1.0625rem; font-weight: 700; }
.wl-count { min-width: 24px; padding: 0 7px; border-radius: 999px; background: #F5F5F7; color: var(--ap-body); font-size: 0.8125rem; line-height: 22px; text-align: center; font-weight: 600; }
.wl-group[data-group="attention"] .wl-count { background: var(--ap-red); color: #fff; }
.wl-list { list-style: none; margin: 0; padding: 0; }
.wl-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 4px 14px; padding: 16px 0; border-bottom: 1px solid var(--ap-rule); color: inherit; text-decoration: none; }
.wl-row .vr-shape { margin-top: 3px; }
.wl-main { display: grid; gap: 2px; min-width: 0; }
.wl-subj { font-weight: 700; font-size: 1.0625rem; overflow-wrap: anywhere; }
.wl-state { font-weight: 600; color: var(--ap-body); }
.wl-row[data-verdict="SCAM"]:not([data-paused]) .wl-state { color: var(--ap-red); }
.wl-row[data-verdict="CAUTION"]:not([data-paused]) .wl-state { color: var(--ap-amber); }
.wl-why { color: var(--ap-ink); line-height: 1.45; }
.wl-meta { color: var(--ap-mute); font-size: 0.9375rem; }
.wl-go { align-self: center; min-height: 44px; display: inline-flex; align-items: center; color: var(--ap-green); font-weight: 600; }
.wl-row:hover .wl-subj, .wl-row:focus-visible .wl-subj { text-decoration: underline; text-underline-offset: 3px; }
.wl-row:focus-visible { outline: 3px solid var(--ap-green); outline-offset: 2px; border-radius: 6px; }
.wl-group[data-group="attention"] .wl-row { padding: 16px; margin: 8px 0; border: 0; border-radius: 16px; background: var(--ap-paper); box-shadow: 0 0 0 1px #F7C6C2; }
.wl-group[data-group="paused"] .wl-subj, .wl-group[data-group="paused"] .wl-state { color: var(--ap-mute); }
@container (max-width: 400px) { .wl-row { grid-template-columns: auto minmax(0, 1fr); } .wl-go { grid-column: 2; min-height: 32px; } }

/* ── Watch detail ────────────────────────────────────────────────────────── */
.wd-head { margin-bottom: 18px; }
.wd-subj { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem); }
.wd-status { margin: 10px 0 0; display: flex; align-items: center; gap: 10px; color: var(--ap-body); }
.wd-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ap-grey); flex: 0 0 auto; }
.wd-status[data-on="true"] .wd-dot { background: var(--ap-green); box-shadow: 0 0 0 4px var(--ap-tint); }
@media (prefers-reduced-motion: no-preference) { .wd-status[data-on="true"] .wd-dot { animation: wd-breathe 2.4s ease-in-out infinite; } }
@keyframes wd-breathe { 50% { box-shadow: 0 0 0 7px rgba(46, 107, 27, 0.08); } }
.wd-now { padding-bottom: 0; }
.wd-now .vr-verdict { margin-bottom: 14px; }
.wd-changed { padding: 14px 0; border-top: 1px solid var(--vr-line, var(--ap-rule)); }
.wd-changed h3 { margin: 0 0 4px; font-size: 0.9375rem; font-weight: 700; color: var(--ap-mute); }
.wd-changed p { margin: 0; font-size: 1.0625rem; line-height: 1.45; overflow-wrap: anywhere; }
.wd-history { margin-top: 32px; }
.wd-story { list-style: none; margin: 8px 0 0; padding: 0; }
.wd-story li { position: relative; display: grid; gap: 2px; padding: 0 0 18px 26px; }
.wd-story li::before { content: ""; position: absolute; left: 8px; top: 24px; bottom: 4px; width: 2px; background: var(--ap-rule); }
.wd-story .vr-shape { position: relative; z-index: 1; }
.wd-story li:last-child::before { display: none; }
.wd-story time { color: var(--ap-mute); font-size: 0.9375rem; }
.wd-story b { display: flex; align-items: center; gap: 8px; margin-left: -26px; font-weight: 700; }
.wd-story p { margin: 0; color: var(--ap-body); line-height: 1.45; overflow-wrap: anywhere; }
.wd-actions { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.wd-actions .linkbtn.danger { min-height: 44px; color: var(--ap-red); }
@media (min-width: 1100px) {
  #v-watching.act { max-width: calc(64rem + 2 * var(--ap-gutter)); }
  #v-watching.act:has(.wd-now) { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 48px; align-items: start; }
  #v-watching.act:has(.wd-now) > .ap-back, #v-watching.act:has(.wd-now) > .wd-head { grid-column: 1 / -1; }
  #v-watching.act:has(.wd-now) > .wd-history { grid-column: 2; grid-row: 3 / span 3; margin-top: 0; }
  #v-watching.act:has(.wd-now) > .wd-actions, #v-watching.act:has(.wd-now) > .vw-note { grid-column: 1; }
  #v-watching.act:not(:has(.wd-now)) { max-width: calc(var(--ap-measure) + 2 * var(--ap-gutter)); }
}

/* ── Activity: alerts first, then one row per thing checked ──────────────── */
#v-history .act-alerts { margin: 4px 0 36px; }
#v-history .nrow { display: grid; gap: 4px; justify-items: start; padding: 18px 20px; margin: 10px 0 0; border-radius: 16px; background: var(--ap-paper); box-shadow: 0 0 0 1px var(--ap-rule); cursor: default; }
#v-history .nrow.unread { box-shadow: 0 0 0 1px #F7C6C2; }
#v-history .nrow[data-verdict="NO_KNOWN_THREAT_FOUND"].unread { box-shadow: 0 0 0 1px var(--ap-rule); }
#v-history .nrow p { margin: 0; }
#v-history .nrow-t { display: flex; align-items: flex-start; gap: 10px; font-weight: 700; font-size: 1.0625rem; line-height: 1.3; }
#v-history .nrow-t > span:nth-child(2) { flex: 0 1 auto; min-width: 0; }
#v-history .nrow-t .vr-shape { margin-top: 2px; }
#v-history .nrow-new { flex: none; margin-top: 1px; }
#v-history .nrow-new { padding: 1px 8px; border-radius: 999px; background: var(--ap-red); color: #fff; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.01em; }
#v-history .nrow-subj { font-weight: 600; overflow-wrap: anywhere; }
#v-history .nrow-reason { color: var(--ap-ink); line-height: 1.45; overflow-wrap: anywhere; font-size: 1rem; }
#v-history .nrow-next { color: var(--ap-ink); font-weight: 600; line-height: 1.45; padding: 10px 12px; margin-top: 4px !important; border-radius: 10px; background: var(--ap-tint); width: auto; justify-self: stretch; box-sizing: border-box; font-size: 1rem; }
#v-history .nrow-meta { color: var(--ap-mute); font-size: 0.9375rem; }
#v-history .nrow-go { margin-top: 8px; }

#v-history .hlist { border-top: 1px solid var(--ap-rule); }
#v-history .hrow { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px; padding: 14px 4px; min-height: 48px; border: 0; border-bottom: 1px solid var(--ap-rule); border-radius: 0; background: none; cursor: pointer; }
#v-history .hrow .vr-shape { margin-top: 3px; }
#v-history .hrow[aria-expanded="true"] { border-bottom-color: transparent; }
#v-history .hrow:hover .hsubj { text-decoration: underline; text-underline-offset: 3px; }
#v-history .hrow:focus-visible { outline: 3px solid var(--ap-green); outline-offset: 2px; border-radius: 6px; }
#v-history .hmain { display: grid; gap: 2px; min-width: 0; }
#v-history .hsubj { font-weight: 600; color: var(--ap-ink); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
#v-history .hmeta { color: var(--ap-mute); font-size: 0.9375rem; }
#v-history .hdetail.vr { margin: 4px 0 18px; }
#v-history .hdetail .hact { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 0; margin: 0; }
#v-history .hdetail .vr-do p + p { margin-top: 6px !important; }
#v-history .hdetail .hrecover { background: none; border: 0; padding: 0; min-height: 44px; color: var(--ap-green); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
#v-history .hdetail .vr-details { margin: 0 -24px; padding: 4px 24px 12px; border-top: 1px solid var(--vr-line); }
#v-history .hdetail .vr-details summary { min-height: 44px; }
#v-history .hdetail .vr-details h5 { margin: 6px 0 4px; font-size: 0.9375rem; color: var(--ap-mute); }
#v-history .hdetail .hstamp { color: var(--ap-mute); font-size: 0.9375rem; margin-top: 8px; }
#v-history .hdetail .hdel { color: var(--ap-red); min-height: 44px; }
#v-history #history-content, #v-history #history-toolbar { display: block; }
#v-history #history-toolbar { margin: 0 0 6px; }
#v-history .act-clear { margin: 18px 0 0; }
#v-history .act-clear .linkbtn { color: var(--ap-mute); min-height: 44px; }

/* ── Family ──────────────────────────────────────────────────────────────── */
#v-family .fam-sec { padding: 28px 0; border-top: 1px solid var(--ap-rule); }
#v-family .fam-sec:first-of-type, #v-family #fam-guide + .fam-sec { border-top: 0; padding-top: 4px; }
.fam-h { margin: 0; font-size: 1.375rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
.fam-def { margin: 6px 0 16px; color: var(--ap-body); line-height: 1.5; max-width: 40rem; }
.fam-house-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fam-count { color: var(--ap-mute); font-size: 0.9375rem; }
.fam-people { list-style: none; margin: 0 0 20px; padding: 0; border-top: 1px solid var(--ap-rule); }
.fam-person { border-radius: 8px; width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 4px; border: 0; border-bottom: 1px solid var(--ap-rule); background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; min-height: 64px; }
.fam-person:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.fam-person:focus-visible { outline: 3px solid var(--ap-green); outline-offset: 2px; border-radius: 6px; }
.fam-pmain { display: grid; gap: 1px; min-width: 0; }
.fam-pmain strong { font-weight: 700; overflow-wrap: anywhere; }
.fam-you { font-weight: 400; color: var(--ap-mute); }
.fam-prole { color: var(--ap-body); font-size: 0.9375rem; }
.fam-pmeta { color: var(--ap-mute); font-size: 0.9375rem; }
.fam-chev { color: var(--ap-mute); font-size: 1.5rem; line-height: 1; }
.fam-invite, .fam-join { display: grid; gap: 8px; max-width: 30rem; margin-top: 8px; }
.fam-invite label, .fam-join label { font-weight: 700; }
.fam-invite input, .fam-join input { min-height: 48px; padding: 10px 14px; border: 1px solid var(--ap-rule); border-radius: 10px; background: var(--ap-paper); font: inherit; }
.fam-invite .mini { margin: 0; }
.fam-invite .vw-btn, .fam-join .vw-btn { justify-self: start; }
.fam-more { margin-top: 20px; }
.fam-more summary { min-height: 44px; display: flex; align-items: center; font-weight: 600; cursor: pointer; }
.fam-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.fam-code { margin: 6px 0; font-size: 1.75rem; font-weight: 700; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }
.fam-state { font-weight: 700; }
.fam-private { margin: 20px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--ap-tint); color: var(--ap-ink); }
.fam-guide { margin: 0 0 8px; padding: 18px 20px; border-radius: 16px; background: var(--ap-paper); box-shadow: 0 0 0 1px var(--ap-rule); }
.fam-guide-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fam-guide .fam-h { font-size: 1.125rem; }
.fam-guide-head .linkbtn { min-height: 44px; color: var(--ap-mute); }
.fam-steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.fam-steps li { display: flex; align-items: center; gap: 12px; min-height: 40px; }
.fam-steps a { color: var(--ap-green); font-weight: 600; }
.fam-step-mark { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ap-grey); flex: none; }
.fam-steps li[data-done="true"] .fam-step-mark { background: var(--ap-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; box-shadow: none; }
.fam-steps li[data-done="true"] span:not(.fam-step-mark):not(.visually-hidden) { color: var(--ap-mute); text-decoration: line-through; text-decoration-color: var(--ap-rule); }
.fam-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; max-width: 42rem; }
.fam-list li { position: relative; padding-left: 30px; line-height: 1.5; color: var(--ap-ink); }
.fam-list li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; }
.fam-list li[data-kind="private"]::before { background: var(--ap-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Crect x='5' y='8' width='8' height='6' rx='1' fill='white'/%3E%3Cpath d='M6.5 8V6.5a2.5 2.5 0 015 0V8' fill='none' stroke='white' stroke-width='1.6'/%3E%3C/svg%3E") center/14px no-repeat; }
.fam-list li[data-kind="visible"]::before { box-shadow: inset 0 0 0 2px var(--ap-grey); background: radial-gradient(circle, var(--ap-grey) 0 3px, transparent 3.5px); }
.fam-list li[data-kind="choice"]::before { box-shadow: inset 0 0 0 2px var(--ap-green); }
#v-family .sw-state { margin: 0 0 10px; font-weight: 700; }
#v-family .sw-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
#v-family .swverify { margin-top: 22px; padding: 16px 18px; border-radius: 12px; background: #F5F5F7; }
#v-family .swvkick { margin: 0 0 8px; font-size: 1rem; font-weight: 700; color: var(--ap-ink); text-transform: none; letter-spacing: 0; }
#v-family .swsteps { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 6px; color: var(--ap-ink); line-height: 1.45; }
#v-family .swrow { display: flex; gap: 10px; flex-wrap: wrap; }
#v-family .swrow input { flex: 1 1 200px; min-height: 48px; padding: 10px 14px; border: 1px solid var(--ap-rule); border-radius: 10px; font: inherit; background: var(--ap-paper); }
#v-family .word { font-size: 1.5rem; font-weight: 700; margin: 10px 0; overflow-wrap: anywhere; }
#v-family .account-identity { margin: 6px 0 18px; }
#v-family .account-section { padding: 16px 0; border-top: 1px solid var(--ap-rule); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Account ─────────────────────────────────────────────────────────────── */
#v-account.act { max-width: calc(60rem + 2 * var(--ap-gutter)); }
#v-account .account-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
#v-account .account-layout > .account-nav { display: none; }
#v-account .account-content { max-width: none; }
#v-account .account-content h2 { font-size: 1.5rem; margin: 0 0 6px; }
/* Account is a list and its pages at every width: the overview is the menu, each page has "← Account". */
#v-account .account-list { border-top: 1px solid var(--ap-rule); margin-top: 8px; }
#v-account .account-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 4px; min-height: 64px; border-bottom: 1px solid var(--ap-rule); color: inherit; text-decoration: none; }
#v-account .account-row > span:first-child { display: grid; gap: 2px; min-width: 0; }
#v-account .account-row-name { font-weight: 700; color: var(--ap-ink); overflow-wrap: anywhere; }
#v-account .account-row-value { color: var(--ap-body); line-height: 1.45; overflow-wrap: anywhere; }
#v-account .account-row-chev { color: var(--ap-mute); font-size: 1.5rem; line-height: 1; flex: none; }
#v-account .account-row-link:hover .account-row-name { text-decoration: underline; text-underline-offset: 3px; }
#v-account .account-row-link:focus-visible, #v-account .account-identity-link:focus-visible { outline: 3px solid var(--ap-green); outline-offset: 2px; border-radius: 8px; }
#v-account .account-identity-link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 8px 4px 20px; color: inherit; text-decoration: none; }
#v-account .account-identity-link > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
#v-account .account-plan-name { font-size: 1.75rem; }
#v-account .account-plan-line { font-size: 1.0625rem; color: var(--ap-ink); }
#v-account .account-past { margin-top: 28px; }
#v-account .account-past summary { min-height: 44px; display: flex; align-items: center; font-weight: 600; cursor: pointer; color: var(--ap-body); }
#v-account .account-danger h3 { color: var(--ap-ink); }
#v-account .account-links .linkbtn, #v-account .dangerlink { min-height: 44px; display: inline-flex; align-items: center; }
#v-account .account-guest { padding-top: 8px; }

/* ── Watch refinements: paused never reads as safe; watching is a neutral eye ── */
.wl-pause { display: inline-block; width: 18px; height: 18px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ap-grey);
  background: linear-gradient(var(--ap-grey), var(--ap-grey)) 6px 5px / 2px 8px no-repeat, linear-gradient(var(--ap-grey), var(--ap-grey)) 10px 5px / 2px 8px no-repeat; }
.wl-row .wl-pause { margin-top: 3px; }
.wd-eye { display: inline-block; width: 20px; height: 20px; flex: none; background: center / 20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C625B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.wd-status .wd-dot { display: none; }
.wl-group[data-group="known"] .wl-count { background: #FDECEB; color: var(--ap-red); }
.wl-add { margin: 20px 0 0; }
.wl-add .linkbtn { min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; }
.ap-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.wd-known { margin: 20px 0 0; padding: 12px 14px; border-radius: 10px; background: #F5F5F7; color: var(--ap-ink); line-height: 1.45; }
.wd-now .vr-do .linkbtn { min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; }
.vr-no-watch { color: var(--ap-body); }
/* "More steps" opens: show it. */
.vr-more summary { gap: 8px; }
.vr-more summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; }
.vr-more[open] summary::after { transform: translateY(2px) rotate(225deg); }
.vr-more summary::-webkit-details-marker { display: none; }
.wd-now .vr-sure { margin: 0 0 14px; color: var(--vr-body, var(--ap-body)); }
.wd-now .vr-why { padding-bottom: 14px; }
.wd-new { margin: 6px 0 0 20px !important; color: var(--ap-mute); font-size: 0.9375rem; }
.ap-offline { position: sticky; top: 0; z-index: 60; margin: 0; padding: 10px var(--ap-gutter); background: var(--ap-ink); color: #fff; text-align: center; font: 600 0.9375rem/1.4 var(--sans); }
#v-history .ap-note, #v-account .ap-note { margin: 12px 0; }
html[data-auth="in"] .mkplan[data-current="true"] { position: relative; box-shadow: 0 0 0 2px var(--ap-green); }
html[data-auth="in"] .mkplan[data-current="true"]::before { content: attr(data-current-label); position: absolute; top: -12px; left: 16px; padding: 2px 10px; border-radius: 999px; background: var(--ap-green); color: #fff; font: 700 0.8125rem/1.5 var(--sans); }
/* Signed in: the footer keeps company and legal links; the product links duplicate the app nav. */
html[data-auth="in"] .hp-footer-cols > div:first-child { display: none; }
/* Family: a person's page stands alone; without a household the privacy model has nothing to describe yet. */
#v-family[data-detail="true"] > :not(.ap-head):not(#circle-card) { display: none; }
#v-family[data-detail="true"] .ap-head { display: none; }
#v-family[data-household="none"] #fam-privacy { display: none; }
.fam-steps a, .fam-steps li > span:not(.fam-step-mark):not(.visually-hidden) { min-height: 44px; display: inline-flex; align-items: center; }
.fam-more summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.fam-more-sum { color: var(--ap-mute, #6E6E73); font-weight: 400; font-size: 0.9375rem; }
.fam-welcome { margin-block: 12px 16px; }
.sw-up { margin-top: 12px; }
.sw-warn-ask { font-weight: 600; margin: 12px 0 8px; }
.sw-warn-done { font-weight: 600; color: var(--ap-green); margin-top: 12px; }
/* Wide screens: Activity puts alerts beside checks instead of one long column. */
@media (min-width: 1100px) {
  #v-history.act { max-width: calc(68rem + 2 * var(--ap-gutter)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: 48px; align-items: start; }
  #v-history.act > .ap-head, #v-history.act > #history-signin { grid-column: 1 / -1; }
  #v-history.act > .act-alerts { grid-column: 1; margin-top: 0; }
  #v-history.act > #history-content { grid-column: 2; }
}
#v-history .nrow { grid-template-columns: minmax(0, 1fr); }
#v-history .nrow > * { max-width: 100%; }
#v-history .nrow-t > span:nth-child(2), #v-history .nrow-reason { overflow-wrap: anywhere; }

/* ── One app grid ─────────────────────────────────────────────────────────
   Every signed-in screen shares one container and one left edge; reading
   blocks keep the measure inside it, left-aligned, so switching tabs never
   moves the content. Two-column screens (watch detail, Activity, Account)
   use the full width of the same container. */
:root { --ap-wide: 64rem; }
.ap-view.act, #v-watching.act, #v-history.act, #v-account.act, #v-watching.act:not(:has(.wd-now)) { max-width: calc(var(--ap-wide) + 2 * var(--ap-gutter)); }
html[data-auth="in"] #v-check .hp-check, .ap-home, .ap-after { max-width: calc(var(--ap-wide) + 2 * var(--ap-gutter)); }
html[data-auth="in"] #v-check .hp-check > *, .ap-home > *, .ap-after > * { max-width: var(--ap-measure); }
#v-watching.act:not(:has(.wd-now)) > *, #v-family.act > *, #v-circle.act > *, #v-recovery.act > * { max-width: var(--ap-measure); }
html[data-auth="in"] #v-check #pricing { max-width: calc(var(--ap-wide) + 2 * var(--ap-gutter)); margin-inline: auto; padding-inline: var(--ap-gutter); box-sizing: border-box; }
html[data-auth="in"] #v-check .hp-footer { max-width: calc(var(--ap-wide) + 2 * var(--ap-gutter)); margin-inline: auto; padding-inline: var(--ap-gutter); box-sizing: border-box; }

/* Trusted Circle reads like the Family page it belongs to. */
#v-circle .card { background: none; border: 0; box-shadow: none; padding: 0; margin: 0 0 32px; border-radius: 0; }
#v-circle .account-form { display: grid; gap: 8px; max-width: 30rem; margin-top: 20px; }
#v-circle .account-form .vw-btn, #v-family .account-form .vw-btn { justify-self: start; }

/* Destructive actions look destructive everywhere. */
.linkbtn.danger { color: var(--ap-red); }
.vw-btn.danger { background: var(--ap-red); border-color: var(--ap-red); color: #fff; }
.vw-btn.alt.danger { background: transparent; color: var(--ap-red); border-color: currentColor; }

/* Family details */
.fam-guide { margin-bottom: 40px; }
.fam-confirm { margin: 12px 0; padding: 14px 16px; border-radius: 12px; background: var(--ap-paper); box-shadow: 0 0 0 1px var(--ap-rule); }
.fam-confirm p { margin: 0 0 10px; font-weight: 600; }
.fam-quiet { margin-top: 8px; }
.fam-danger { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--ap-rule); }
.fam-code { user-select: all; }
.fam-list li[data-kind="included"]::before { background: var(--ap-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.5 2.5L13 6.5' fill='none' stroke='%232E6B1B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.fam-more summary { cursor: pointer; color: var(--ap-green); font-weight: 700; min-height: 44px; }
.fam-more summary::after { content: "›"; margin-left: 6px; transition: transform .15s; }
.fam-more[open] summary::after { transform: rotate(90deg); }
#v-family[data-detail="true"].act { padding-top: clamp(16px, 3vw, 32px); }
.vr-subject { margin: 0 0 10px; color: var(--ap-mute); font-size: 0.9375rem; overflow-wrap: anywhere; }
.vr-steps { margin: 8px 0 0; padding-left: 1.2em; display: grid; gap: 6px; color: var(--ap-body); line-height: 1.45; }
#uc-out .hact { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
html[data-auth="in"] #check:has(#uc-out .vr) #uc-modes:not([open]) { display: none; }
.focus-target:focus { outline: none; } .focus-target:focus-visible { outline: 3px solid var(--ap-green); outline-offset: 4px; border-radius: 4px; }
/* Activity: a new alert is raised; seen alerts are flat rows that open from anywhere on the row. */
#v-history .nrow:not(.unread) { position: relative; background: none; box-shadow: none; border-radius: 0; margin: 0; padding: 16px 0; border-bottom: 1px solid var(--ap-rule); }
#v-history .nrow:not(.unread) .nrow-next { display: none; }
#v-history .nrow-a { color: inherit; text-decoration: none; }
#v-history .nrow-a::after { content: ""; position: absolute; inset: 0; }
#v-history .nrow-a:hover, #v-history .nrow-a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
#v-history .nrow:not(.unread):has(.nrow-a) .nrow-t::after { content: "›"; margin-left: auto; color: var(--ap-mute); font-weight: 400; }
@media (min-width: 1100px) {
  #v-history.act > .act-alerts, #v-history.act > #history-content { margin-top: 0; padding-top: 0; }
  #v-history.act #history-toolbar { margin-top: 0 !important; padding-top: 0 !important; }
  #v-history.act .wl-gh { margin-top: 0; }
}
/* Account: the overview list is the menu, so the side menu isn't repeated next to it. */
.account-layout[data-tab="overview"] .account-nav { display: none; }
.account-layout[data-tab="overview"] { grid-template-columns: minmax(0, 1fr) !important; }
#v-account .account-section > .btn, #v-account .account-notice > .btn { width: auto; justify-self: start; display: inline-flex; }
#v-account .account-notice .linkbtn.danger { margin-left: 12px; }
/* One "Review" everywhere: the outlined action. */
.wl-go { padding: 0 18px; border: 0; border-radius: var(--ui-pill, 980px); background: var(--ap-tint); color: var(--ap-ink); font-weight: 500; }
.wl-chev { align-self: center; color: var(--ap-mute); font-size: 1.25rem; padding-left: 4px; }
.wd-start { display: inline-block; width: 18px; height: 18px; border-radius: 50%; flex: none; position: relative; z-index: 1; background: var(--ap-paper, #fff); box-shadow: inset 0 0 0 2px var(--ap-rule); }
.wd-full { margin: 6px 0 0; color: var(--ap-mute); font-size: 0.9375rem; }
.fam-h { font-size: 1.25rem; }
@media (max-width: 600px) { .fam-h { font-size: 1.1875rem; } }
html[data-auth="in"] #v-check .hp-check .hero-tool { max-width: var(--ap-measure); }
.vr-do .vr-steps + p, .vr-do .vr-step + p { margin-top: 12px; }
@container (max-width: 400px) { .wl-chev { display: none; } }
/* Secondary result actions share one size and weight, links or buttons. */
.hdetail .hact .vw-btn, #uc-out .hact .vw-btn { font: inherit; font-size: 1rem; font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }
/* Watch offer is a section of the result, not a card inside it. */
#uc-out .vr .vw-offer { margin: 0; border: 0; border-top: 1px solid var(--ap-rule); border-radius: 0; background: none; padding: 20px 24px; }
#uc-out .vr { margin-top: 24px; }
.fam-sub { margin: 20px 0 4px; font-size: 1rem; font-weight: 700; color: var(--ap-ink); }
.fam-seats-note { margin: -8px 0 12px; }
.fam-self { cursor: default; }
.fam-flash { font-weight: 600; color: var(--ap-green); }
.fam-more summary > span:first-child::after { content: " ›"; }
.fam-more summary::after { content: none !important; }
#v-family .mini, #v-account .mini, #v-circle .mini, #v-watching .mini { font-size: 0.9375rem; color: var(--ap-body); }

/* Widths, final: single-column screens are one centred reading column; screens
   with two columns (a watch's page, Activity, Account) use one wider centred grid. */
.ap-view.act, #v-watching.act:not(:has(.wd-now)) { max-width: calc(var(--ap-measure) + 2 * var(--ap-gutter)); }
#v-watching.act:has(.wd-now), #v-history.act, #v-account.act { max-width: calc(var(--ap-wide) + 2 * var(--ap-gutter)); }
@media (max-width: 1099px) { #v-watching.act:has(.wd-now), #v-history.act { max-width: calc(var(--ap-measure) + 2 * var(--ap-gutter)); } }
html[data-auth="in"] #v-check .hp-check, .ap-home, .ap-after, html[data-auth="in"] #v-check #pricing, html[data-auth="in"] #v-check .hp-footer { max-width: calc(var(--ap-measure) + 2 * var(--ap-gutter)); }
#v-account .account-layout[data-tab="overview"] .account-nav { display: none !important; }
#v-account .account-layout[data-tab="overview"] .account-content { max-width: var(--ap-measure); }

/* Three button weights only: primary (filled), secondary (outlined), text link. */
#v-history .hdetail .hact .vw-btn, #v-history .hdetail .hact .recheck, #v-history .hdetail .hact .hwatch { background: var(--ap-tint); color: var(--ap-ink); border: 0; border-radius: var(--ui-pill, 980px); }
#v-history .hdetail .hact .vw-btn:hover { background: #E8E8ED; }
#v-account .btn.ghost { background: var(--ap-tint); color: var(--ap-ink); border: 0; box-shadow: none; }
.vr .vr-do h4 { color: var(--ap-green); }
.vr-do .vr-acts { margin-top: 8px; }
/* Checker tabs wrap on the narrowest phones instead of hiding a tab off-screen. */
@media (max-width: 360px) { body .hp-check .uc-tabs { flex-wrap: nowrap; gap: 12px; } }

/* ── Round 4 ─────────────────────────────────────────────────────────── */
/* One centred column for every signed-in screen; two-column screens share the same width. */
:root { --ap-col: 52rem; }
.ap-view.act, #v-watching.act, #v-watching.act:not(:has(.wd-now)), #v-watching.act:has(.wd-now), #v-history.act, #v-account.act, #v-family.act, #v-circle.act,
html[data-auth="in"] #v-check .hp-check, .ap-home, .ap-after, html[data-auth="in"] #v-check #pricing, html[data-auth="in"] #v-check .hp-footer { max-width: calc(var(--ap-col) + 2 * var(--ap-gutter)); }
#v-watching.act:not(:has(.wd-now)) > *, #v-family.act > *, #v-circle.act > *, #v-recovery.act > *, html[data-auth="in"] #v-check .hp-check > *, .ap-home > *, .ap-after > * { max-width: none; }
html[data-auth="in"] #v-check .hp-check .hero-tool { max-width: none; }
@media (min-width: 1100px) {
  #v-history.act { display: block; }
  #v-history.act > .act-alerts { margin-bottom: 36px; }
}
/* The Watch offer is a flush section of the result. */
#uc-out .vr [data-watch-offer] { margin: 0; padding: 20px 24px; border: 0; border-top: 1px solid var(--ap-rule); border-radius: 0; background: none; }
#uc-out .vr [data-watch-offer] .vw-offer { margin: 0; padding: 0; border: 0; background: none; }
#uc-out .vr .vr-do h4, .hdetail .vr-do h4, .wd-now .vr-do h4 { color: var(--ap-green); }
#uc-out .vr .vr-do .vr-acts { margin: 8px 0 0; }
#uc-out .vr .vr-do .vr-acts li { margin: 0; }
.vr-details > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; color: var(--ap-green); }
.vr-details > summary::-webkit-details-marker { display: none; }
.vr-details > summary::after { content: "›"; transition: transform .15s; }
.vr-details[open] > summary::after { transform: rotate(90deg); }
/* Watching */
.wl-go { min-height: 44px !important; }
.wl-sample { margin-top: 32px; }
.wl-row-sample { pointer-events: none; padding: 16px; border: 1px dashed var(--ap-rule); border-radius: 12px; }
.wl-sample-note { margin: 8px 0 0; color: var(--ap-mute); font-size: 0.9375rem; }
/* Family */
.fam-list li[data-kind="included"]::before { background: var(--ap-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.5 2.5L13 6.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }
.fam-join { margin-top: 28px; }
#circle-card > .vw-btn + .fam-join, #circle-card > a.vw-btn { margin-bottom: 8px; }
.fam-invite { margin-bottom: 8px; }
.fam-more { margin-top: 24px; }
.fam-code { letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
#v-family .fam-people .fam-person { padding: 14px 4px !important; margin: 0; box-sizing: border-box; }
#v-account .account-layout[data-tab="overview"] .account-content { max-width: none; }

/* ── Round 5 ─────────────────────────────────────────────────────────── */
/* The Watch offer bleeds edge to edge like "What to do", with its text on the card's edge. */
#uc-out .vr [data-watch-offer]:not([hidden]) { margin: 0 -24px; padding: 20px 24px; }
@media (max-width: 640px) { #uc-out .vr [data-watch-offer]:not([hidden]) { margin: 0 -18px; padding: 18px; } }
/* One label style for every Viper result, wherever it opens. */
#uc-out .vr .vr-why h4, .hdetail.vr .vr-why h4, .wd-now .vr-why h4 { font-size: 0.9375rem; font-weight: 700; color: #6E6E73; letter-spacing: 0; }
#uc-out .vr .vr-do h4, .hdetail.vr .vr-do h4, .wd-now .vr-do h4 { font-size: 0.9375rem; font-weight: 700; color: var(--ap-green); }
/* One link group and one closing action row. */
#uc-out .vr .vr-do .vr-acts { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
#uc-out .vr .vr-do .vr-acts li { margin: 0; padding: 0; }
.vr-close { padding: 16px 0 20px; margin: 0; }
.hdetail .hact .vw-btn, .hdetail .hact button.vw-btn, #uc-out .hact .vw-btn { font-size: 1rem !important; font-weight: 500 !important; min-height: 44px; padding: 0 20px; }
/* Status dot sits on the first line of a wrapped sentence. */
.wd-status { align-items: flex-start !important; }
.wd-status > span { margin-top: 2px; }
/* Phones keep the "opens" cue on every row. */
@container (max-width: 400px) { .wl-row { position: relative; padding-right: 22px; } .wl-chev { display: block !important; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); } }
/* Family */
#v-family .fam-h, #v-family #circle-card .fam-h, #v-family .account-identity h2 { font-size: 1.25rem; line-height: 1.25; }
.fam-seats-note { margin: 10px 0 16px !important; }
.fam-flash { display: block; padding: 10px 12px; border-radius: 10px; background: var(--ap-tint); color: var(--ap-green-deep, #075C2E) !important; font-weight: 600; }
.swsteps li, .swverify .swsteps { color: var(--ap-body) !important; }
.fam-danger h3 { margin: 0 0 4px; font-size: 1rem; }
/* Deletion notice: actions on their own line, aligned with the text. */
#v-account .account-notice .linkbtn.danger { margin-left: 0; display: inline-flex; min-height: 44px; align-items: center; }
#v-account .account-notice > .btn + .linkbtn { margin-left: 16px; }
/* Plans, when a signed-in person opens them */
html[data-auth="in"] .mkplan[data-current="true"]::before { position: static; display: inline-block; margin: 0 0 10px; }
html[data-auth="in"] .mkplan { box-shadow: 0 0 0 1px var(--ap-rule); }
html[data-auth="in"] [data-plan-card="free"] .mkcta { display: none; }
.bl-save { white-space: nowrap; }
/* Signed in, Check uses the same header as every other app screen. */
html[data-auth="in"] body:has(#v-check.act) .apphead { --nav-active: var(--ap-green); }
html[data-auth="in"] body:has(#v-check.act) .apphead .brandlink b { font-family: var(--sans); font-weight: 700; letter-spacing: normal; }
html[data-auth="in"] body:has(#v-check.act) .apphead .tb { font-family: var(--sans); }
/* The result's verdict keeps the result's size, whatever page it opens on. */
#v-check #uc-out .vr h2.vr-verdict, .vr h2.vr-verdict { font-size: clamp(1.5rem, 2.4vw, 1.875rem); line-height: 1.15; margin: 0; max-width: none; letter-spacing: -0.02em; }
#family-message:empty { display: none; }
#circle-card .fam-danger { margin-bottom: 0; }
#uc-out .vr .vr-no-watch { margin: 0; padding: 16px 0; }

/* ── Round 6 ─────────────────────────────────────────────────────────── */
/* One top rhythm for every signed-in screen. */
html[data-auth="in"] main.views { padding-top: 0; }
html[data-auth="in"] .ap-view.act { padding-top: 40px; }
html[data-auth="in"] #v-check.act { padding-top: 0; }
/* Plans for a signed-in person: the "Your plan" tag sits on the card edge and takes no row. */
html[data-auth="in"] .mkplans { padding-top: 14px; }
html[data-auth="in"] .mkplan[data-current="true"] { position: relative; }
html[data-auth="in"] .mkplan[data-current="true"]::before { position: absolute !important; top: -12px; left: 16px; margin: 0 !important; display: inline-block; }
html[data-auth="in"] [data-plan-card="free"] .mkcta { display: none !important; }
html[data-auth="in"] #v-check #pricing { padding-top: 24px !important; margin-top: 24px !important; }
.bl-toggle { flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 360px) { .bl-toggle .bl-save { display: block; margin: 2px 0 0; } }
/* Addresses never hide the part that gives a lookalike away. */
.ap-row-subj { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; }
#v-history .hsubj { display: block !important; -webkit-line-clamp: unset !important; overflow: visible !important; overflow-wrap: anywhere; }
#v-history .hrow[data-type="message"] .hsubj, .ap-row[data-type="message"] .ap-row-subj { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical; overflow: hidden !important; }
/* What to do: room between the lead and the steps. */
.vr-do .vr-step + .vr-steps { margin-top: 8px; }
/* Phone: the detail's two actions share the row evenly. */
@media (max-width: 480px) { .wd-actions > .vw-btn { flex: 1 1 0; justify-content: center; } }
.wd-now .vr-do .vr-acts, .hdetail .vr-do .vr-acts { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px 24px; } .wd-now .vr-do .vr-acts a, .hdetail .vr-do .vr-acts a, .hdetail .vr-do .vr-acts .linkbtn { color: var(--ap-green); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
#fam-leave:empty, #fam-leave[hidden] { display: none; }

/* ── Round 7 ─────────────────────────────────────────────────────────── */
/* Watch page: one column (the shared column), the story under the answer. */
@media (min-width: 1100px) { #v-watching.act:has(.wd-now) { display: block; } #v-watching.act:has(.wd-now) > .wd-history { margin-top: 32px; } }
/* Detail actions never break a word; delete sits on its own line. */
.wd-actions > .vw-btn { flex: 1 1 auto !important; white-space: nowrap; overflow-wrap: normal; }
.wd-actions .linkbtn.danger { flex-basis: 100%; }
@media (min-width: 481px) { .wd-actions > .vw-btn { flex: 0 0 auto !important; } .wd-actions .linkbtn.danger { flex-basis: auto; } }
/* Plans at 320px: the saving note gets its own line. */
#pricing .bl-toggle { flex-wrap: wrap !important; }
@media (max-width: 400px) { #pricing .bl-toggle .bl-save, body #pricing .bl-save { display: block !important; padding-left: 0 !important; margin: 2px 0 0 !important; white-space: normal; } }
/* A result opens a little below the header, like every screen's first line. */
#uc-out { scroll-margin-top: 40px; }
.tc-empty { margin: 0 0 8px; font-size: 1.0625rem; }
.tc-join { margin-top: 28px; }
.tc-join > summary { cursor: pointer; color: var(--ap-green); font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }

/* ── Round 8 ─────────────────────────────────────────────────────────── */
/* One look for every signed-in tab: the public site's ground and header. */
html[data-auth="in"] body, html[data-auth="in"] .skin { background: #FFFFFF; }
html[data-auth="in"] .apphead { background: #FFFFFF !important; color: #1D1D1F !important; border-bottom: 1px solid #E5E5EA !important; --nav-active: var(--ap-green); --ui-focus: #0B7A3E; }
html[data-auth="in"] .apphead .brandlink, html[data-auth="in"] .apphead .brandlink b, html[data-auth="in"] .apphead .brandlink b span { color: #1D1D1F !important; font-family: var(--sans); font-weight: 700 !important; letter-spacing: normal; }
html[data-auth="in"] .apphead .brandlink .mark { padding: 0 !important; background: none !important; border-radius: 0 !important; }
html[data-auth="in"] .apphead .tb { color: #424245; font-family: var(--sans); }
html[data-auth="in"] .apphead .tb.on { color: #1D1D1F; }
html[data-auth="in"] .apphead :is(.acctbtn, .langbtn) { color: #1D1D1F; }
/* Checker tabs: even spacing, labels centred in their 44px targets. */
body .hp-check .uc-tab { text-align: center; justify-content: center; }
/* Plans: the saving note under "Annual", never squeezed. */
#pricing .bl-toggle > button[data-billing-cadence="annual"] { flex: 1 1 auto; }
@media (max-width: 400px) { #pricing .bl-toggle > button[data-billing-cadence="annual"] { flex-direction: column; align-items: flex-start; justify-content: center; } }
/* Plans on tablet: real space between stacked plans, aligned with the section. */
@media (max-width: 960px) { #pricing .mkplans { row-gap: 40px !important; margin-inline: 0 !important; padding-inline: 0 !important; } #pricing .mkplan { margin-inline: 0 !important; } }
/* Signed in, the plans heading uses the app's section scale. */
html[data-auth="in"] #pricing h2 { font-size: 1.5rem !important; line-height: 1.25; margin-bottom: 8px !important; }
.wd-limit { margin: 16px 0 0; color: var(--ap-mute); font-size: 0.9375rem; }
/* Activity: seen alerts open from the row; the cue sits where Watching puts it; text lines up under the title. */
#v-history .nrow:not(.unread):has(.nrow-a) .nrow-t::after { content: none !important; }
#v-history .nrow:not(.unread):has(.nrow-a) { padding-right: 26px; }
#v-history .nrow:not(.unread):has(.nrow-a)::after { content: "›"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--ap-mute); font-size: 1.25rem; }
#v-history .nrow > p:not(.nrow-t), #v-history .nrow > .nrow-go { margin-left: 28px !important; }
#sw-in, #sw-in::placeholder { text-transform: none !important; letter-spacing: normal !important; } .swrow #sw-cancel { flex: 0 0 auto; }
.tc-empty { text-align: left !important; }
.tc-steps-h { margin: 20px 0 6px; font-size: 1rem; font-weight: 700; }
.tc-steps { margin: 0 0 8px; padding-left: 1.3em; display: grid; gap: 6px; color: var(--ap-body); line-height: 1.5; }
#v-circle .card, #trusted-circles-card { text-align: left; }

/* ── Round 9 ─────────────────────────────────────────────────────────── */
/* Roster: invited and expired read differently from people who joined. */
.fam-person[data-state="invited"] .avatar, .fam-person[data-state="invited"] [class*="avatar"] { background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--ap-rule); outline: 1.5px dashed #C7C7CC; outline-offset: -1.5px; }
.fam-person[data-state="expired"] .avatar, .fam-person[data-state="expired"] [class*="avatar"] { background: transparent !important; color: var(--ap-mute) !important; outline: 1.5px dashed #C7C7CC; outline-offset: -1.5px; }
.fam-person[data-state="expired"] .fam-prole { color: var(--ap-amber); font-weight: 600; }
#v-family .fam-people > li:not(:last-child) .fam-person { border-bottom: 1px solid var(--ap-rule) !important; }
.tc-empty { padding: 0 !important; }
/* One alert look everywhere: the white card with the red edge Watching uses. */
.ap-home .ap-note[data-kind="alert"], #v-history .nrow.unread { background: var(--ap-paper) !important; box-shadow: 0 0 0 1px #F7C6C2 !important; border: 0 !important; }
/* Home: a failed block keeps the normal gap under its heading. */
.ap-block .ap-block-head + .ap-note { margin-top: 12px; }
/* Checker tabs wrap on narrow phones (no hidden tab off the edge). */
/* (narrow phones scroll the check-type tabs with a fade; see home.css) */
/* Plans switch sits on the column edge. */
#pricing .bl-toggle { margin-inline: 0 !important; }

/* ── Round 10 ── */
/* App chrome: the public footer lives on public pages only (Account › Privacy & safety has the links). */
html[data-auth="in"] #v-check .hp-footer { display: none !important; }
/* Plans: the "Your plan" tag sits inside its card, and every card reserves the same room for it. */
html[data-auth="in"] #pricing .mkplan { padding-top: 34px !important; position: relative; }
html[data-auth="in"] .mkplan[data-current="true"]::before { top: 4px !important; left: 0 !important; }
#pricing .bl-toggle > button:first-child { margin-left: 0 !important; }
/* Shared result action row: phones stack full-width buttons, like the watch page. */
@media (max-width: 480px) { .hdetail .hact, #uc-out .hact { flex-direction: column; align-items: stretch; } .hdetail .hact > *, #uc-out .hact > * { width: 100%; justify-content: center; } }
/* Watching: Review sits under the text, the same as on Check and in Activity. */
.wl-group[data-group="attention"] .wl-row { grid-template-columns: auto minmax(0, 1fr); }
.wl-group[data-group="attention"] .wl-go { grid-column: 2; justify-self: start; margin-top: 10px; }
/* Tablet: nav tabs start at the content edge with normal gaps. */
@media (min-width: 600px) and (max-width: 820px) { .apphead .topnav { justify-content: flex-start !important; gap: 8px !important; } .apphead .topnav .tb { flex: 0 0 auto !important; width: auto !important; padding-inline: 10px !important; } }
.vr-watching { margin: 16px 0 0; color: var(--ap-body); }
.fam-summary { margin: -6px 0 14px; font-weight: 600; } .fam-sum-attn { color: var(--ap-amber); }

/* ── Round 11 ── */
/* A heading that receives focus after navigation gets a quiet marker, not a box. */
.focus-target:focus-visible { outline: none !important; box-shadow: -12px 0 0 -8px var(--ap-green); border-radius: 0; }
/* Activity: the Watch line is its own section of the result, like the live result's. */
.hdetail .vr-watching { margin: 0 -24px; padding: 16px 24px; border-top: 1px solid var(--ap-rule); }
@media (max-width: 640px) { .hdetail .vr-watching { margin: 0 -18px; padding: 16px 18px; } }
/* Check: the alert's when/before→now line, and the summary row that needs attention. */
.ap-note-meta { margin: 6px 0 0; color: var(--ap-mute); font-size: 0.9375rem; }
.ap-row-meta[data-verdict="SCAM"] { color: var(--ap-red); font-weight: 600; }
.ap-row-meta[data-verdict="CAUTION"] { color: var(--ap-amber); font-weight: 600; }
/* Family: invitees look the same on their page as in the list; disabled links look disabled. */
.account-identity[data-state="invited"] .account-avatar, .account-identity[data-state="expired"] .account-avatar { background: transparent !important; color: var(--ap-mute) !important; outline: 1.5px dashed #C7C7CC; outline-offset: -1.5px; }
.fam-actions { gap: 10px 20px; }
.linkbtn:disabled, .linkbtn[disabled] { background: none !important; color: var(--ap-mute) !important; opacity: 0.6; cursor: default; }
#v-family .fam-self { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.fam-welcome .linkbtn { display: inline-flex; margin-left: 4px; }
/* Account: past plans open like every disclosure. */
.account-past > summary { cursor: pointer; color: var(--ap-green); font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; list-style: none; }
.account-past > summary::-webkit-details-marker { display: none; }
.account-past > summary::after { content: "›"; transition: transform .15s; }
.account-past[open] > summary::after { transform: rotate(90deg); }
.account-ended { font-weight: 600; }
#v-recovery .ap-actions { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 12px; }
/* Activity: the Watch step is the same section as on a live result. */
.hdetail .vr-watchsec { margin: 0 -24px; padding: 18px 24px; border-top: 1px solid var(--ap-rule); border-radius: 0; background: none; }
.hdetail .vr-watchsec .vw-head { margin: 0 0 4px; } .hdetail .vr-watchsec .vw-body { margin: 0 0 12px; color: var(--ap-body); }
.hdetail .vr-known { margin: 0 -24px; padding: 16px 24px; border-top: 1px solid var(--ap-rule); }
@media (max-width: 640px) { .hdetail .vr-watchsec, .hdetail .vr-known { margin: 0 -18px; padding-inline: 18px; } }
/* The alert's next step: the same tinted strip on Check, Watching and Activity. */
.ap-note-next, .wl-next { display: block; margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--ap-tint); color: var(--ap-ink); font-weight: 600; line-height: 1.45; font-size: 1rem; }
.wl-row-sample .wl-next { display: none; }

/* ── Round 12 ── */
/* Result section labels are h3 now; same look as before. */
.vr h3.vr-h { font-size: 0.9375rem; font-weight: 700; color: #6E6E73; letter-spacing: 0; margin: 0 0 6px; line-height: 1.3; }
.vr .vr-do h3.vr-h { color: var(--ap-green); }
/* Account lists: rows share the heading's left edge. */
#v-account .account-row, #v-account .account-row-link { padding-left: 0 !important; padding-right: 0 !important; }
#v-account .account-content > p > .btn, #v-account .account-section > .btn { width: auto !important; display: inline-flex; }
#v-account hr { display: none; }
/* Home: the Watching block follows the checker at the section rhythm. */
html[data-auth="in"] #v-check .hp-check { padding-bottom: 8px !important; }
html[data-auth="in"] .ap-after { margin-top: 24px !important; }
/* Household settings: the toggle shows open/closed; buttons sit inline like the rest of the page. */
.fam-more summary > span:first-child::after { display: inline-block; transition: transform .15s; }
.fam-more[open] summary > span:first-child::after { transform: rotate(90deg); }
#family-contact .vw-btn { justify-self: start; width: auto; }
.fam-more .account-section h3 { margin: 0 0 6px; font-size: 1rem; }

/* ── Round 13: the one alert ── */
.vw-alert { position: relative; display: grid; gap: 6px; justify-items: start; padding: 16px 18px; margin: 8px 0; border-radius: 16px; background: var(--ap-paper); box-shadow: 0 0 0 1px #F7C6C2; }
.vw-alert > * { margin: 0; max-width: 100%; }
.vw-alert-t { display: flex; align-items: flex-start; gap: 10px; font-weight: 700; font-size: 1.0625rem; line-height: 1.3; overflow-wrap: anywhere; }
.vw-alert-t .vr-shape { margin-top: 2px; }
.vw-alert-t .nrow-new { margin-left: auto; flex: none; }
.vw-alert-why { color: var(--ap-ink); line-height: 1.45; overflow-wrap: anywhere; }
.vw-alert-meta { color: var(--ap-mute); font-size: 0.9375rem; }
.vw-alert-next { justify-self: stretch; padding: 10px 12px; border-radius: 10px; background: var(--ap-tint); color: var(--ap-ink); font-weight: 600; line-height: 1.45; }
.vw-alert-go { margin-top: 4px !important; }
.vw-alert[data-example="true"] { box-shadow: 0 0 0 1px #F7C6C2; }
.vw-alert-tag { position: absolute; top: 12px; right: 14px; padding: 2px 10px; border-radius: 999px; background: #F5F5F7; color: #424245; font-size: 0.8125rem; font-weight: 700; }
.vw-alert[data-example="true"] .vw-alert-t { padding-right: 84px; }
/* Activity's wrapper and the home wrapper add nothing of their own. */
#v-history .nrow.nrow-card { padding: 0 !important; margin: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important; display: block; }
#v-history .nrow.nrow-card > p { margin-left: 0 !important; }
.ap-home .vw-alert { margin-top: 16px; }
/* Result labels keep the result's style on Check too (the homepage heading rule is broader). */
#v-check .vr h3.vr-h, #uc-out .vr h3.vr-h { color: #6E6E73 !important; }
#v-check .vr .vr-do h3.vr-h, #uc-out .vr .vr-do h3.vr-h { color: var(--ap-green) !important; }
.fam-more summary > span:first-child::after { margin-left: 6px; }

/* ── Round 14 ── */
/* Activity's new alert spans the column like every other row. */
#v-history .nrow.nrow-card, #v-history .nrow.nrow-card > .vw-alert { width: 100%; justify-self: stretch; box-sizing: border-box; }
/* Known scam: the Watch step keeps the shared section heading. */
#uc-out .vr .vr-known-sec { margin: 0 -24px; padding: 18px 24px; border: 0; border-top: 1px solid var(--ap-rule); border-radius: 0; background: none; }
@media (max-width: 640px) { #uc-out .vr .vr-known-sec { margin: 0 -18px; padding: 18px; } }
.vr-known-sec .vw-head { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.vr-known-sec .vw-head::before { content: ""; width: 18px; height: 18px; flex: none; background: center / 18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E6B1B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.vr-known-sec .vr-no-watch, .vr-known-sec .vr-known { margin: 0 !important; padding: 0 !important; border: 0 !important; }
/* Signed-in tablet: the tab row starts at the content column's edge. */
@media (min-width: 600px) and (max-width: 820px) { html[data-auth="in"] .apphead .topnav { width: 100%; max-width: calc(52rem + 2 * var(--ap-gutter)); margin-inline: auto !important; padding-inline: var(--ap-gutter) !important; box-sizing: border-box; justify-content: flex-start !important; gap: 20px !important; } }
/* Deletion notice: actions wrap with a gap, never an indent. */
#v-account .account-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
#v-account .account-notice > p { flex-basis: 100%; margin: 0 0 4px; }
#v-account .account-notice > .linkbtn, #v-account .account-notice > .btn + .linkbtn { margin-left: 0 !important; }
/* Privacy & safety: one rule between groups, not two. */
#v-account .account-list + .account-section { border-top: 0 !important; padding-top: 8px; }
/* Home rhythm: room under the alert; Watching follows the checker at the section gap. */
.ap-home .vw-alert { margin-bottom: 28px; }
.ap-row { min-height: 44px; }
/* Family */
.fam-private { max-width: none !important; }
.sw-tab { margin-top: 20px; } .sw-tab > summary { cursor: pointer; color: var(--ap-green); font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }

/* ── Round 15 ── */
/* Activity: check rows show they open, like alert rows; their marks line up with the alerts'. */
#v-history .hrow { position: relative; padding-right: 26px; }
#v-history .hrow::after { content: "›"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--ap-mute); font-size: 1.25rem; }
#v-history .hrow[aria-expanded="true"]::after { transform: translateY(-50%) rotate(90deg); }
#v-history .hrow:hover .hsubj { text-decoration: underline; text-underline-offset: 3px; }
#v-history .hrow > .vr-shape { margin-left: 0; }
/* Devices: "This browser" is a small tag, never a wrapped label. */
.d-this { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--ap-tint); color: var(--ap-green-deep, #075C2E); font-size: 0.8125rem; font-weight: 700; white-space: nowrap; vertical-align: 1px; }
/* Recovery on phones: no double padding around the start card. */
@media (max-width: 480px) { #v-recovery .card { padding: 16px !important; margin-inline: 0 !important; } #v-recovery #recovery-empty { padding-top: 16px !important; } }
.vr-watch-line { margin: 0; }

/* ── Round 16 ── */
.hdetail .vr-watchsec { border: 0 !important; border-top: 1px solid var(--ap-rule) !important; border-radius: 0 !important; }
.hdetail .vr-watchsec .vr-watch-line { margin: 0; padding: 0; border: 0; }
.hdetail > .hact { padding-top: 16px; }
/* Recovery start: options are full rows in the app's own style. */
#v-recovery .rec-opt { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 0; color: var(--ap-ink); font-size: 1rem; line-height: 1.35; border-bottom: 1px solid var(--ap-rule); cursor: pointer; }
#v-recovery .rec-opt input { width: 20px; height: 20px; accent-color: var(--ap-green); flex: none; }
#v-recovery #exposure-choices { margin: 12px 0 20px; }
#v-recovery #start-recovery-btn:disabled { opacity: 0.6; }
.fam-pv-short { margin-bottom: 24px !important; }
.sw-warn-done:focus:not(:focus-visible) { outline: none; }

/* ── Round 17 ── */
/* Home: the alert carries the same label it has on Watching. */
.ap-attn { margin: 0 0 8px; }
.ap-attn-h { margin: 0 0 10px; font-size: 1.0625rem; font-weight: 700; }
/* The alert headline is a heading now; it keeps the card's type. */
h3.vw-alert-t { margin: 0; }
/* Home summary rows: one line each; the full address is in the row's title and its page. */
#app-after .ap-row .ap-row-subj, #app-after .ap-row[data-type="message"] .ap-row-subj { display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; overflow-wrap: normal; -webkit-line-clamp: unset !important; min-width: 0; }
/* Watch detail: the Watch step sits inside the answer, after What to do, like the live result. */
.wd-now .wd-watch { margin: 0 -24px; padding: 18px 24px 22px; border: 0; border-top: 1px solid var(--ap-rule); border-radius: 0; background: none; }
.wd-now .wd-watch .vr-h { margin: 0 0 6px; }
.wd-now .wd-watch .wd-status { margin: 0; }
.wd-now .wd-watch .wd-actions { margin-top: 16px; }
.wd-now .wd-watch .vw-note:empty { display: none; }
@media (max-width: 640px) { .wd-now .wd-watch { margin: 0 -18px; padding-inline: 18px; } }
.wd-del { margin: 12px 0 0; }
.wd-del .linkbtn.danger { min-height: 44px; color: var(--ap-red); }
/* Family: the roster reads as one object, and the privacy model as a reference panel. */
#v-family .fam-people { padding: 4px 16px; border-radius: 16px; background: var(--ap-paper); box-shadow: 0 0 0 1px var(--ap-rule); }
#v-family .fam-people > li:last-child .fam-person { border-bottom: 0; }
#v-family .fam-privacy { margin-top: 32px; padding: 22px 24px; border: 0 !important; border-radius: 16px; background: #F5F5F7; }
#v-family .fam-privacy .fam-h { margin-top: 0; }
@media (min-width: 900px) {
  #v-family .fam-privacy { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; align-items: start; }
  #v-family .fam-privacy > .fam-h { grid-column: 1 / -1; }
  #v-family .fam-privacy > #fam-pv-sub1 { grid-column: 1; grid-row: 2; }
  #v-family .fam-privacy > ul:nth-of-type(1) { grid-column: 1; grid-row: 3; }
  #v-family .fam-privacy > #fam-pv-sub2 { grid-column: 2; grid-row: 2; }
  #v-family .fam-privacy > ul:nth-of-type(2) { grid-column: 2; grid-row: 3; }
}
/* "Warning sent": a tinted confirmation, not a focus box. */
#sw-warn-status[data-sent="true"] { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--ap-tint); color: var(--ap-ink, #0B0B0C); font-weight: 600; }
#sw-warn-status[data-sent="true"]::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--ap-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
#sw-warn-status[data-sent="true"]:focus { outline: none; }
#sw-warn-status[data-sent="true"]:focus-visible { outline: 2px solid var(--ap-green); outline-offset: 2px; }
/* The organizer's row lines up with the others. */
#v-family .fam-people .fam-person { gap: 14px !important; border-left: 0 !important; border-right: 0 !important; }
/* Home: the alert label is a section label, not a second title. */
#app-home .ap-attn-h { margin: 0 0 10px; font-size: 1.0625rem !important; line-height: 1.3; font-weight: 700; letter-spacing: 0; }
/* Signed in, the home sections follow the checker without an empty band. */
html[data-auth="in"] #v-check .mkhome { margin-top: 16px !important; }
html[data-auth="in"] #v-check #app-after { margin-top: 0 !important; }

/* ── Round 18 ── */
/* One Watch heading everywhere: "Viper Watch" with the eye, as a real heading. */
:is(.vw-offer, .vr-watchsec, .wd-watch) h3.vw-head { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; font-size: 1rem; line-height: 1.3; font-weight: 700; color: var(--ap-ink, inherit); letter-spacing: 0; text-transform: none; }
:is(.vr-watchsec, .wd-watch) h3.vw-head::before { content: ""; width: 18px; height: 18px; flex: none; background: center / 18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E6B1B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
/* Family: seat counts wrap between phrases, never inside one. */
.fam-count-part { white-space: nowrap; }
/* Long addresses in lists break at hyphens and dots first, mid-word only as a last resort. */
.wl-subj, #v-history .hsubj, .vw-alert-t, .wd-subj { overflow-wrap: anywhere !important; word-break: normal !important; }
/* …and never widen their row: the text column may shrink below its longest piece. */
.wl-row > *, .wl-main, #v-history .hrow > *, .vw-alert > * { min-width: 0; }
.wl-subj, #v-history .hsubj { display: block; max-width: 100%; }
/* Verdict labels never split across lines. */
.nowrap { white-space: nowrap; }
/* A read alert row opens as a whole, not only through its title. */
#v-history .nrow:not(.nrow-card) { position: relative; }
#v-history .nrow:not(.nrow-card) .nrow-a::after { content: ""; position: absolute; inset: 0; }
#v-history .nrow:not(.nrow-card) .nrow-a:focus-visible { outline: none; }
#v-history .nrow:not(.nrow-card):has(.nrow-a:focus-visible) { outline: 3px solid var(--ap-green); outline-offset: 2px; border-radius: 8px; }
/* Recovery start: one heading, one instruction, and a calm privacy note (not an error). */
#recovery-content .rec-select { margin: 6px 0 4px; color: var(--ap-body); }
#recovery-content .rec-secrets { margin: 0 0 14px; color: var(--ap-mute); font-weight: 400; }
/* A result opens just below the header: the scrolling header on phones, the sticky one above. */
#uc-out { scroll-margin-top: 20px !important; }
@media (min-width: 821px) { #uc-out { scroll-margin-top: 108px !important; } }

/* ── Round 20 ── */
/* Signed-in tablet (600–1023): logo, tabs and avatar share the content column's edges. */
@media (min-width: 600px) and (max-width: 1023px) {
  html[data-auth="in"] .apphead { padding-inline: max(calc(var(--ap-gutter) + 32px), calc((100vw - 52rem) / 2)) !important; }
}
@media (min-width: 600px) and (max-width: 820px) {
  html[data-auth="in"] .apphead .topnav { max-width: none !important; margin-inline: 0 !important; padding-inline: 0 !important; }
  html[data-auth="in"] .apphead .topnav .tb[data-v]:first-of-type { margin-left: -10px; }
}
/* The Watch offer reads as body text, not as a disabled hint. */
.vw-offer .vw-line, .vw-offer .vw-body { color: var(--ap-body) !important; }
/* Home section heads: the "All …" link stays on the heading row when it fits, and wraps as a whole otherwise. */
.ap-block-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.ap-block-head .linkbtn { white-space: nowrap; }
/* Family: calm status text, room above "Leave this household", buttons sized to their label. */
#v-family .fam-state { font-weight: 500; }
#v-family .fam-privacy + #fam-leave, #v-family .fam-privacy ~ #fam-leave { margin-top: 32px; }
#v-family .fam-more form > .vw-btn { width: auto; align-self: flex-start; justify-self: start; }

/* ── Round 22 ── */
/* Headings focused after navigation keep the quiet left marker (the site-wide focus ring is for controls). */
body .focus-target.focus-target:focus-visible { outline: none !important; box-shadow: none !important; position: relative; }
body .focus-target.focus-target:focus-visible::before { content: ""; position: absolute; left: -14px; top: 0.15em; bottom: 0.15em; width: 4px; border-radius: 2px; background: var(--ap-green, #0B7A3E); }
/* Family: the organizer's household is labelled as one. */
#v-family .fam-kicker { margin: 0 0 2px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ap-mute); }
/* Signed-in phones: logo, tabs and avatar start and end where the content does. */
@media (max-width: 360px) { html[data-auth="in"] .apphead { padding-inline: 24px !important; } html[data-auth="in"] .apphead .topnav { padding-inline: 8px !important; } }
@media (min-width: 361px) and (max-width: 599px) { html[data-auth="in"] .apphead { padding-inline: calc(var(--ap-gutter) + 20px) !important; } }
@media (max-width: 599px) { html[data-auth="in"] .apphead .topnav .tb[data-v]:first-of-type { margin-left: -4px; } html[data-auth="in"] .apphead .topnav .tb[data-v]:last-of-type { margin-right: -4px; } }
/* Activity entry: the closing actions follow Details with the card's normal step and a rule, like every section. */
#v-history .hdetail .hact { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--ap-rule); }
#v-history .hdetail .vr-details { margin-bottom: 0; }
/* "What to do" links on phones: one per line, one even gap. */
@media (max-width: 480px) { .vr-do .vr-acts, #uc-out .vr .vr-do .vr-acts { flex-direction: column; gap: 10px !important; align-items: flex-start; } }
/* Family: "· Household" reads as part of the heading, quietly. */
#v-family .fam-h .fam-h-kind { font-weight: 500; color: var(--ap-mute); }
/* Account list: the profile row uses the same edges and chevron column as the rows under it. */
#v-account .account-identity-link { padding-left: 0 !important; padding-right: 0 !important; }
/* Organizer's privacy reference: folded until opened. */
#v-family #fam-privacy[data-fold="true"]:not(.open) > :not(.fam-h):not(.fam-pv-toggle) { display: none !important; }
#v-family:not([data-detail="true"]) #fam-privacy[data-fold="true"]:not(.open) { display: block !important; }

#v-family .fam-pv-toggle { margin: 4px 0 0; min-height: 44px; grid-column: 1 / -1; }

/* ── Round 28 ── */
/* Done checklist steps: check mark and a muted colour, no strikethrough. */
.fam-steps li[data-done="true"] span:not(.fam-step-mark):not(.visually-hidden) { text-decoration: none !important; }
/* The organizer's folded privacy reference reads as one quiet row, like "Household settings". */
#v-family #fam-privacy[data-fold="true"]:not(.open) { background: none !important; padding: 16px 0 !important; border-top: 1px solid var(--ap-rule) !important; border-radius: 0 !important; display: flex !important; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
#v-family #fam-privacy[data-fold="true"]:not(.open) .fam-h { margin: 0; font-size: 1.0625rem; }
#v-family #fam-privacy[data-fold="true"]:not(.open) .fam-pv-toggle { margin: 0; }
/* No-household: the privacy summary follows the actions. */
#v-family .fam-pv-short-h { margin: 28px 0 8px; }
.nw { white-space: nowrap; }
/* Privacy lists: "visible to the organizer" reads as an eye, beside the lock for "private" (not a radio button). */
.fam-list li[data-kind="visible"]::before { box-shadow: none !important; background: #6E6E73 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M2.5 9s2.4-4.2 6.5-4.2S15.5 9 15.5 9s-2.4 4.2-6.5 4.2S2.5 9 2.5 9z' fill='none' stroke='white' stroke-width='1.5'/%3E%3Ccircle cx='9' cy='9' r='1.8' fill='white'/%3E%3C/svg%3E") center/14px no-repeat !important; }
#v-family .fam-pv-line { margin: 4px 0 12px; color: var(--ap-body); font-size: 0.9375rem; }
/* Sign-in: Terms and Privacy under the options. */
.account-legal { margin-top: 16px; color: var(--ap-mute); } .account-legal a { color: inherit; }

/* ── Butter pass: signed-in product ─────────────────────────────────────── */
/* Nothing breathes forever: the Watch dot is still. */
.wd-status[data-on="true"] .wd-dot { animation: none !important; }
/* Watch history reads top to bottom; the newest change settles in beneath the old states (no flashing). */
.wd-story li[data-verdict="SCAM"] b { color: var(--ap-ink); }
.wd-story .wd-latest b { font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .wd-story .wd-latest { animation: mo-rise 360ms var(--ease-out) 480ms both; }
  .wd-story .wd-latest::before { animation: none; }
}
/* Attention comes first on Home; it is the one lifted surface. */
#app-home .vw-alert, .wl-group[data-group="attention"] .vw-alert { border-radius: var(--radius-surface); }
#app-home .vw-alert { box-shadow: 0 0 0 1px #F7C6C2, var(--depth-2); }
/* Member rows: hover and press read as one surface that opens. */
.fam-person { transition: background-color var(--dur-micro) var(--ease-out); }
.fam-person:hover { background: rgb(0 0 0 / .03); }
.fam-person:focus-visible { outline: 3px solid var(--ap-green); outline-offset: 2px; }
.fam-guide, .fam-people-card { border-radius: var(--radius-surface); }
@media (max-width: 300px) { .fam-person, .fam-self { grid-template-columns: auto minmax(0, 1fr) auto !important; gap: 10px !important; } .fam-pmain, .fam-pmain * { min-width: 0; overflow-wrap: anywhere; } .fam-person .account-avatar, .fam-self .account-avatar { width: 36px; height: 36px; font-size: 0.875rem; } }
/* Family: until the household arrives, its card holds its room and the sections below wait, so nothing is pushed. */
#circle-card > .account-loading { min-height: 440px; margin: 0; color: transparent; border-radius: var(--radius-surface);
  background: linear-gradient(#F5F5F7 0 0) 0 0 / 46% 22px no-repeat, linear-gradient(#F5F5F7 0 0) 0 52px / 80% 14px no-repeat, linear-gradient(#F5F5F7 0 0) 0 100px / 100% 300px no-repeat; }
#v-family:has(#circle-card > .account-loading) .fam-sec:not(:has(#circle-card)) { visibility: hidden; }
/* Tablet: the app column sits in the middle. */
@media (min-width: 601px) and (max-width: 1023px) { html[data-auth="in"] main.views > .view.act:not(#v-check) { margin-inline: auto; } }
/* Wide screens (≥1200): a wider reading column, and Watch detail in two columns
   (verdict and actions left, what happened right). Mobile order is unchanged. */
@media (min-width: 1200px) {
  :root { --ap-measure: 48rem; }
  #v-watching.act:has(.wd-now) { display: grid !important; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: 56px; align-items: start; max-width: calc(76rem + 2 * var(--ap-gutter)) !important; }
  #v-watching.act:has(.wd-now) > * { max-width: none; }
  #v-watching.act:has(.wd-now) > :is(.ap-back, .wd-head) { grid-column: 1 / -1; }
  #v-watching.act:has(.wd-now) > .wd-now { grid-column: 1; grid-row: 3 / span 3; }
  #v-watching.act:has(.wd-now) > .wd-history { grid-column: 2; grid-row: 3; margin-top: 0 !important; }
  #v-watching.act:has(.wd-now) > .wd-limit { grid-column: 2; grid-row: 4; }
  #v-watching.act:has(.wd-now) > .wd-del { grid-column: 2; grid-row: 5; align-self: start; }
}
/* Wide screens (≥1200): every signed-in page is one centred column (Watch detail keeps its two columns). */
@media (min-width: 1200px) {
  .ap-view.act:not(:has(.wd-now)), #v-history.act, #v-account.act, #v-family.act, #v-circle.act, #v-recovery.act, #v-watching.act:not(:has(.wd-now)),
  html[data-auth="in"] #v-check .hp-check, .ap-home, .ap-after { max-width: calc(var(--ap-measure) + 2 * var(--ap-gutter)) !important; margin-inline: auto !important; }
  :is(.ap-view.act:not(:has(.wd-now)), #v-history.act, #v-account.act, #v-family.act, #v-circle.act, #v-recovery.act) > *,
  html[data-auth="in"] #v-check .hp-check > *, .ap-home > *, .ap-after > * { max-width: none !important; margin-inline: 0; }
}
/* Narrow phones: a member's name and status each keep to one line (the full name is in the title). */
@media (max-width: 400px) {
  .fam-pmain strong, .fam-pmain .fam-prole { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fam-pmain .fam-pmeta { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
/* Watch detail (≥1200): the right column stacks from the top; spare height goes below, not between. */
@media (min-width: 1200px) {
  #v-watching.act:has(.wd-now) { grid-template-rows: auto auto auto auto auto 1fr; }
  #v-watching.act:has(.wd-now) > .wd-now { grid-row: 3 / span 4; }
  #v-watching.act:has(.wd-now) > :is(.wd-history, .wd-limit, .wd-del) { align-self: start; margin-top: 0; }
  #v-watching.act:has(.wd-now) > .wd-limit { margin-top: 20px !important; }
}
/* Watching while it loads: placeholder rows at the real row height, so the list settles in place. */
.wl-skel { margin-top: 28px; }
.wl-skel-h { width: 160px; height: 18px; border-radius: 6px; background: #E5E5EA; margin-bottom: 14px; }
.wl-skel-r { height: 76px; border-bottom: 1px solid var(--ap-rule); display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 14px; align-items: center; }
.wl-skel-r::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: #E5E5EA; }
.wl-skel-r::after { content: ""; height: 14px; width: 62%; border-radius: 6px; background: #E5E5EA; }