/* IRBlock portal, minimal layer over normalize+skeleton */
/* ---------------------------------------------------------------------------
   UBC / UBC Computer Science palette.
   Values sampled from the CS department stylesheet rather than eyeballed from a
   screenshot, so they match the real brand: #002145 is UBC Blue, #00afa4 and
   #005554 are the CS teals used for buttons and links, #9e4225 is the rust of
   the department footer.

   Mechanism colours (.b-dns/.b-http/.b-https/.b-quic) are deliberately NOT
   rebranded. They encode data in the charts, where being distinguishable from
   one another, including for colour-blind readers, outranks being on-brand.

   No webfont is loaded. The CSP forbids off-origin fonts, and UBC's own faces
   come from a licensed CDN we cannot use, so this rides the same stack the CS
   site names and falls back to system faces.
   --------------------------------------------------------------------------- */
:root {
  --ubc-blue:   #002145;
  --cs-teal:    #00afa4;
  --cs-teal-dk: #005554;
  --cs-rust:    #9e4225;
  --ink:        #333333;
  --rule:       #d7e0e7;
  --panel:      #f5f5f5;
}
body { font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; }
h1,h2,h3,h4 { font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
              color:var(--ubc-blue); }
a { color:var(--cs-teal-dk); }
a:hover { color:var(--cs-teal); }
pre,code,.pshape { font-family:Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace; }
body { color:var(--ink); }
.hdr { border-bottom:3px solid var(--ubc-blue); background:var(--panel); padding:1.8rem 0 1.4rem; margin-bottom:2rem; }
.hdr h1 { margin:0; font-size:4.4rem; letter-spacing:.3px; line-height:1; }
.hdr .sub { margin:.3rem 0 0; color:#666; font-size:1.9rem; }
.hdr nav a { display:inline-block; margin-right:2rem; padding:.5rem 0; font-size:1.55rem; color:var(--cs-teal-dk); text-decoration:none;
  border-bottom:2px solid transparent; font-weight:600; }
.hdr nav a.on { border-bottom-color:var(--cs-teal); color:var(--ubc-blue); }
h2 { font-size:2rem; margin-top:1rem; }
h3 { font-size:1.6rem; }
.note { color:#555; }
.ctl { margin:.4rem 0; color:#555; } .ctl label { margin-right:1.6rem; font-weight:normal; }
.chart { width:100%; min-height:420px; }
.evlist { color:#844; font-size:1.25rem; margin-top:.6rem; }
.about { border-top:1px solid var(--rule); margin-top:2.4rem; padding-top:1rem; }
.fineprint { color:#888; font-size:1.15rem; }
.foot { border-top:3px solid var(--cs-rust); margin-top:3rem; padding:1.2rem 0 2rem; color:#777;
  display:flex; align-items:center; gap:1rem; font-size:1.2rem; }
.err { color:#a33; }
/* lookup */
.lk { display:flex; gap:.8rem; margin:.8rem 0 1.4rem; }
.lk input { flex:1; font-size:1.6rem; padding:.8rem; border:1px solid #ccc; border-radius:4px; }
.lk button { font-size:1.4rem; background:var(--cs-teal); color:#fff; border:0;
  border-radius:3px; padding:0 2rem; font-weight:600; letter-spacing:.02em; }
.lk button:hover { background:var(--cs-teal-dk); }
.card { border:1px solid #ddd; border-left:5px solid #999; border-radius:4px; padding: .2rem 1.2rem .6rem; margin:.8rem 0; }
.card.blocked { border-left-color:var(--cs-rust); background:#fdf7f4; }
.card.ok { border-left-color:var(--cs-teal); background:#f4fbfa; }
.card h3 { font-size:1.5rem; margin:.8rem 0 .4rem; }
.badge { display:inline-block; padding:.25rem .7rem; border-radius:3px; color:#fff; font-size:1.15rem; margin:.15rem .3rem .15rem 0; }
.b-dns { background:#4C72B0; } .b-http { background:#2CA089; }
.b-https { background:#E0A030; } .b-quic { background:#2E6E3F; }
.dl li { margin-bottom:.4rem; }
/* login gate */
.gate { max-width:420px; margin:14vh auto; text-align:center; }
.gate input { width:100%; font-size:1.6rem; padding:.8rem; margin:.8rem 0; }
.evlist li { margin-bottom:.9rem; }
.evbasis { color:#777; font-size:1.15rem; margin-top:.15rem; }
/* brand lockup */
/* header spans the full container: brand on the left, nav pushed to the right,
   so the lockup reads across the page instead of huddling in one corner */
.hdr .container { display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1rem 2rem; }
.brand { display:flex; align-items:center; gap:1.6rem; flex:1 1 auto; min-width:0; }
.brand .logo { width:112px; height:112px; flex:0 0 112px; }
.brand h1 { margin:0; line-height:1.05; }
.brand .sub { margin:.25rem 0 0; max-width:none; white-space:nowrap; }
.hdr nav { margin-top:0; flex:0 0 auto; white-space:nowrap; }
/* event list */
.evmore { margin:.2rem 0 1rem; }
.evmore summary { cursor:pointer; color:var(--cs-teal-dk); font-weight:600; }
/* lookup result rows */
.prow { margin:.5rem 0 .8rem; }
.pmeta { color:#555; font-size:1.25rem; margin-left:.4rem; }
/* per-month figures sit inline after the mechanism badge and wrap on narrow
   screens rather than pushing the row sideways */
.mo { display:inline-block; margin-right:1.1rem; white-space:nowrap; }
.mo b { color:#222; }
.pshape { color:#888; font-size:1.1rem; margin-top:.1rem; }
.homelink { display:inline-flex; line-height:0; border-radius:6px; }
.homelink:focus-visible { outline:2px solid #4C72B0; outline-offset:3px; }
.homelink .logo { transition:opacity .12s ease; }
.homelink:hover .logo { opacity:.78; }
/* per-network table */
.tablewrap { overflow-x:auto; }
#asntable { width:100%; border-collapse:collapse; font-size:1.3rem; }
#asntable th, #asntable td { padding:.55rem .7rem; border-bottom:1px solid #eee; text-align:left;
  vertical-align:top; }
#asntable th { font-weight:600; color:var(--ubc-blue); border-bottom:2px solid var(--rule); white-space:nowrap; }
#asntable td.num, #asntable th.num { text-align:right; font-variant-numeric:tabular-nums; }
#asntable tr:hover td { background:#fafafa; }
.asname { color:#888; font-size:1.1rem; font-weight:normal; margin-top:.1rem; max-width:22rem; }
.pct { color:#999; font-size:1.05rem; }
.na { color:#bbb; font-style:italic; font-size:1.15rem; }
.method { border-top:1px solid #eee; margin-top:2.4rem; padding-top:1.2rem; }
.method h3 { font-size:1.6rem; }
.method p { color:#555; }
.method b { color:#333; }
/* narrow screens: let the subtitle wrap rather than overflow */
@media (max-width:900px){
  .hdr .container { display:block; }
  .hdr nav { margin-top:1rem; white-space:normal; }
  .brand .sub { white-space:normal; font-size:1.45rem; }
  .brand .logo { width:68px; height:68px; flex:0 0 68px; }
  .hdr h1 { font-size:3rem; }
  .hdr nav a { font-size:1.35rem; margin-right:1.4rem; }
}
/* research page */
.cite { color:#444; margin-bottom:1.2rem; }
pre { background:var(--panel); border:1px solid var(--rule); border-radius:4px; padding:1.2rem 1.4rem;
  overflow-x:auto; font-size:1.2rem; line-height:1.5; }
pre code { background:none; border:none; padding:0; white-space:pre; font-size:inherit; }
main section { margin-bottom:2.6rem; }
.mechlist { list-style:none; margin:.6rem 0 1.4rem; padding:0; }
.mechlist li { margin-bottom:.55rem; display:flex; align-items:center; gap:.7rem; }
.mechlist .badge { margin:0; flex:0 0 auto; min-width:14.5rem; text-align:center; }
.lowerbound { color:#555; border-left:3px solid #ddd; padding:.2rem 0 .2rem 1rem; margin:2rem 0 0; }
.qa h3 { font-size:1.9rem; margin-top:2.4rem; }
.qa p, .qa li { color:#444; }
.hnote { font-weight:normal; color:#999; font-size:1.35rem; }

/* touch */