/* SkeyeTrack shared page components — layered on shared/theme.css (canon tokens) */
.main{display:flex;flex-direction:column;min-width:0;min-height:0}
.phead{height:64px;flex:none;display:flex;align-items:center;gap:14px;padding:0 24px;border-bottom:1px solid var(--line);background:var(--panel)}
.phead h1{font-size:20px;font-weight:500;color:var(--t1);white-space:nowrap}
.phead .sub{font:450 13px "IBM Plex Sans",sans-serif;color:var(--t2);white-space:nowrap}
.phead .sub b{font-weight:600;color:var(--t1);font-variant-numeric:tabular-nums}
.phead .spacer{flex:1}
.page{flex:1;overflow-y:auto;min-height:0}
.pbody{padding:24px;max-width:1400px;width:100%}
.btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:8px;font-size:13px;font-weight:500;color:var(--t1);background:var(--raised);border:1px solid var(--hair);white-space:nowrap;transition:background .15s ease-out}
@media (hover:hover){.btn:hover{background:#232e33}}
.btn.primary{background:var(--teal);border-color:var(--teal);color:#04211f}
@media (hover:hover){.btn.primary:hover{background:#02aeae}}
.btn.tealline{background:transparent;border:1px solid var(--teal);color:var(--teal)}
@media (hover:hover){.btn.tealline:hover{background:rgba(1,154,154,.1)}}
.btn.sm{height:30px;padding:0 10px;font-size:12.5px}
.iconbtn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:8px;color:var(--t2);transition:background-color .15s ease-out,color .15s ease-out}
@media (hover:hover){.iconbtn:hover{background:var(--raised);color:var(--t1)}}
.iconbtn.on{color:var(--teal);background:rgba(1,154,154,.1)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px}
.sect{margin-bottom:28px}
.sect>h2{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--t2);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.sect>h2 .hcount{font-weight:600;color:var(--t3);letter-spacing:0;font-variant-numeric:tabular-nums}
.desc{font:450 12px "IBM Plex Sans",sans-serif;color:var(--t2)}
.micro{font-size:11px;color:var(--t3);font-weight:600;font-variant-numeric:tabular-nums}
.msep{font-style:normal;color:var(--t3);margin:0 5px}
.num{font-family:"IBM Plex Sans",sans-serif;font-weight:600;font-variant-numeric:tabular-nums}
.mm{font-family:"IBM Plex Mono",monospace;color:var(--t1)}
.rowline{display:flex;align-items:center;gap:12px;min-width:0}
.leaflet-container{font:12px "IBM Plex Sans",sans-serif;background:var(--ink)}
.leaflet-control-attribution{background:rgba(13,18,20,.75)!important;color:#5c6b70!important;font-size:10px!important}
.leaflet-control-attribution a{color:#5c6b70!important}
a.plainlink{color:inherit;text-decoration:none}
@media (hover:hover){a.plainlink:hover{text-decoration:none;color:inherit}}