/* Appworthy - the site stylesheet (storefront v7, owner-approved 2026-10-15).
   Ported from storefront-redesign/v7/_source/style.css; class names are v7's, so
   ui.js and the mockup read the same. Mobile first; breakpoints at 700px and
   1000px; v7's refinements are grouped near the end. LIGHT ONLY (spec D9): there
   is no dark theme and a stored preference is ignored.
   Not ported: the rules for v7's "Identity & sharing" page (logo stage, badge
   canvas, share card, future mark), which is not built (spec section 9).
   Added for states v7 lacks are at the very end: .pill.neutral, .hr-chip,
   .cat-<id> for all ten categories, .band-panel / .band-row, .rq, the icon
   tile, and the disclosure strip. */
:root{
  color-scheme:light;
  --bg:#ffffff;--soft:#f6f7f9;--soft-2:#eff1f4;--ink:#0b1524;--navy:#0a2540;--muted:#526073;--faint:#687588;
  --line:rgba(15,23,42,.09);--line-strong:rgba(15,23,42,.14);--blue:#0a66d8;--blue-bg:#ebf3fe;
  --grad:linear-gradient(115deg,#0a66d8 0%,#4f46e5 55%,#0891b2 100%);
  --shadow-sm:0 1px 2px rgba(15,23,42,.05);--shadow:0 1px 2px rgba(15,23,42,.04),0 6px 20px -6px rgba(15,23,42,.10);--shadow-lg:0 2px 4px rgba(15,23,42,.04),0 18px 40px -12px rgba(15,23,42,.18);
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;--ring:0 0 0 3px rgba(10,102,216,.28);
  --red:#b3261e;--red-bg:#fdeeec;--red-line:#f4c9c4;--green:#146c43;--green-bg:#e6f4ec;--green-line:#bfe0cc;
  --gray-bg:#eef1f5;--radius:16px;--gutter:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,sans-serif;font-feature-settings:"ss01","cv11";-webkit-font-smoothing:antialiased;padding-bottom:calc(64px + env(safe-area-inset-bottom))}
h1,h2,h3,h4,p,ul,dl,dd,blockquote,figure{margin:0}
ul{padding:0;list-style:none}
h1,h2,h3,h4{color:var(--ink);line-height:1.2;letter-spacing:-.01em}
h1{font-size:28px;font-weight:750;letter-spacing:-.025em}
h2{font-size:20px;font-weight:700}
h3{font-size:16px;font-weight:650}
h4{font-size:15px;font-weight:650}
p{color:var(--muted)}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
img{max-width:100%;display:block}
code{font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--soft-2);padding:1px 5px;border-radius:5px;word-break:break-all}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}
.ico{width:18px;height:18px;flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(1180px,100% - 2*var(--gutter));margin-inline:auto}

/* ---------- chrome ---------- */
.sample-banner{display:block;text-align:center;font-size:11px;line-height:1.45;color:var(--muted);background:var(--soft);padding:5px 12px}
.sample-banner b,.sample-banner strong{color:var(--navy);font-weight:650}
.header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;gap:24px;height:56px}
.brand{display:inline-flex;align-items:center;gap:8px;font-size:19px;font-weight:760;letter-spacing:-.03em;color:var(--navy);white-space:nowrap}
.brand img{width:28px;height:28px}
.nav{display:none;gap:4px;flex:1}
.nav a{font-size:14px;color:var(--muted);padding:8px 10px;border-radius:8px;white-space:nowrap}
.nav a:hover{color:var(--ink);background:var(--soft)}
.nav a.active{color:var(--ink);font-weight:650}
.header-tools{display:flex;align-items:center;gap:6px;margin-left:auto}
.header-search{display:none;align-items:center;gap:6px;background:var(--soft-2);border-radius:10px;padding:0 10px;height:36px;width:200px;color:var(--faint)}
.header-search input{border:0;background:none;outline:0;width:100%;font-size:14px;color:var(--ink)}
.icon-button{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;color:var(--navy)}
.icon-button:hover{background:var(--soft)}
.footer{background:var(--soft);margin-top:56px;padding:32px 0 40px;border-top:1px solid var(--line)}
.footer-inner{width:min(1180px,100% - 2*var(--gutter));margin:auto;display:grid;gap:14px}
.footer nav{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:14px;color:var(--muted)}
.footer nav a:hover{color:var(--ink)}
.footer p{font-size:13px}
.mobile-nav{position:fixed;inset:auto 0 0;z-index:30;display:grid;grid-template-columns:repeat(5,1fr);background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:6px 2px calc(6px + env(safe-area-inset-bottom))}
.mobile-nav a{display:grid;justify-items:center;gap:2px;font-size:10px;line-height:1.2;color:var(--faint);padding:4px 0;text-align:center}
.mobile-nav a .ico{width:22px;height:22px}
.mobile-nav a.active{color:var(--blue);font-weight:600}
dialog{border:0;border-radius:18px;padding:28px 22px 22px;width:min(460px,100% - 32px);max-height:calc(100% - 48px);box-shadow:0 24px 60px rgba(10,37,64,.25)}
dialog::backdrop{background:rgba(10,37,64,.35)}
.dialog-close{position:absolute;top:10px;right:10px;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:var(--soft)}
.dialog-content{display:grid;gap:12px}
.dialog-content pre{white-space:pre-wrap;word-break:break-all;background:var(--soft);padding:12px;border-radius:10px;font-size:12px;margin:0}
.menu-links{display:grid}
.menu-links a{display:flex;justify-content:space-between;align-items:center;padding:13px 2px;border-bottom:1px solid var(--line);font-weight:550}
.menu-links .ico{color:var(--faint)}
.toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%);background:var(--navy);color:#fff;padding:10px 16px;border-radius:12px;font-size:14px;z-index:50}

/* ---------- type helpers, buttons ---------- */
.eyebrow{font-size:12px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.lede{font-size:16px;color:var(--muted);max-width:60ch}
.lede.narrow{margin:-6px 0 18px}
.hint{font-size:13px;color:var(--faint);line-height:1.45}
.note{background:var(--soft);border-radius:12px;padding:14px 16px;font-size:14px;color:var(--muted)}
.tag{display:inline-block;font-size:12px;font-weight:600;color:var(--muted);background:var(--soft-2);border-radius:999px;padding:3px 10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;border-radius:999px;background:var(--blue);color:#fff;font-size:15px;font-weight:650;white-space:nowrap}
.btn:hover{background:#0857bb}
.btn.secondary{background:var(--blue-bg);color:var(--blue)}
.btn.secondary:hover{background:#dbe8fb}
.btn.small{min-height:36px;padding:6px 16px;font-size:14px}
.btn .ico{width:17px;height:17px}
.btn-row{display:flex;flex-wrap:wrap;gap:10px}
.text-btn{color:var(--blue);font-weight:600;font-size:14px}
.link{display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-weight:600;font-size:14px}
.link .ico{width:15px;height:15px}
.inline-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px}
.see-all{color:var(--blue);font-size:15px;font-weight:500;white-space:nowrap}
.crumbs{display:none;align-items:center;gap:6px;font-size:13px;color:var(--faint);padding-top:18px}
.crumbs .ico{width:13px;height:13px}
.crumbs a:hover{color:var(--blue)}
.crumbs span{color:var(--muted)}
.section{margin-top:36px}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.sec-head p{font-size:14px;margin-top:2px}
.page-head{display:grid;gap:12px;padding-top:20px}
.page-head h1{font-size:30px}

/* ---------- search, chips, toolbars ---------- */
.search-field{display:flex;align-items:center;gap:8px;background:var(--soft-2);border-radius:12px;padding:0 12px;height:44px;color:var(--faint);max-width:560px}
.search-field input{border:0;background:none;outline:0;width:100%;font-size:16px;color:var(--ink);min-width:0}
.search-field input::-webkit-search-cancel-button{opacity:.5}
.chip-row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:16px calc(-1*var(--gutter)) 0;padding:0 var(--gutter)}
.chip-row::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;gap:6px;flex:none;height:34px;padding:0 14px;border-radius:999px;background:var(--soft-2);color:var(--ink);font-size:14px;font-weight:550;white-space:nowrap}
.chip .ico{width:15px;height:15px}
.chip.harm .ico{color:var(--red)}
.chip.good .ico{color:var(--green)}
/* a chip is a button (aria-pressed) or, on Browse, a link to a category page (aria-current) */
.chip[aria-pressed="true"],.chip[aria-current="true"]{background:var(--navy);color:#fff}
.chip[aria-pressed="true"] .ico,.chip[aria-current="true"] .ico{color:#fff}
.chip.removable{background:var(--blue-bg);color:var(--blue);height:30px;font-size:13px}
.chip.removable .ico{width:14px;height:14px}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:18px}
.toolbar p{font-size:14px;color:var(--muted)}
.toolbar p b{color:var(--ink)}
.toolbar-tools{display:flex;align-items:center;gap:8px}
.tool-btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:10px;background:var(--soft-2);font-size:14px;font-weight:550}
.tool-btn .ico{width:16px;height:16px}
.tool-btn b{display:grid;place-items:center;min-width:18px;height:18px;border-radius:9px;background:var(--blue);color:#fff;font-size:11px;padding:0 5px}
.select{position:relative;display:inline-flex;align-items:center}
.select select{appearance:none;height:36px;border:0;border-radius:10px;background:var(--soft-2);padding:0 30px 0 12px;font-size:14px;font-weight:550;max-width:100%}
/* a select under 16px makes iOS Safari zoom the page on focus (scripts/check-mobile.js); phones only, the pill is 36px high either way */
@media (max-width:699px){.select select{font-size:16px}}
.select .ico{position:absolute;right:9px;width:15px;height:15px;pointer-events:none;color:var(--muted)}
.select.wide{display:flex}
.select.wide select{width:100%;font-weight:450}
.seg{display:none;background:var(--soft-2);border-radius:10px;padding:3px}
.seg button{display:grid;place-items:center;width:32px;height:30px;border-radius:8px;color:var(--muted)}
.seg button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(10,37,64,.12)}
.seg .ico{width:16px;height:16px}
.filter-panel{margin-top:12px;background:var(--soft);border-radius:var(--radius);padding:18px}
.filter-cols{display:grid;gap:18px}
.filter-panel fieldset{border:0;margin:0;padding:0;display:grid;gap:8px;min-width:0}
.filter-panel legend{font-size:13px;font-weight:650;color:var(--ink);padding:0;margin-bottom:8px}
.seg-text{display:inline-flex;background:var(--soft-2);border-radius:10px;padding:3px;gap:2px}
.seg-text label{position:relative}
.seg-text input{position:absolute;opacity:0}
.seg-text span{display:block;padding:6px 14px;border-radius:8px;font-size:14px;cursor:pointer}
.seg-text input:checked+span{background:#fff;box-shadow:0 1px 3px rgba(10,37,64,.12);font-weight:600}
.seg-text input:focus-visible+span{outline:3px solid var(--blue)}
.check{display:flex;align-items:center;gap:8px;font-size:14px}
.band-options{display:grid;gap:2px}
.band-options label{display:flex;align-items:center;gap:8px;font-size:13px;padding:4px 0}
.band-options small{margin-left:auto;color:var(--faint)}
.filter-actions{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
.active-filters{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.active-filters:empty{display:none}
.load-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:20px}
.load-row p{font-size:13px;color:var(--faint)}
.empty{padding:32px 0;display:grid;gap:6px;justify-items:start}

/* ---------- pills: the labels under a title ---------- */
.pills{display:flex;flex-wrap:wrap;gap:5px}
.pill{display:inline-flex;align-items:flex-start;gap:4px;max-width:100%;padding:3px 9px 3px 6px;border-radius:999px;font-size:12px;line-height:16px;font-weight:600;letter-spacing:-.003em}
.pill .ico{width:14px;height:14px;margin-top:1px}
.pill.harm{background:var(--red-bg);color:var(--red)}
.pill.good{background:var(--green-bg);color:var(--green)}
.pill.neutral{background:var(--gray-bg);color:var(--muted);font-weight:550;padding:3px 9px}
.pill.more{background:var(--gray-bg);color:var(--muted);padding:3px 8px}
.legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:28px;padding-top:16px;border-top:1px solid var(--line)}
.legend p{flex-basis:100%;font-size:13px;color:var(--faint)}
.legend p a{color:var(--blue)}

/* ---------- app rows (compact cards) ---------- */
.app-icon{width:64px;height:64px;border-radius:15px;border:1px solid rgba(10,37,64,.08);object-fit:cover;background:var(--soft)}
.app-icon.xs{width:28px;height:28px;border-radius:7px}
.app-icon.lg{width:72px;height:72px;border-radius:17px}
.app-icon.xl{width:96px;height:96px;border-radius:22px}
.app-row{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr) auto;column-gap:12px;row-gap:8px;align-items:center;align-content:start;padding:12px 0;border-radius:12px}
.app-row>.app-icon{grid-row:1}
.app-row .pills{grid-column:2/4}
.row-body{min-width:0}
.row-body h3{font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.row-meta{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-facts{display:flex;flex-wrap:wrap;align-items:baseline;font-size:13px;color:var(--muted);margin-top:1px}
.row-facts>span+span::before{content:"·";margin:0 6px;color:var(--faint)}
.rating small{font-size:11px;font-weight:450;color:var(--faint);margin-left:4px}
.rating{font-weight:600;color:var(--ink)}
.rating.none{font-weight:450;color:var(--faint)}
.star{color:#7b8797;margin-left:1px;font-size:.92em}
.view-btn{position:relative;z-index:1;display:inline-grid;place-items:center;min-width:64px;height:30px;padding:0 14px;border-radius:999px;background:var(--soft-2);color:var(--blue);font-size:14px;font-weight:700;letter-spacing:.01em}
.view-btn:hover{background:#e1e7ef}
.app-row:hover .row-link{color:var(--blue)}
.results.grid,.results.list{display:grid;margin-top:6px}
.results .app-row+.app-row{border-top:1px solid var(--line)}
.results.list{max-width:760px}

/* ---------- shelves ---------- */
.shelf-wrap{position:relative}
.shelf{display:grid;grid-auto-flow:column;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;column-gap:20px;margin:0 calc(-1*var(--gutter));padding:0 var(--gutter);scroll-padding:0 var(--gutter)}
.shelf::-webkit-scrollbar{display:none}
.rows3{grid-auto-columns:calc(100% - 28px);align-items:start}
.shelf-col{scroll-snap-align:start;min-width:0}
.shelf-col .app-row+.app-row{border-top:1px solid var(--line)}
.shelf-nav{display:none}
.feature-shelf{grid-auto-columns:86%;column-gap:14px;padding-bottom:4px}
.feature-tile{position:relative;scroll-snap-align:start;display:grid;align-content:start;gap:10px;background:#fff;border-radius:20px;box-shadow:0 1px 2px rgba(10,37,64,.06),0 6px 20px rgba(10,37,64,.07);overflow:hidden;padding-bottom:14px}
.feature-tile>.row-link{position:absolute;inset:0;z-index:1}
.feature-media{position:relative;aspect-ratio:16/10;background:var(--soft-2);overflow:hidden}
.feature-media img{width:100%;height:100%;object-fit:cover;object-position:top}
.kicker{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.94);color:var(--navy);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.feature-foot{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:10px;align-items:center;padding:0 14px}
.feature-foot .app-icon{width:48px;height:48px;border-radius:12px}
.feature-foot h3{font-size:16px}
.feature-foot p{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feature-foot .view-btn{z-index:0}
.feature-tile>.pills{padding:0 14px}

/* ---------- home ---------- */
.hero{display:grid;gap:24px;padding-top:24px}
.hero-copy{display:grid;gap:12px;align-content:center}
.hero h1{font-size:32px;line-height:1.08}
.hero-sample{display:none}
.chip-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cat-chip{display:flex;align-items:center;gap:10px;padding:12px;border-radius:14px;background:var(--soft);font-weight:600;font-size:14px}
.cat-chip .ico{width:30px;height:30px;padding:6px;border-radius:9px;background:#fff;color:var(--cat,var(--blue))}
.cat-chip:hover{background:var(--soft-2)}
/* category colours: .cat-<id> for all ten categories of data.js (ui.js CATEGORY_META keeps the same hex) */
.explainer{display:grid;gap:14px;background:var(--soft);border-radius:20px;padding:22px}
.explainer .legend{margin-top:0;border-top:0;padding-top:0}
.explainer .btn{justify-self:start}

/* ---------- categories ---------- */
.cat-grid{display:grid;gap:10px;margin-top:20px}
.cat-card{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px;border-radius:16px;background:var(--soft)}
.cat-card:hover{background:var(--soft-2)}
.cat-symbol{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--cat);color:#fff}
.cat-symbol .ico{width:22px;height:22px}
.cat-card p{font-size:13px}
.cat-icons{display:flex}
.cat-icons .app-icon{margin-left:-8px;border:2px solid #fff;box-sizing:content-box}
.cat-card h3,.cat-card p{overflow-wrap:anywhere}
.cat-count{color:var(--faint);font-family:var(--mono);font-size:12px!important;margin-top:2px}
/* a category page's head: the symbol in the category's colour, then the name, the description and the count */
.cat-head{display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px 16px;align-items:center;padding-top:20px}
.cat-head .cat-symbol{width:56px;height:56px;border-radius:16px}
.cat-head .cat-symbol .ico{width:28px;height:28px}
.cat-head-text{display:grid;gap:4px;min-width:0}
.cat-head-text h1{font-size:30px;overflow-wrap:anywhere}
.cat-head-text .cat-count{margin-top:0}

/* ---------- app page: listing (top half) ---------- */
.listing{padding-top:16px}
.listing-head{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px 16px;align-items:center}
.lh-title{display:grid;gap:3px;min-width:0}
.lh-title h1{font-size:24px;overflow-wrap:anywhere}
.lh-sub{font-size:15px;color:var(--muted)}
.lh-dev{font-size:14px;color:var(--blue);font-weight:500;justify-self:start}
.lh-pills,.lh-actions{grid-column:1/-1}
.lh-pills .pill{font-size:13px;line-height:17px;padding:4px 10px 4px 7px}
.lh-actions{display:flex;gap:8px;align-items:center}
.lh-actions .store-btn{flex:1 1 0;min-width:0;max-width:200px;justify-content:center}
.lh-actions .round-btn{flex:none}
/* Two store buttons and Share and Save need 374px of row (125 + 137 + 44 + 44 and three gaps), so a phone narrower than
   about 380px gives each store button less than its label and the text runs over its neighbour. Below that Share and Save
   take a second row; a listing with one store button still fits in one. */
@media (max-width:379px){.lh-actions{flex-wrap:wrap}.lh-actions .store-btn{flex:1 1 128px}}
.store-btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 12px 0 10px;white-space:nowrap;border-radius:12px;background:var(--navy);color:#fff;font-weight:650;font-size:15px;line-height:1.05}
.store-btn small{display:block;font-size:10px;font-weight:450;opacity:.8}
.store-btn:hover{background:#12355a}
.store-btn .ico{width:20px;height:20px}
.round-btn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--soft-2);color:var(--blue)}
.round-btn[aria-pressed="true"]{background:var(--blue);color:#fff}
.info-strip{display:flex;overflow-x:auto;scrollbar-width:none;margin:22px calc(-1*var(--gutter)) 0;padding:12px var(--gutter);border-block:1px solid var(--line)}
.info-strip::-webkit-scrollbar{display:none}
.info-cell{flex:none;display:grid;justify-items:center;align-content:start;gap:3px;min-width:104px;padding:0 12px;text-align:center}
.info-cell+.info-cell{border-left:1px solid var(--line)}
.info-label{font-size:10.5px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.info-cell strong{font-size:19px;font-weight:700;color:var(--muted);line-height:1.15;min-height:22px;display:flex;align-items:center}
.info-cell strong .plat{font-size:14px;line-height:1.25;font-weight:650}
.info-cell strong small{font-size:12px;font-weight:600;margin-left:2px}
.info-cell strong .ico{width:22px;height:22px}
.info-cap{font-size:12px;color:var(--faint);max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.glance{margin-top:26px}
.glance-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.glance-head h2{font-size:22px}
.glance-cols{display:grid;gap:18px}
.glance-title{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:10px 0 4px}
.glance-title span{display:grid;place-items:center;min-width:20px;height:20px;border-radius:10px;font-size:11px;letter-spacing:0;padding:0 6px}
.glance-title.harm{color:var(--red)}.glance-title.harm span{background:var(--red-bg)}
.glance-title.good{color:var(--green)}.glance-title.good span{background:var(--green-bg)}
.glance-title.context{color:var(--muted)}
.glance-list li a{display:grid;grid-template-columns:32px minmax(0,1fr) 16px;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.glance-list li:first-child a{border-top:1px solid var(--line)}
.g-ico{display:grid;place-items:center;width:32px;height:32px;border-radius:50%}
.g-ico .ico{width:18px;height:18px}
.harm .g-ico{background:var(--red-bg);color:var(--red)}
.good .g-ico{background:var(--green-bg);color:var(--green)}
.context .g-ico{background:var(--gray-bg);color:var(--muted)}
.g-text{display:grid;gap:2px}
.g-text strong{font-size:15px;font-weight:650;color:var(--ink)}
.g-text span{font-size:14px;color:var(--muted);line-height:1.42}
.glance-list>li>a>.ico{width:16px;height:16px;color:var(--faint)}
.glance-list li a:hover strong{color:var(--blue)}
.glance-context{margin-top:14px}
.glance-context .g-text strong{font-weight:600}
.glance-empty{background:var(--soft);border-radius:14px;padding:16px;font-size:14px;color:var(--muted)}
.glance-none{font-size:14px;color:var(--faint);padding:10px 0;border-top:1px solid var(--line)}
.glance-foot{font-size:13px;color:var(--faint);margin-top:12px}
/* the two dates: the analysis-version block in its compact form, and the store's own update where nothing was analysed */
.glance-foot .analysis-version,.glance-foot .store-now{margin-top:10px;gap:8px}
.glance-foot .store-now{display:grid}
.glance-foot .analysis-version__leg{gap:2px}
.glance-foot .analysis-version__leg p,.glance-foot .store-now p{font-size:13px;color:var(--muted)}
.glance-foot .analysis-version__notice{margin-top:4px;padding:8px 12px}
.glance-foot .analysis-version__notice p{font-size:13px;color:#6b4a00}
.glance-foot .analysis-version__notice a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.listing-sec{margin-top:30px}
.listing-sec h2{margin-bottom:12px}
.screens{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none;margin:0 calc(-1*var(--gutter));padding:0 var(--gutter) 6px}
.screens::-webkit-scrollbar{display:none}
/* every screenshot at its own aspect ratio and one height (spec 5.3); 9:16 holds its place until the image says otherwise */
.screens img{flex:none;scroll-snap-align:start;height:340px;width:auto;aspect-ratio:auto 9/16;border-radius:16px;border:1px solid var(--line);background:var(--soft)}
.screens+.hint{margin-top:6px}
/* the description is shown whole; script adds .is-clamped only when it is longer than four lines (ui.js syncClamp), so a reader without script is never left with a cut-off text and a button that does nothing */
.clamp{display:grid;gap:10px;position:relative}
.clamp p{font-size:15px;color:var(--ink);line-height:1.55}
.clamp.is-clamped{max-height:calc(1.55em * 4);overflow:hidden}
.clamp.is-clamped:not(.open)::after{content:"";position:absolute;inset:auto 0 0;height:1.6em;background:linear-gradient(transparent,#fff)}
.clamp.is-clamped.open{max-height:none;overflow:visible}
.more-btn{margin-top:4px}
.about .hint{margin-top:8px}

/* ---------- app page: full report (bottom half) ---------- */
.report-zone{margin-top:48px;background:var(--soft);box-shadow:0 0 0 100vmax var(--soft);clip-path:inset(0 -100vmax);padding-bottom:8px}
.report-divider{background:var(--navy);box-shadow:0 0 0 100vmax var(--navy);clip-path:inset(0 -100vmax);color:#fff;padding:26px 0 24px}
.report-divider .eyebrow{color:#8fc1ff}
.report-divider h2{color:#fff;font-size:26px;margin:4px 0 6px}
.report-divider p:last-child{color:#c3d2e3;font-size:15px;max-width:60ch}
.report-layout{display:grid;gap:20px;padding-top:20px}
.report-toc{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1*var(--gutter));padding:0 var(--gutter)}
.report-toc::-webkit-scrollbar{display:none}
.report-toc a{flex:none;font-size:13px;font-weight:550;padding:6px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--muted)}
.report-toc a:hover{color:var(--blue);border-color:#c9d7ea}
.report-body{display:grid;gap:12px;min-width:0}
.r-sec{background:#fff;border-radius:var(--radius);border:1px solid var(--line)}
.r-sec>summary{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;column-gap:12px;row-gap:2px;padding:16px 18px;cursor:pointer;list-style:none}
.r-sec>summary::-webkit-details-marker{display:none}
.r-sec>summary>.ico{color:var(--faint);transition:transform .2s}
.r-sec[open]>summary>.ico{transform:rotate(180deg)}
.r-sec>summary>.r-title{grid-column:1;grid-row:1;font-size:17px}
.r-sec>summary>.r-meta{grid-column:1;grid-row:2}
.r-sec>summary>.ico{grid-column:2;grid-row:1/3}
.r-meta{font-size:13px;color:var(--faint)}
.r-body{padding:0 18px 20px;display:grid;gap:12px;min-width:0}
.ev-group{display:grid;gap:10px}
.ev-group+.ev-group{margin-top:12px}
.ev-group-title{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-top:6px}
.ev-group-title span{font-size:11px;padding:1px 7px;border-radius:9px;background:var(--gray-bg);color:var(--muted)}
.ev-group-title.harm{color:var(--red)}.ev-group-title.good{color:var(--green)}.ev-group-title.context,.ev-group-title.muted{color:var(--muted)}
.ev-group>.hint{margin-top:-6px}
.ev{display:grid;gap:10px;background:var(--soft);border-radius:12px;padding:14px 16px;border-left:3px solid var(--line);scroll-margin-top:80px;min-width:0}
.ev.harm{border-left-color:#e2685d}.ev.good{border-left-color:#3aa56c}.ev.context{border-left-color:#9aa6b4}.ev.muted{border-left-color:#c7cfd8;background:#fafbfc}
.ev header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px}
.basis{font-size:12px;font-weight:650;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:999px;padding:2px 9px}
.ev-text{font-size:14px;color:var(--ink);overflow-wrap:anywhere}
.ev-meta{display:grid;gap:6px}
.ev-meta div{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.ev-meta dt{font-size:11.5px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--faint)}
.ev-meta dd{font-size:13.5px;color:var(--muted);overflow-wrap:anywhere}
.ev-limit{font-size:13px;color:#8a5a00;background:#fff7e6;border-radius:8px;padding:8px 10px}
.def summary{font-size:13px;color:var(--blue);cursor:pointer;font-weight:550}
.def p{font-size:13px;margin-top:6px}
.artifact{font-size:11.5px;justify-self:start;max-width:100%}
.quote-list{display:grid;gap:10px}
.quote-card{display:grid;gap:8px;background:var(--soft);border-radius:12px;padding:14px 16px}
.quote-card header{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;align-items:baseline}
.status{font-size:12px;font-weight:650;border-radius:999px;padding:2px 9px}
.status.ok{background:var(--red-bg);color:var(--red)}
.status.open{background:var(--gray-bg);color:var(--muted)}
blockquote{background:#fff;border-radius:10px;padding:12px 14px}
blockquote p{font-size:14px;color:var(--ink)}
blockquote footer{font-size:12px;color:var(--faint);margin-top:6px}
blockquote footer{color:#c68a00}
blockquote footer .dim{color:#d6dbe2}
.m-group{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-top:10px}
.m-row{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.m-main{display:grid;gap:2px;min-width:0}
.m-label{font-size:13px;color:var(--muted)}
.m-value{font-size:15px;font-weight:650}
.na-chip{display:inline-block;font-size:12.5px;font-weight:650;color:var(--muted);background:var(--gray-bg);border:1px dashed #b9c3cf;border-radius:999px;padding:1px 9px}
.m-raw{display:grid;justify-items:end;align-content:start;text-align:right;flex:none}
.m-raw b{font-size:17px}
.m-raw small{font-size:11.5px;color:var(--faint)}
.v-grid{display:grid;gap:10px}
.v-card{display:grid;gap:10px;background:var(--soft);border-radius:12px;padding:14px 16px;align-content:start}
.kv{display:grid;gap:8px}
.kv div{display:grid;gap:1px}
.kv dt{font-size:11.5px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--faint)}
.kv dd{font-size:14px;color:var(--ink);overflow-wrap:anywhere}
.plain-list{display:grid;gap:6px;font-size:14px;color:var(--muted)}
.plain-list li{padding-left:14px;position:relative}
.plain-list li::before{content:"";position:absolute;left:2px;top:.65em;width:5px;height:5px;border-radius:50%;background:#b7c2cf}
.limits{display:grid;gap:10px}
.limits li{font-size:14px;color:var(--muted);padding-left:14px;position:relative}
.limits li::before{content:"";position:absolute;left:2px;top:.6em;width:5px;height:5px;border-radius:50%;background:#b7c2cf}
.limits b{color:var(--ink);font-weight:650}
#corrections .btn{justify-self:start}

/* ---------- content pages ---------- */
.page-hero{display:grid;gap:24px;padding-top:20px}
.page-hero>div:first-child{display:grid;gap:14px;align-content:center;justify-items:start}
.page-hero h1{font-size:32px;line-height:1.08}
.hero-sample{background:#fff;border-radius:22px;padding:22px;box-shadow:0 1px 2px rgba(10,37,64,.06),0 14px 40px rgba(10,37,64,.10);gap:14px;align-content:start}
.page-hero .hero-sample{display:grid}
.sample-head{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:center}
.sample-head h3{font-size:20px}
.sample-head p{font-size:13px}
.hero-sample .btn{justify-self:start}
.toc-sample{display:grid}
.toc-sample li{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;font-weight:550}
.toc-sample .ico{width:15px;height:15px;color:var(--faint)}
.steps{display:grid;gap:12px}
.steps>div{background:var(--soft);border-radius:16px;padding:18px;display:grid;gap:6px;align-content:start}
.steps p{font-size:14px}
.step-n{font-size:12px;font-weight:700;color:var(--blue)}
.cards{display:grid;gap:12px}
.card{display:grid;gap:8px;align-content:start;background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px}
.card>.ico{width:28px;height:28px;color:var(--blue)}
.card p{font-size:14px}
.card .limit{font-size:13px;color:var(--faint);border-top:1px solid var(--line);padding-top:8px;margin-top:4px}
.card .btn{justify-self:start;margin-top:6px}
.card .tag{justify-self:start}
.muted-card{background:var(--soft);border-color:transparent}
.ticks{display:grid;gap:4px;font-size:14px;color:var(--muted)}
.ticks li{padding-left:22px;position:relative}
.ticks li::before{content:"";position:absolute;left:4px;top:.35em;width:9px;height:5px;border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg)}
.two{display:grid;gap:12px}
.panel{background:var(--soft);border-radius:18px;padding:22px;display:grid;gap:10px;align-content:start}
.panel p{font-size:14.5px}
.panel .tag{justify-self:start}
.faq{display:grid;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;gap:10px;padding:14px 0;cursor:pointer;font-weight:600;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ico{margin-left:auto;color:var(--faint);transition:transform .2s}
.faq details[open] summary .ico{transform:rotate(180deg)}
.faq summary small{font-weight:450;color:var(--faint);font-size:12px;white-space:nowrap}
.faq details p{font-size:14px;padding:0 0 12px}
.dim-n{font-size:12px;color:var(--blue);font-weight:700}
.panel-details{background:var(--soft);border-radius:14px;padding:4px 16px}
.panel-details summary{display:flex;align-items:center;justify-content:space-between;padding:12px 0;font-weight:600;cursor:pointer;list-style:none;color:var(--blue)}
.panel-details summary::-webkit-details-marker{display:none}
.table-scroll{overflow-x:auto;padding-bottom:12px}
.data-table{border-collapse:collapse;font-size:13px;min-width:560px;width:100%}
.data-table th,.data-table td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
.data-table thead th{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--faint)}
.data-table tbody th{font-weight:600}
.panel-details+.hint{margin-top:10px}
.explorer{display:grid;gap:14px}
.seg-tabs{display:flex;flex-wrap:wrap;gap:6px}
.seg-tabs button{height:34px;padding:0 14px;border-radius:999px;background:var(--soft-2);font-size:14px;font-weight:550}
.seg-tabs button[aria-pressed="true"]{background:var(--navy);color:#fff}
.explorer-body{display:grid;gap:16px;background:var(--soft);border-radius:18px;padding:20px}
.explorer-body>div:first-child{display:grid;gap:8px}
.explorer-body .tag{justify-self:start;background:#fff}
.sample-quote{display:grid;gap:8px;background:#fff;border-radius:14px;padding:16px}
.sample-quote p{color:var(--ink);font-size:14.5px}
.sample-quote small{font-size:12.5px;color:var(--faint)}
.search-block .search-field{margin-bottom:6px}

/* ---------- tablet ---------- */
@media (min-width:700px){
  :root{--gutter:28px}
  h1{font-size:34px}
  .crumbs{display:flex}
  .header-search{display:flex}
  .search-link{display:none}
  .seg{display:inline-flex}
  .rows3{grid-auto-columns:calc((100% - 20px)/2)}
  .feature-shelf{grid-auto-columns:calc((100% - 14px)/2)}
  .results.grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
  .results.grid .app-row+.app-row{border-top:0}
  .results.grid .app-row{border-bottom:1px solid var(--line)}
  .chip-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero h1,.page-hero h1{font-size:44px}
  .listing-head{grid-template-columns:128px minmax(0,1fr);column-gap:24px;align-items:start}
  .listing-head>.app-icon{grid-row:1/4;width:128px;height:128px;border-radius:28px}
  .lh-pills,.lh-actions{grid-column:2}
  .lh-title h1{font-size:32px}
  .cat-head{padding-top:14px}
  .cat-head-text h1{font-size:34px}
  .glance-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
  .v-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kv.two{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
  .ev-meta div{grid-template-columns:150px minmax(0,1fr);gap:12px}
  .ev-meta dt{padding-top:2px}
  .steps.three,.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps.four{grid-template-columns:repeat(4,minmax(0,1fr))}
  .two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .filter-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .explorer-body{grid-template-columns:1fr 1fr;padding:26px}
  .footer-inner{grid-template-columns:auto 1fr;align-items:center;column-gap:32px}
  .footer p{grid-column:1/-1}
}
/* ---------- desktop ---------- */
@media (min-width:1000px){
  body{padding-bottom:0}
  .mobile-nav,.mobile-menu{display:none}
  .header-inner{height:64px}
  .nav{display:flex}
  .section{margin-top:48px}
  .rows3{grid-auto-columns:calc((100% - 40px)/3)}
  .shelf{margin:0;padding:0;scroll-padding:0}
  .shelf-nav{display:flex;gap:6px;position:absolute;top:-52px;right:84px}
  .shelf-nav button{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--soft-2);color:var(--muted)}
  .shelf-nav button:hover{color:var(--ink)}
  .feature-shelf{grid-auto-columns:calc((100% - 28px)/3)}
  .results.grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .chip-row{margin:16px 0 0;padding:0;flex-wrap:wrap}
  .hero{grid-template-columns:1.1fr .9fr;gap:56px;padding-top:44px;align-items:center}
  .hero-sample{display:grid}
  .page-hero{grid-template-columns:1.1fr .9fr;gap:56px;padding-top:36px;align-items:center}
  .chip-grid{grid-template-columns:repeat(7,minmax(0,1fr))}
  .chip-grid .cat-chip{flex-direction:column;align-items:flex-start;gap:12px;padding:16px}
  .cat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .explainer{grid-template-columns:1fr auto;align-items:center;padding:28px 32px}
  .explainer .legend{grid-column:1}
  .explainer .btn{grid-column:2;grid-row:1/3;align-self:center}
  .listing{padding-top:8px}
  .info-strip{margin-inline:0;padding-inline:0}
  .info-cell{flex:1 1 0;min-width:0}
  .screens{margin:0;padding:0 0 6px;scroll-padding-inline:0}
  .screens img{height:400px}
  .about .clamp{max-width:760px}
  .report-divider{padding:36px 0 32px}
  .report-divider h2{font-size:32px}
  .report-layout{grid-template-columns:220px minmax(0,1fr);gap:32px;padding-top:28px;align-items:start}
  .report-toc{position:sticky;top:84px;flex-direction:column;margin:0;padding:0;gap:2px}
  .report-toc a{background:none;border:0;border-radius:8px;padding:8px 12px;font-size:14px}
  .report-toc a:hover{background:#fff}
  .r-sec>summary{padding:18px 24px}
  .r-body{padding:0 24px 24px}
  .v-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* =================== v7 refinements: crisper, quieter, more "product" =================== */
h1,h2{letter-spacing:-.032em}h3,h4{letter-spacing:-.015em}
h1{font-weight:720}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;box-shadow:var(--ring)}
a,button,.pill,.app-row,.feature-tile,.cat-card,.cat-chip,.view-btn,.chip,.r-sec>summary{transition:background-color .15s ease,color .15s ease,box-shadow .2s ease,transform .2s ease,border-color .15s ease}
.kbd{display:none;font:600 11px/1 var(--mono);color:var(--muted);background:#fff;border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:6px;padding:3px 6px;flex:none}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;font-weight:600}
/* header: glass bar, command-bar search */
.header{background:rgba(255,255,255,.78);border-bottom-color:var(--line)}
.nav a.active{background:var(--soft-2)}
.header-search{background:#fff;border:1px solid var(--line-strong);box-shadow:var(--shadow-sm);width:280px;border-radius:10px}
.header-search:focus-within{border-color:var(--blue);box-shadow:var(--ring)}
.header-search .kbd{display:inline-block}
.sample-banner{font-family:var(--mono);font-size:10.5px;letter-spacing:.02em}
/* search fields as command bars */
.search-field{background:#fff;border:1px solid var(--line-strong);box-shadow:var(--shadow-sm);border-radius:14px}
.search-field:focus-within{border-color:var(--blue);box-shadow:var(--ring)}
.hero-search{height:52px;box-shadow:var(--shadow)}
/* hero glow */
.hero{position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;z-index:-1;inset:-24px 0 auto 0;height:420px;background:radial-gradient(40% 60% at 20% 30%,rgba(10,102,216,.13),transparent 70%),radial-gradient(35% 55% at 70% 20%,rgba(79,70,229,.11),transparent 70%),radial-gradient(30% 50% at 55% 70%,rgba(8,145,178,.09),transparent 70%);pointer-events:none}
.hero-sample{border:1px solid var(--line);box-shadow:var(--shadow-lg)}
/* pills: single line, crisp tinted border */
.pill{white-space:nowrap;flex:none;align-items:center;height:24px;padding:0 9px 0 7px;border-radius:999px;font-size:12px;line-height:1;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.pill>span:not(.sr){overflow:hidden;text-overflow:ellipsis}
.pill .ico{width:13px;height:13px;margin-top:0}
.pill.harm{box-shadow:inset 0 0 0 1px rgba(179,38,30,.14)}
.pill.good{box-shadow:inset 0 0 0 1px rgba(20,108,67,.16)}
.pill.reported .ico{stroke-width:2}
.pill.more{font-family:var(--mono);font-size:11.5px;padding:0 8px;cursor:help}
.pills.fit{flex-wrap:nowrap;overflow:hidden;min-width:0}
.lh-pills .pill{height:28px;font-size:13px;line-height:1;padding:0 11px 0 8px}
.legend .pill{flex:none}
/* app rows */
.row-meta .dev-link{position:relative;z-index:1}
.row-meta .dev-link:hover{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.view-btn{background:var(--blue-bg)}
.view-btn:hover{background:var(--blue);color:#fff}
.app-row:hover .view-btn{background:var(--blue);color:#fff}
.app-icon{border-color:rgba(15,23,42,.08);box-shadow:0 1px 2px rgba(15,23,42,.06)}
/* feature tiles + category cards */
.feature-tile{border:1px solid var(--line);box-shadow:var(--shadow)}
.feature-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.cat-chip,.cat-card{border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-sm)}
.cat-chip:hover,.cat-card:hover{transform:translateY(-1px);box-shadow:var(--shadow);background:#fff}
.chip{background:#fff;border:1px solid var(--line-strong)}
.chip:hover{border-color:rgba(15,23,42,.28)}
.chip[aria-pressed="true"],.chip[aria-current="true"]{border-color:var(--navy)}
.tool-btn,.select select,.seg{background:#fff;box-shadow:inset 0 0 0 1px var(--line-strong)}
.seg button[aria-pressed="true"]{background:var(--soft-2);box-shadow:none}
.explainer{background:linear-gradient(180deg,#fff,var(--soft));border:1px solid var(--line)}
/* developer link + developer view */
.lh-dev{display:inline-flex;align-items:center;gap:2px}
.lh-dev .ico{width:15px;height:15px}
.lh-dev:hover{text-decoration:underline;text-underline-offset:2px}
.dev-cell{color:var(--blue)}
.info-cell strong .dev-cell .ico{width:22px;height:22px}
.dev-head{gap:14px}
.dev-head .crumbs{padding-top:0}
.dev-id{display:flex;align-items:center;gap:16px}
.dev-avatar{display:grid;grid-template-columns:repeat(2,36px);gap:4px;flex:none}
.dev-avatar .app-icon.sm{width:36px;height:36px;border-radius:9px}
.dev-avatar .app-icon.lg{grid-column:1/-1}
.dev-avatar:has(.lg){grid-template-columns:72px}
.dev-stats{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13.5px;margin-top:4px}
.dev-stats b{font-family:var(--mono);color:var(--ink)}
.dev-head .hint .link{font-size:13px}
/* a developer's name is store text of any length and may have no spaces (a CJK publisher): it wraps
   anywhere, and its flex parent may shrink below its content */
.dev-id-text{min-width:0}
.dev-head h1,.dev-head .crumbs span{overflow-wrap:anywhere;min-width:0}
span.app-icon.sm{font-size:16px}
#developer-count{margin-top:10px}
#developer-count:empty{display:none}
/* app page */
.store-btn{background:#0b1524;box-shadow:var(--shadow-sm)}
.store-btn:hover{background:#1c2a3e}
.round-btn{background:#fff;box-shadow:inset 0 0 0 1px var(--line-strong)}
.info-strip{border-color:var(--line)}
.info-label{font-family:var(--mono);font-size:10px;letter-spacing:.06em}
.glance-list li{border-bottom:1px solid var(--line)}
.glance-list li:first-child{border-top:1px solid var(--line)}
.glance-list li a,.glance-list li:first-child a{border:0;border-radius:12px;padding:12px 8px;margin:2px -8px}
.glance-list li a:hover{background:var(--soft)}
.glance-title{font-family:var(--mono);font-size:11.5px;letter-spacing:.07em}
.screens img{border-color:var(--line);box-shadow:var(--shadow-sm)}
/* full report: dev-tool feel */
.report-divider{background:#0a1a30;box-shadow:none;clip-path:none;border-image:linear-gradient(120deg,#081a33 0%,#0b2a52 45%,#1b2470 75%,#0b3a52 100%) fill 0/0/0 100vmax;position:relative;isolation:isolate}
.report-divider::after{content:"";position:absolute;z-index:-1;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent)}
.report-divider .eyebrow{color:#9cc8ff}
.report-divider h2{letter-spacing:-.035em}
.report-toc a{font-family:inherit}
.r-sec{border-color:var(--line);box-shadow:var(--shadow-sm)}
.r-sec>summary:hover{background:rgba(15,23,42,.02)}
.r-meta{font-family:var(--mono);font-size:12px}
.basis{font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-transform:uppercase;font-weight:600}
.ev{background:#fbfbfc;border:1px solid var(--line);border-left-width:3px}
.ev-meta dt,.kv dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em}
.ev-meta dd.mono,.kv dd{font-family:var(--mono);font-size:12.5px}
.ev-text{font-size:14.5px}
.m-raw b{font-family:var(--mono);font-size:15px}
.m-group,.ev-group-title{font-family:var(--mono);font-size:11.5px;letter-spacing:.07em}
.quote-card{background:#fbfbfc;border:1px solid var(--line)}
.quote-card .hint{font-family:var(--mono);font-size:12px}
blockquote{border:1px solid var(--line)}
code,.artifact{font-family:var(--mono)}
.v-card{background:#fbfbfc;border:1px solid var(--line)}
.na-chip{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em}
.card,.panel,.steps>div,.explorer-body{border:1px solid var(--line)}
.steps>div,.panel,.explorer-body{background:#fbfbfc}
.mobile-nav{background:rgba(255,255,255,.82);backdrop-filter:saturate(1.6) blur(16px)}
@media (min-width:700px){
  .hero-search .kbd,.search-field .kbd{display:inline-block}
  .results.grid{column-gap:16px;row-gap:16px;margin-top:12px;grid-auto-rows:1fr}
  .results.grid .app-row{border:1px solid var(--line);border-radius:16px;padding:14px;background:#fff;box-shadow:var(--shadow-sm)}
  .results.grid .app-row:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
  .results.list .app-row{padding:12px 10px;border-radius:12px}
  .results.list .app-row:hover{background:var(--soft)}
}
@media (min-width:1000px){
  .shelf-col .app-row{padding:12px 10px;margin:0 -10px}
  .shelf-col .app-row:hover{background:var(--soft)}
  .shelf-col .app-row+.app-row{border-top-color:var(--line)}
}
@media (prefers-reduced-motion:reduce){.feature-tile:hover,.results.grid .app-row:hover,.cat-chip:hover,.cat-card:hover{transform:none}}
/* v7 layout guards */
.toolbar-tools{flex-wrap:wrap;min-width:0}
.toolbar-tools .select{min-width:0;flex:1 1 140px}
.toolbar-tools .select select{width:100%}
.pills.fit{height:24px;gap:4px}
.row-facts{flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
.row-facts>span{overflow:hidden;text-overflow:ellipsis}
.row-body h3{line-height:20px}
.row-meta,.row-facts{line-height:18px}
@media (max-width:359px){.rows3{grid-auto-columns:calc(100% - 12px)}.feature-shelf{grid-auto-columns:92%}}

/* =================== added for states v7 lacks =================== */
/* the shells mount the chrome as <div data-site-header></div> and the build fills it. The wrapper makes no box, so the sticky header
   sticks against the page rather than against a wrapper exactly its own height */
[data-site-header],[data-site-footer],[data-mobile-nav]{display:contents}
/* a pill that is not a finding: the listing's state in words ("Not yet tested", "Review signals only", "No findings published") */
.pill.neutral{background:var(--gray-bg);color:var(--muted);font-weight:550;padding:0 10px;box-shadow:inset 0 0 0 1px rgba(15,23,42,.06)}
.pill.neutral .ico{display:none}
/* the human-reviewed chip: a dated link under the title, shaped unlike a pill (outlined, not tinted) so it is never read as a finding */
.hr-chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;max-width:100%;padding:4px 12px 4px 9px;border-radius:999px;background:#fff;color:var(--navy);font-size:13px;line-height:18px;font-weight:650;box-shadow:inset 0 0 0 1.5px var(--navy)}
.hr-chip .ico{width:15px;height:15px;color:var(--blue)}
.hr-chip small{font-size:12px;font-weight:450;color:var(--muted)}
a.hr-chip:hover{background:var(--soft)}
/* category colours */
.cat-games{--cat:#7a3fd1}
.cat-productivity{--cat:#0a66d8}
.cat-health{--cat:#d1435b}
.cat-finance{--cat:#1f7a8c}
.cat-photo{--cat:#b5298f}
.cat-education{--cat:#3f6bd1}
.cat-social{--cat:#14866d}
.cat-lifestyle{--cat:#c26a00}
.cat-utilities{--cat:#5b6b7f}
.cat-kids{--cat:#4d7c0f}
/* the store's icon over an initials tile; a failed image hides itself and the tile shows */
span.app-icon{position:relative;display:grid;place-items:center;overflow:hidden;background:var(--soft-2);color:var(--faint);font-size:24px;font-weight:700;line-height:1}
span.app-icon>.init{font-style:normal}
span.app-icon>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--soft)}
span.app-icon.xs{font-size:12px}
span.app-icon.lg{font-size:28px}
span.app-icon.xl{font-size:36px}
/* measurement rows: the graded bands, each a measurement, never a verdict. NOT ASSESSED is a value, drawn as one */
.small{font-size:13px}
.muted{color:var(--muted)}
.band-panel{display:grid;gap:10px}
.band-intro,.band-foot{font-size:13px;color:var(--faint)}
.band-subhead{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-top:10px}
.band-grid{display:grid}
.band-row{display:grid;gap:2px;padding:12px 0;border-top:1px solid var(--line)}
.band-row__label{font-size:13px;color:var(--muted)}
.band-row__value{font-size:15px;font-weight:650;color:var(--ink);overflow-wrap:anywhere}
.band-row__note{font-size:12.5px;color:var(--faint)}
.band-row--unassessed .band-row__value{justify-self:start;font-family:var(--mono);font-size:11.5px;font-weight:650;letter-spacing:.02em;color:var(--muted);background:var(--gray-bg);border:1px dashed #b9c3cf;border-radius:999px;padding:1px 9px}
/* review quotes: a verbatim excerpt, never our wording */
.rq-block{display:grid;gap:14px}
.rq-group{display:grid;gap:8px}
.rq-group h4{font-size:14px}
.rq-note{font-size:13px;color:var(--faint)}
blockquote.rq{margin:0;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.rq p{font-size:14px;color:var(--ink);overflow-wrap:anywhere}
.rq footer{font-size:12px;color:var(--faint);margin-top:6px}
/* app page, top half: the verbatim description sits inside the clamp (the guards read the wrapper's exact class), and the chip sits under the developer link */
.clamp>.prose{display:grid;gap:10px}
.lh-title .hr-chip{justify-self:start;margin-top:4px}
/* on a card it is a span in the facts line (the card is one stretched link): smaller, and first, so a long price label is what the line clips */
.row-facts>.hr-chip{flex:none;min-height:0;gap:4px;padding:0 8px 0 6px;font-size:12px;line-height:18px;box-shadow:inset 0 0 0 1px var(--navy)}
.row-facts>.hr-chip .ico{width:13px;height:13px}
/* the full report (bottom half of the app page): the blocks core.js builds -
   the hands-on test, the analysis-version block, the provenance stamp and the
   pricing panel - drawn on v7 tokens and scoped to the report, plus the few
   classes ui.js adds (method prose, evidence link). Their old rules lived in
   the stylesheets this one replaces. */
.report-zone .method-prose{display:grid;gap:10px}
.report-zone .method-prose p{font-size:14px}
.report-zone .method-prose strong{color:var(--ink);font-weight:650}
.report-zone [data-retirement-record]{background:var(--soft);border-radius:12px;padding:12px 14px}
.report-zone .note b{color:var(--ink);font-weight:650}
.report-zone .textlink{color:var(--blue);font-weight:600}
.ev-link{justify-self:start}
.ev-ref{margin-bottom:-6px}
.report-zone .ev-group-title+.hint{margin-top:-4px}
.report-zone .plain-list .link{display:inline;font-size:inherit}
/* which version an analysis describes */
.analysis-version{display:grid;gap:14px}
.analysis-version__leg{display:grid;gap:6px}
.analysis-version__leg p{font-size:14px;color:var(--ink)}
.analysis-version__store{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.analysis-version__notice{display:grid;gap:6px;background:#fff7e6;border-left:3px solid #e0b25a;border-radius:0 10px 10px 0;padding:10px 12px}
.analysis-version__notice p{font-size:13.5px;color:#6b4a00}
.analysis-note h5{margin:8px 0 4px;font-size:13px;font-weight:650;color:var(--ink)}
.analysis-note .rq{white-space:pre-line;overflow-wrap:anywhere}
.analysis-age{white-space:nowrap;color:var(--faint)}
.v-card .analysis-note+.analysis-note{border-top:1px solid var(--line);margin-top:8px;padding-top:2px}
/* how this page was produced */
.provenance{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pill-note{display:inline-flex;align-items:center;font-size:12px;color:var(--muted);background:var(--gray-bg);border-radius:999px;padding:3px 10px}
a.pill-note{color:var(--blue)}
.provenance__srcs{flex-basis:100%;margin-top:4px}
/* the hands-on test: a dated mark, what was measured, what was not */
.hr-marks{display:grid;gap:10px}
.hr-mark{display:grid;gap:6px;background:var(--green-bg);border:1px solid var(--green-line);border-radius:12px;padding:14px 16px}
.hr-mark__head{display:flex;flex-wrap:wrap;align-items:center;gap:2px 0;font-size:14px;color:var(--ink)}
.hr-mark__word{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--green)}
.hr-mark__word svg{width:17px;height:17px}
.hr-mark__line{color:var(--muted);overflow-wrap:anywhere}
.hr-mark__session{font-size:12px}
.hr-measured,.hr-not-observed,.hr-suppressions{display:grid;gap:8px;margin-top:8px}
.flags-h{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink)}
.flags-h__n{font-weight:600;color:var(--faint);margin-left:4px}
.flags-sub{margin-top:-4px}
.hr-leg{margin:0}
.hr-items{display:grid}
.hr-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 14px;padding:10px 0;border-top:1px solid var(--line)}
.hr-item__label{font-weight:600;color:var(--ink)}
.hr-item__value{font-variant-numeric:tabular-nums;color:var(--muted);text-align:right}
.hr-frames{grid-column:1/-1;display:grid;gap:2px;font-size:12px;color:var(--faint)}
.hr-frame__hash{display:block;font-size:11px;color:var(--faint);word-break:break-all}
.hr-skipped{display:grid;gap:4px;margin-left:18px;list-style:disc;font-size:13px;color:var(--muted)}
@media (max-width:560px){.hr-item{grid-template-columns:minmax(0,1fr)}.hr-item__value{text-align:left}}
/* what the store lists for sale */
.pricing-panel{display:grid;gap:10px}
.panel__title{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.panel__title svg{width:15px;height:15px;flex:none}
.panel__basis{font-size:12.5px;color:var(--faint);max-width:62ch}
.grp{display:grid;gap:6px;margin-top:6px}
.grp__head{display:flex;align-items:baseline;gap:8px}
.grp__name{font-size:14px;font-weight:700;color:var(--ink)}
.grp__count{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.buy{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;background:var(--soft)}
.buy__name{flex:1;min-width:0;font-size:14px;color:var(--ink);overflow-wrap:anywhere}
.buy__term{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;border-radius:999px;padding:2px 8px;background:var(--blue-bg);color:var(--blue)}
.buy__term--soft{background:var(--gray-bg);color:var(--muted)}
.buy__price{font-weight:700;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.pricing-panel .notice{display:flex;gap:9px;align-items:flex-start;font-size:13px;border-radius:10px;padding:10px 13px}
.pricing-panel .notice svg{flex:none;width:16px;height:16px;margin-top:1px}
.notice--cap{background:#fff7e6;color:#6b4a00}
.notice--gap{background:var(--gray-bg);color:var(--muted)}
.pricing-panel .more>summary{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--blue);padding:6px 0}
.more__note{font-size:12.5px;color:var(--faint);margin:4px 0 8px}
@media (max-width:560px){.buy{flex-wrap:wrap;gap:6px}.buy__name{flex-basis:100%}}

/* =================== Discover (home, spec 5.1) =================== */
/* the coverage sentence: what the catalogue carries, in the monospace the page uses for figures */
.coverage-line{margin:20px 0 0;font-family:var(--mono);font-size:12.5px;line-height:1.65;color:var(--muted);max-width:none}
.coverage-line b{color:var(--ink);font-weight:650}
/* ten categories, not v7's seven: two even rows of five on a desktop */
@media (min-width:1000px){
  .chip-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* =================== Phone pass: every tap target is 44px (owner decision 2026-10-15) ===================
   scripts/check-mobile.js measures the box a finger lands on and fails anything under 44px. Everything here is
   inside the phone breakpoint (the same 699px the select's 16px font uses), so a tablet and a desktop keep the
   sizes above. Where a control sits among text that is not itself tappable (a link in a heading row, "more"
   under the description) a negative margin takes back the room the taller box would add, so the page does not
   move; where its neighbours are tappable too (the footer, the report's links) it gets the room instead, so two
   hit areas never overlap. */
@media (max-width:699px){
  /* header: three 44px buttons and the 130px wordmark must still fit the 288px of a 320px phone */
  .header-inner{gap:8px}
  .header-tools{gap:2px}
  .icon-button{width:44px;height:44px}
  .brand{min-height:44px}
  .dialog-close{width:44px;height:44px;top:6px;right:6px}
  /* footer: a column of links, each its own 44px row; the wordmark is a link too, so it stops at its text */
  .footer-inner{gap:4px}
  .footer-inner .brand{justify-self:start}
  .footer nav{gap:0 20px}
  .footer nav a{display:inline-flex;align-items:center;min-height:44px}
  /* cards: the View button */
  .view-btn{height:44px}
  /* Browse and category: the chip row, the toolbar, the filter panel */
  .chip,.chip.removable{height:44px}
  .tool-btn{height:44px}
  .select select{height:44px}
  .seg-text{padding:0 3px}
  .seg-text label{display:flex;min-height:44px;padding:3px 0}
  .seg-text span{display:flex;flex:1;align-items:center}
  .check{min-height:44px}
  .band-options{gap:0}
  .band-options label{min-height:44px;padding:0}
  .btn.small{min-height:44px}
  .text-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;margin-inline:-6px}
  /* "more" under the description: the box is taller, the page is not */
  .more-btn{margin-block:-7px -11px}
  /* links that stand on their own line, not inside a sentence */
  .see-all{display:inline-flex;align-items:center;min-height:44px;margin-block:-11px}
  .link{min-height:44px}
  p .link,li .link,.hint .link,.small .link,.muted .link{min-height:0}
  .inline-links{gap:0 20px}
  .v-card>.link,.ev-link{margin-block:-11px}
  .lh-dev{min-height:44px;margin-block:-8px}
  /* the two links that are DRAWN shapes (the Methodology link in the provenance strip, the dated Human-reviewed chip): a 44px box
     must not grow the capsule. The element is the 44px target; the capsule is painted by ::before on exactly the box the element
     had on a desktop, so shape, outline and the layout around it are unchanged (a plain min-height drew a 44px grey oval; a
     transparent border keeps the height but its padding-box corners come out elliptical, so the end caps change) */
  a.pill-note,a.hr-chip{position:relative;isolation:isolate;min-height:44px}
  a.pill-note::before,a.hr-chip::before{content:"";position:absolute;z-index:-1;inset-inline:0;border-radius:999px;transition:background-color .15s ease}
  a.pill-note{padding-block:13px;margin-block:-10px;background:none}
  a.pill-note::before{inset-block:10px;background:var(--gray-bg)}
  a.hr-chip{padding-block:12px;background:none;box-shadow:none}
  a.hr-chip::before{inset-block:8px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--navy)}
  a.hr-chip:hover{background:none}
  a.hr-chip:hover::before{background:var(--soft)}
  .lh-title a.hr-chip{margin-block:-4px -8px}
  .report-toc a{display:inline-flex;align-items:center;min-height:44px}
  /* the Developer cell of the store-facts strip: a tap anywhere in the cell opens the developer, the way a card's
     name link covers the card (both links in it go to the same page) */
  .info-cell{position:relative}
  .dev-cell::after{content:"";position:absolute;inset:0}
}