/* PULSE, where and how (W6, 4 Oct 2026). Leans on the .pu-card, .pu-bar and .pu-t rules in site.css; adds the flag
   wall, the device tiles, the filter and the recent-visits list. */
.pg{margin-top:28px}
.pg .pu-grid{margin-top:4px}
.pg-full{grid-column:1/-1}
.pg-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin:0 0 16px}
.pg-head h3{font:600 22px "Jost",sans-serif;color:#fff;margin:0}
.pg-head h3 small{font:400 12px "IBM Plex Sans",sans-serif;color:#a9a59c;margin-left:8px}
.pg-ctl{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pg-tabs{display:inline-flex;padding:3px;border-radius:12px;background:rgba(12,13,30,.75);border:1px solid rgba(255,255,255,.09)}
.pg-tab{appearance:none;border:0;background:none;color:#c9d3e2;font:500 13px "IBM Plex Sans",sans-serif;padding:7px 12px;border-radius:9px;cursor:pointer;min-height:34px}
.pg-tab small{font:500 11px "IBM Plex Mono",monospace;color:#8f8b82;margin-left:4px}
.pg-tab[aria-pressed="true"]{background:rgba(227,200,120,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(227,200,120,.35)}
.pg-tab[aria-pressed="true"] small{color:#e3c878}
.pg-tab:hover{color:#fff}
.pg-span select{appearance:none;-webkit-appearance:none;background:rgba(12,13,30,.75) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c9d3e2' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center/10px 7px;color:#f2efe6;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:8px 30px 8px 12px;font:500 13px "IBM Plex Sans",sans-serif;min-height:38px;cursor:pointer}
.pg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.pg-f{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:1.15em;line-height:1}
.pg-flags{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.pg-flags li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);font:13px "IBM Plex Sans",sans-serif;color:#d8d3c8}
.pg-flags li.pu-none{display:block;background:none;border:0;padding:0}
.pg-flags .pg-f{font-size:22px}
.pg-cn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-flags b{font:600 13px "IBM Plex Mono",monospace;color:#fff}

.pg-dev{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pg-devc{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:14px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
.pg-devc .pg-ic{grid-row:1/3;width:34px;height:34px;color:#e3c878}
.pg-devc .pg-ic svg{width:100%;height:100%}
.pg-devc b{font:700 26px/1 "Jost",sans-serif;color:#fff;font-variant-numeric:tabular-nums}
.pg-devc small{font:12px "IBM Plex Sans",sans-serif;color:#a9a59c}

.pg-mt td .pg-f{margin-right:2px}

.pg-rec{list-style:none;margin:0;padding:0;max-height:560px;overflow-y:auto;overscroll-behavior:contain}
.pg-rec li{display:grid;grid-template-columns:118px 22px 26px minmax(0,1fr) minmax(0,.7fr);align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid rgba(255,255,255,.06);font:13px "IBM Plex Sans",sans-serif;color:#d8d3c8}
.pg-rec li.pu-none{display:block;border:0}
.pg-rec time{font:12px "IBM Plex Mono",monospace;color:#a9a59c;white-space:nowrap}
.pg-who{width:20px;height:20px;color:#2ec86e}.pg-who svg{width:100%;height:100%}
.pg-rec .is-bot .pg-who{color:#ff5c22}
.pg-rec .is-bot .pg-main b{color:#c9d3e2}
.pg-rec .pg-f{font-size:20px;text-align:center}
.pg-main{display:flex;flex-direction:column;min-width:0}
.pg-main b{color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-main small,.pg-city small{color:#8f8b82;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-city{display:flex;flex-direction:column;min-width:0;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media (max-width:700px){
  .pg-head{align-items:flex-start}
  .pg-flags{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
  .pg-rec li{grid-template-columns:20px 24px minmax(0,1fr);row-gap:2px}
  .pg-rec time{grid-column:1/-1}
  .pg-city{grid-column:3;text-align:left;flex-direction:row;gap:8px}
}