/* criminalidade.pt — V3 design tokens ("precision instrument").
   Source of truth: design/criminalidade-redesign-v3.html (binding mockup).
   Every page loads this first; page stylesheets only add layout.

   Colours: neutral graphite (not navy) + two faint ambient glows.
   Surfaces: glass = translucent dark, hairline border, blur+saturate,
   inner top highlight, soft shadow. Type: Instrument Sans for everything,
   IBM Plex Mono for numerals / micro-labels / kbd. Radii 10–14.
   Motion: --t1 150ms micro, --t2 380ms surface; reduced-motion → 0. */
:root{
  --bg:#0f1012;
  --glass:rgba(22,24,28,.72); --glass2:rgba(28,30,35,.85);
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16);
  --txt:#eceef0; --dim:#a5abb3; --dim2:#7f868f; /* dim ≥7:1 for text; dim2 (≥4.5:1 on glass) = decoration/axis annotation only, never sentences */
  --blue:#4a90d9; --amber:#f0b429; --red:#e0533d;
  /* NEWS accent — the only colour of the press layer (pins, glow, halo,
     connectors, switch, boxes, "N fontes"). Petrol teal, tuned to read
     against the ramp's steel-blue and olive midtones (the old #43c6b8 blended
     into them; violet #a78bfa was rejected). ≈ 6.9:1 on graphite (AA text).
     Amber = interaction; never mix. ONE token: --news + --news-rgb. */
  --news:#22b0a6; --news-rgb:34,176,166;
  --r1:10px; --r2:12px; --r3:14px;
  --t1:150ms cubic-bezier(.4,0,.2,1); --t2:380ms cubic-bezier(.22,1,.36,1);
  --sans:'Instrument Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --glow-blue:rgba(74,144,217,.05); --glow-amber:rgba(240,180,41,.04);
  /* "amber = active" — every selected/on state (nav pill, segmented controls,
     popover item, date pills, menu button). Teal stays exclusive to the news layer. */
  --on-bg:rgba(240,180,41,.16); --on-line:rgba(240,180,41,.55); --on-txt:var(--amber);
  /* iOS safe areas (viewport-fit=cover) */
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
}
@media (prefers-reduced-motion:reduce){:root{--t1:0ms;--t2:0ms}}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);background:var(--bg);color:var(--txt);
  background-image:radial-gradient(1200px 800px at 70% 20%,var(--glow-blue),transparent 60%),
                   radial-gradient(900px 700px at 20% 90%,var(--glow-amber),transparent 60%);
  background-attachment:fixed;
}
button,input,select,textarea{font-family:inherit}
a{color:var(--blue)}
.mono{font-family:var(--mono)}
.glass{
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r2);
  backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 8px 32px rgba(0,0,0,.35);
}
.microlabel{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--dim);text-transform:uppercase}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* ---- unified glass top bar (every page) ---- */
#top{position:fixed;top:16px;left:16px;right:16px;z-index:60;display:flex;align-items:center;gap:10px;pointer-events:none}
#top>*{pointer-events:auto}
#brand{display:flex;align-items:center;gap:10px;padding:10px 16px;font-weight:700;font-size:15px;letter-spacing:-.01em;color:var(--txt);text-decoration:none;white-space:nowrap}
#brand .dot{width:9px;height:9px;border-radius:3px;background:linear-gradient(135deg,var(--blue),var(--red));flex:none}
#brand span{color:var(--dim)}
#nav{display:flex;padding:5px;gap:2px}
#nav a{font-size:13px;color:var(--dim);text-decoration:none;padding:6px 13px;border-radius:8px;transition:all var(--t1);white-space:nowrap}
#nav a.on{background:var(--on-bg);color:var(--on-txt);font-weight:600}
#nav a:hover{color:var(--txt)}
#spacer{flex:1}
#menuSheet{display:contents} /* desktop: no box; on phones it becomes the menu sheet (see below) */
#lang{padding:9px 13px;font-family:var(--mono);font-size:11px;color:var(--dim);cursor:pointer;text-decoration:none;transition:color var(--t1)}
#lang:hover{color:var(--txt)}
#menuBtn{display:none;padding:9px 12px;color:var(--amber);background:none;border:none;cursor:pointer;line-height:0;transition:all var(--t1)}
#menuBtn.glass{border:1px solid var(--on-line)}
#top.open #menuBtn{background:var(--amber);color:var(--bg);border-color:var(--amber)}
/* mobile: brand + ☰; the menu opens as ONE glass sheet (nav, search, EN)
   over a scrim — tap the scrim to close */
@media (max-width:720px){
  #top{top:calc(10px + var(--sat));left:10px;right:10px;gap:8px}
  #brand{padding:9px 13px;font-size:14px}
  #nav,#lang,#search{display:none}
  #menuBtn{display:inline-block;margin-left:auto}
  #spacer{display:none}
  #top.open{pointer-events:auto}
  #top::before{content:'';position:fixed;inset:0;background:rgba(15,16,18,.6);opacity:0;pointer-events:none;transition:opacity var(--t2);z-index:-1}
  #top.open::before{opacity:1;pointer-events:auto}
  #top.open>#brand,#top.open>#menuBtn{position:relative;z-index:1}
  #menuSheet{display:none}
  #top.open #menuSheet{display:flex;flex-direction:column;gap:6px;position:absolute;top:calc(100% + 8px);left:0;right:0;padding:8px;animation:pop var(--t2)}
  #top.open #nav,#top.open #search,#top.open #lang{display:flex;background:none;border:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0}
  #top.open #nav{flex-direction:column;gap:2px;padding:0}
  #top.open #nav a{padding:11px 12px;font-size:15px;border-radius:8px}
  #top.open #search{border-top:1px solid var(--line);padding:12px 12px 8px;width:auto}
  #top.open #lang{align-self:flex-start;padding:8px 12px}
  @keyframes pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
}