/* Shared web-app type roles. Loaded after layout styles at every breakpoint. */
:root{
  --type-page:32px;
  --type-section:18px;
  --type-feature:24px;
  --type-body:14px;
  --type-control:13px;
  --type-meta:12px;
  --type-metric:48px;
  --type-metric-primary:64px;
  --text-primary:#231d2e;
  --text-secondary:#73697f;
  --text-meta:#7d7389;
}
body.web-app{font-size:var(--type-body);line-height:1.55;font-weight:400;color:var(--text-primary);font-synthesis:none}
.web-heading h1{font-size:var(--type-page);font-weight:500;line-height:1.2;letter-spacing:-1px}
.web-heading h1 em{color:inherit;font-weight:inherit}
.web-heading p{font-size:var(--type-body);line-height:1.55;color:var(--text-secondary);margin-top:10px}
.web-heading p b{font-weight:500;color:inherit}
.card-head h2,.consent-card>h2,.metric-topline,.review-card .card-head h2,.web-site-list h2{font-size:var(--type-section);font-weight:500;line-height:1.35;letter-spacing:-.3px;color:var(--text-primary)}
.consent-card>h2{max-width:100%;min-height:49px}
.consent-card>h2 strong{font-weight:500}
.review-card .card-head{align-items:flex-start}
.review-card .card-head h2{font-size:var(--type-section)}
.review-card h3{font-size:var(--type-feature);line-height:1.25;letter-spacing:-.5px;font-weight:500;max-width:195px}
.review-card h3 b{font-weight:500}
.display-number{font-size:var(--type-metric-primary);line-height:1.05;letter-spacing:-2.8px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:25px}
.display-number span{font-size:.72em;font-weight:500;letter-spacing:-1.5px}
.medium-number{font-size:var(--type-metric);line-height:1.1;letter-spacing:-1.8px;font-weight:500;font-variant-numeric:tabular-nums}
.stat-tile .medium-number{font-size:40px;font-weight:500;letter-spacing:-1.5px}
.metric-label{font-size:var(--type-body);font-weight:400;line-height:1.5;letter-spacing:0;color:var(--text-secondary);margin-top:8px}
.consent-card>p,.review-card>p,.banner-tile>p,.web-site-list p,.finding-web .web-card>p{font-size:var(--type-body);line-height:1.6;color:var(--text-secondary)}
.consent-card>p{max-width:100%}
.review-card>p{max-width:calc(100% - 68px);margin-top:14px}
.review-card img{width:66px;right:19px;top:127px}
.web-nav-item,.web-select,.web-button,.review-card .web-button,.search-trigger,.web-tab,.web-filter,.web-search,.row-link,.card-head a,.card-head>button,.banner-tile>a,.web-card .primary{font-size:var(--type-control);font-weight:500;line-height:1.4}
.web-nav-item{padding:10px 14px;color:var(--text-secondary)}
.web-nav-item.active{color:#fff}
.web-select{max-width:210px;padding-top:11px;padding-bottom:11px}
.web-button{min-height:41px}
.web-button svg,.card-head svg{height:16px;width:16px}
.card-head a,.card-head>button,.row-link{color:#665471}
.card-head{align-items:flex-start}
.card-head>a{white-space:nowrap}
.search-trigger{color:var(--text-secondary)}
.search-trigger kbd{font-size:11px;color:var(--text-meta)}
.web-avatar{font-size:var(--type-meta);font-weight:500;color:#554064}
.tiny-label,.change,.review-card .card-head small,.status-tag,.tag,.muted-note,.stat-tile p,.app-note,.chart-axis,.legend-row,.notification small,.settings-row small{font-size:var(--type-meta);line-height:1.5;font-weight:400;color:var(--text-meta)}
.review-card .card-head small{margin-top:5px}
.change b{font-weight:500;color:var(--text-secondary)}
.stat-tile>span{font-size:var(--type-body);font-weight:400;color:var(--text-secondary)}
.web-table{font-size:var(--type-body);line-height:1.4}
.web-table th{font-size:var(--type-meta);font-weight:500;color:var(--text-secondary);padding-top:14px;padding-bottom:14px}
.web-table td{font-size:var(--type-control);padding-top:18px;padding-bottom:18px}
.cookie-name strong{font-size:var(--type-control);font-weight:500;color:var(--text-primary)}
.cookie-name small{font-size:var(--type-meta);line-height:1.4;color:var(--text-meta)}
.tag{font-size:var(--type-meta);padding:4px 9px}
.table-symbol svg{height:17px;width:17px}
.activity-bar>span{font-size:11px;line-height:1.65;color:#74617f}
.activity-bar strong{font-size:var(--type-meta);font-weight:500;color:#51405f}
.activity-bars{margin-top:26px}
.activity-bar{min-width:0}
.web-card .field,.field{font-size:var(--type-control);font-weight:500;line-height:1.5;color:var(--text-primary)}
.web-card .field input,.web-card .field select,.web-card .field textarea,.field input,.field select,.field textarea{font-size:var(--type-body);font-weight:400;line-height:1.5}
.settings-row{font-size:var(--type-body);line-height:1.5;font-weight:400}
.notification h2{font-size:var(--type-body);font-weight:500;letter-spacing:0;line-height:1.4}
.notification p{font-size:var(--type-body);line-height:1.5;color:var(--text-secondary)}
.region-row,.region-row strong{font-size:var(--type-control)}
.region-row>span{width:110px;color:var(--text-secondary)}
.web-ring strong{font-size:32px;font-weight:500;letter-spacing:-1px}
.web-ring small{font-size:var(--type-meta);color:var(--text-secondary)}
.live-consent h3{font-size:var(--type-section);font-weight:500;line-height:1.3}
.live-consent p{font-size:var(--type-control);line-height:1.55;color:var(--text-secondary)}
.live-consent .consent-buttons button{font-size:var(--type-control);font-weight:500;min-height:40px}
.live-consent>button{font-size:var(--type-meta);color:var(--text-secondary)}
.preview-browser{min-height:390px}
.web-footer,.web-footer button{font-size:11px;line-height:1.5;color:var(--text-meta)}
.web-footer{padding-top:10px;gap:20px}
/* These three labels belong to a scaled miniature, not the working UI. */
.mini-site-name{font-size:10px;color:var(--text-secondary)}
.mini-consent h3{font-size:11px;font-weight:500}
.mini-consent p{font-size:9px;color:var(--text-secondary)}
dialog h2{font-size:var(--type-feature);font-weight:500;line-height:1.3;letter-spacing:-.5px}
dialog p,.compact-list,.search-results a{font-size:var(--type-body);line-height:1.6;color:var(--text-secondary)}
dialog .primary{font-size:var(--type-control);font-weight:500}
.finding-web .web-card>h2{font-size:var(--type-feature);font-weight:500}
.web-heading{gap:30px}
.web-actions{flex-shrink:0}
.consent-card{min-height:350px}
@media(max-width:1250px){.web-header{gap:14px}.web-logo{margin-right:10px}.web-nav-item{padding:9px 11px}.search-trigger{width:34px;padding:8px}.search-trigger span,.search-trigger kbd{display:none}.web-heading{align-items:flex-start}.web-actions{flex-wrap:wrap;justify-content:flex-end;max-width:420px}}
@media(max-width:900px){:root{--type-page:30px}.web-heading{display:block}.web-actions{max-width:none;justify-content:flex-start;margin-top:20px}.web-nav-item{font-size:var(--type-control)}.web-heading p{max-width:580px}.card-head{flex-wrap:wrap;gap:8px}}
@media(max-width:600px){:root{--type-page:28px;--type-metric:42px;--type-metric-primary:60px}.web-heading h1{font-size:var(--type-page);letter-spacing:-.8px}.web-header{height:118px}.web-nav-item{font-size:var(--type-control);padding:8px 12px}.web-heading p{font-size:var(--type-body)}.web-heading{margin-bottom:24px}.web-actions{gap:8px}.web-select,.web-button{font-size:var(--type-control)}.web-select{max-width:190px}.web-card{padding:25px}.consent-card>h2{font-size:var(--type-section);min-height:0;max-width:100%}.consent-card{min-height:340px}.display-number{font-size:var(--type-metric-primary)}.metric-label{font-size:var(--type-body)}.consent-card>p{font-size:var(--type-body)}.review-card{min-height:300px}.review-card h3{font-size:var(--type-feature);max-width:210px}.review-card>p{font-size:var(--type-body);max-width:220px;padding-right:10px}.review-card img{width:58px;right:20px;top:125px}.review-card .web-button{font-size:var(--type-control);margin-top:24px}.stat-tile{padding:20px}.stat-tile>span{font-size:var(--type-control)}.stat-tile .medium-number{font-size:36px}.stat-tile p{font-size:var(--type-meta)}.table-card{padding:24px 18px}.web-table{min-width:490px}.web-search,.web-filter,.web-tab{font-size:var(--type-control)}.live-consent h3{font-size:16px}.live-consent p{font-size:var(--type-control)}.live-consent .consent-buttons button{font-size:var(--type-meta)}.preview-browser{min-height:410px}.web-footer{align-items:flex-start;flex-wrap:wrap;gap:10px;font-size:11px}.web-footer button{font-size:11px}.tiny-label{font-size:var(--type-meta)}.card-head h2{font-size:var(--type-section)}}
/* Native arrows have inconsistent edge spacing across browsers. */
.web-select,.web-filter,.web-card .field select{
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23231d2e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:16px 16px;
  background-position:right 16px center;
  padding-right:44px;
  padding-left:18px;
}

