/* /pickpocketsinlondon.html only, loaded after site.css and rain.css (shared with the rain and snow
   pages and NOT changed for this page). Re-points rain.css's tokens on .page--crime and adds the band
   table, the West End total, the map card and the small advice blocks. Mock-up
   design/pickpockets.dc.html; notes .claude/research/pickpockets-design.md. Cap 8 KB. */
.page--crime{--rain:#2F3363;--rain-tint:#E6E5F1;--b1:#A3A6CE;--b2:#7C80B4;--b3:#565B91;--b4:#2F3363}
.pp-names{grid-column:1/-1}
.pp-names .rt-v{font-size:19px;line-height:1.3}
.pp-names span+span::before{content:" · "}
.pp-dn::before{content:"↓\00a0";content:"↓\00a0"/""}
.pp-up::before{content:"↑\00a0";content:"↑\00a0"/""}
.pp-streets,.pp-gap{display:flex;gap:8px;align-items:flex-start}
.pp-streets .ico,.pp-gap .ico{flex:none;width:18px;height:18px;margin-top:3px;color:var(--muted)}
.pp-gap{margin:10px 0 0!important;padding:10px 12px;border-radius:12px;background:var(--panel);font-size:15px;line-height:1.45}
/* The table: bands as row groups; two lines per place on phones, a table from 720px. */
.pp-t{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.pp-t,.pp-t tbody{display:block}
.pp-t thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.pp-t tr{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;padding:9px 2px 8px 12px;border-bottom:1px solid var(--line)}
.pp-t th,.pp-t td{padding:0;text-align:left;font-weight:400}
.pp-t tbody th{flex:1 1 calc(100% - 9.6em - 24px);min-width:0;font-weight:600}
.pp-t sup{margin-left:2px;font-weight:400}
.pp-t td:nth-of-type(1){width:4.8em;font-weight:600;text-align:right}
.pp-t td:nth-of-type(2){width:4.8em;text-align:right}
.pp-t td:nth-of-type(n+3){color:var(--muted);font-size:13.5px}
.pp-t td:nth-of-type(3)::before{content:"Robbery "}
.pp-t td:nth-of-type(4)::before{content:var(--m)}
.pp-t td:nth-of-type(5)::after{content:" per M journeys"}
.pp-t small,.pp-t td.na{display:none}
.pp-t .gap{font-style:italic}
.b1{--c1:var(--b1)}
.b2{--c1:var(--b2);--c2:var(--b2)}
.b3{--c1:var(--b3);--c2:var(--b3);--c3:var(--b3)}
.b4{--c1:var(--b4);--c2:var(--b4);--c3:var(--b4);--c4:var(--b4)}
.b1 tr,.b2 tr,.b3 tr,.b4 tr{box-shadow:inset 3px 0 var(--c1)}
.pp-t .pp-band{display:block;padding:22px 0 6px;border-bottom:2px solid var(--ink);box-shadow:none}
.pp-band th{display:block;color:var(--muted);font-size:14px}
.bd{display:inline-flex;align-items:center;gap:7px;margin-right:10px;color:var(--ink);font-size:14px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.bd::before{content:"";width:19px;height:14px;--o:var(--line-strong);background:linear-gradient(var(--c1,var(--o)),var(--c1,var(--o))) 0 100%/4px 5px no-repeat,linear-gradient(var(--c2,var(--o)),var(--c2,var(--o))) 5px 100%/4px 8px no-repeat,linear-gradient(var(--c3,var(--o)),var(--c3,var(--o))) 10px 100%/4px 11px no-repeat,linear-gradient(var(--c4,var(--o)),var(--c4,var(--o))) 15px 100%/4px 14px no-repeat}
.pp-t+.rain-small{margin-top:12px}
/* West End, counted once */
.pp-we{margin:16px 0 0;padding:14px 16px;border-radius:14px;background:var(--rain-tint)}
.pp-we p{margin:0}
.pp-we-k{color:var(--muted);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.pp-we-v{font:650 34px/1.1 var(--serif)}
.pp-we-s{font-size:15px;line-height:1.5}
/* Map: hidden without JS (maps.js removes [hidden]); circles drawn by maps.js, no crime points. */
.pp-map-card{margin-top:24px}
.pp-map{display:grid;padding:0 12px 12px;border:1px solid var(--line);border-radius:14px 14px 0 0;overflow:hidden}
.pp-art{margin:0 -12px 12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 190'%3E%3Crect width='390' height='190' fill='%23E8EFEA'/%3E%3Cpath d='M-10 150C80 120 140 170 230 120S360 60 400 80' stroke='%23BFD6DA' stroke-width='22' fill='none'/%3E%3Cg stroke-width='1.5' fill-opacity='.35'%3E%3Ccircle cx='150' cy='70' r='38' fill='%232F3363' stroke='%232F3363'/%3E%3Ccircle cx='185' cy='78' r='38' fill='%232F3363' stroke='%232F3363'/%3E%3Ccircle cx='120' cy='52' r='38' fill='%23565B91' stroke='%23565B91'/%3E%3Ccircle cx='205' cy='110' r='38' fill='%23565B91' stroke='%23565B91'/%3E%3Ccircle cx='290' cy='95' r='38' fill='%237C80B4' stroke='%237C80B4'/%3E%3Ccircle cx='60' cy='120' r='38' fill='%23A3A6CE' stroke='%23A3A6CE'/%3E%3Ccircle cx='350' cy='60' r='38' fill='%23A3A6CE' stroke='%23A3A6CE'/%3E%3C/g%3E%3C/svg%3E") center/cover var(--map-land)}
.pp-map .map-load{padding:0 18px}
.pp-map.is-live{display:block;height:420px;padding:0}
.pp-hit{outline:2px solid var(--accent);outline-offset:-2px}
.pp-pop button{padding:0;border:0;background:none;color:var(--accent);font:inherit;text-decoration:underline;cursor:pointer}
/* Chart */
.page--crime .rain-chart{max-width:960px}
.pp-fig-t{margin:0 0 6px!important;font-weight:600}
.pc-we{fill:none;stroke:var(--rain);stroke-width:7}
.pc-ot{fill:none;stroke:var(--b2);stroke-width:7}
.pp-k-ot{background:var(--b2)}
.pp-yr{stroke:var(--line-strong)}
.page--crime .rc-tick,.page--crime .pp-end{text-anchor:end}
.page--crime .rc-val{text-anchor:middle}
.pp-months{max-width:520px}
.pp-months td,.pp-months thead th:not(:first-child){text-align:right}
/* Advice, safety */
.pp-quote{margin:0 0 16px;padding:2px 0 2px 16px;border-left:3px solid var(--rain)}
.pp-quote p{margin:0 0 4px!important;font:500 20px/1.4 var(--serif)}
.pp-quote footer{color:var(--muted);font-size:15px}
.pp-call{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}
.pp-call div{padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.pp-call dt{font-size:24px;font-weight:600;line-height:1.2}
.pp-call dd{margin:0;color:var(--muted);font-size:14px;line-height:1.35}
@media (min-width:720px){
.pp-names .rt-v{font-size:22px}
.pp-names span{display:block}
.pp-names span+span::before{content:none}
.pp-t{display:table;max-width:960px}
.pp-t thead{position:static;width:auto;height:auto;clip-path:none;display:table-header-group}
.pp-t tbody{display:table-row-group}
.pp-t tr,.pp-t .pp-band{display:table-row;box-shadow:none}
.pp-t th,.pp-t td,.pp-band th{display:table-cell;width:auto;padding:8px 14px;border-bottom:1px solid var(--line);font-size:16px;color:inherit;vertical-align:baseline}
.pp-t thead th{position:sticky;top:0;z-index:1;background:var(--panel);font-size:14px;line-height:1.3;vertical-align:bottom}
.pp-t td,.pp-t thead th:not(:first-child){width:10%;text-align:right}
.pp-t td:nth-of-type(n+3){color:inherit;font-size:16px}
.pp-t td:nth-of-type(1),.pp-t thead th:nth-child(2){width:17%}
.pp-t td:nth-of-type(5),.pp-t thead th:nth-child(6){width:15%}
.pp-t td:nth-of-type(1){background:linear-gradient(var(--b2),var(--b2)) 0 55%/calc(var(--w)*.5) 10px no-repeat}
.pp-t td:nth-of-type(n+3)::before,.pp-t td:nth-of-type(5)::after{content:none}
.pp-t td.na{display:table-cell;color:var(--muted)}
.pp-t small{display:block;color:var(--muted);font-size:13px}
.pp-t tbody th{box-shadow:inset 3px 0 var(--c1);padding-left:16px}
.pp-band th{padding:26px 0 8px;border-bottom:2px solid var(--ink);box-shadow:none!important;font-size:15px;color:var(--muted)}
.pp-we{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:28px;align-items:center;max-width:960px;padding:18px 22px}
.pp-we-s{grid-row:1/3;grid-column:2;font-size:16px}
.pp-map-card{max-width:960px}
.pp-map .map-art{height:220px}
.pp-map .map-load{justify-self:start}
.pp-map.is-live{height:460px}
.pp-call{max-width:520px}
}