/* V4 wearing the Edge design system.
   Scoped to #root: edge.css owns the chrome around it and uses some of the same
   token names for different things (--muted is text here, a surface there). */
#root{
  --background:#ffffff; --foreground:#101114;
  /* Cards sit ON the ground, they do not match it: white on white erased them. */
  --card:#f7f9fc;       --card-foreground:#101114;
  --popover:#ffffff;    --popover-foreground:#101114;
  --primary:#154cff;    --primary-foreground:#ffffff;
  --secondary:#f1f4fa;  --secondary-foreground:#101114;
  --muted:#eef2f8;      --muted-foreground:#596477;
  --accent:#ecf3ff;     --accent-foreground:#101114;
  --border:#e3e6ec;     --input:#cfdaea;  --ring:#154cff;
  --radius:10px;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) #root{
    --background:#161616; --foreground:#ecedee;
    --card:#1b1f27;       --card-foreground:#ecedee;
    --popover:#13171e;    --popover-foreground:#ecedee;
    --primary:#6d91ff;    --primary-foreground:#090b10;
    --secondary:#1b1f27;  --secondary-foreground:#ecedee;
    --muted:#212630;      --muted-foreground:#9a9da4;
    --accent:#121b2b;     --accent-foreground:#ecedee;
    --border:#27292f;     --input:#2a333f;  --ring:#6d91ff;
  }
}
:root[data-theme="dark"] #root{
  --background:#161616; --foreground:#ecedee;
  --card:#1b1f27;       --card-foreground:#ecedee;
  --popover:#13171e;    --popover-foreground:#ecedee;
  --primary:#6d91ff;    --primary-foreground:#090b10;
  --secondary:#1b1f27;  --secondary-foreground:#ecedee;
  --muted:#212630;      --muted-foreground:#9a9da4;
  --accent:#121b2b;     --accent-foreground:#ecedee;
  --border:#27292f;     --input:#2a333f;  --ring:#6d91ff;
}

/* Inter, not Geist: one typeface across the site. */
#root, #root *{font-family:inherit}
#root .font-mono, #root code, #root pre{
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace}

/* edge.css colours every <a> for the chrome. Inside the app, Tailwind decides. */
#root a, #root a:hover{color:inherit}

/* Hide only V4's own site nav and footer. The page's own <header> carries the
   section heading and must stay: a broader selector took both. */
#root header.z-40{display:none!important}
#root footer.edge-footer{display:none!important}

/* The app no longer paints the page ground; the shell does. */
#root > div{background:transparent!important;min-height:0!important}
body{background:var(--paper)}
#root .mx-auto{max-width:min(1180px,100%)}
/* The benchmark table is wider than the column it sits in, so its right-hand
   values were clipped behind a fade. Give it its own scroller. */
#root table{width:max-content;min-width:100%}
#root table th,#root table td{white-space:nowrap}
#root div:has(> table){overflow-x:auto;-webkit-overflow-scrolling:touch}
#root .overflow-hidden:has(table){overflow-x:auto}

/* V4 fades the secondary table columns to about 7% contrast, which makes the
   metric, score and delta unreadable. They are the point of the table. */
#root table td,#root table th{opacity:1!important;color:var(--foreground)!important}
#root table td.text-muted-foreground,#root table th{color:var(--muted-foreground)!important}
#root [class*="opacity-"] table,#root table [class*="opacity-"]{opacity:1!important}

/* The shell header and footer belong to edge.css, but the brand word inherits
   from the app's ground here, so pin it. */
.edge-brand{color:var(--ink)}
.edge-footer .edge-brand{color:var(--ink)}

/* Same mobile nav behaviour as every other page. */
@media (max-width:620px){
  .edge-nav{flex-wrap:wrap;height:auto;row-gap:8px;padding-block:12px}
  .edge-nav-links{flex-wrap:wrap;row-gap:6px;column-gap:14px;justify-content:flex-start}
  .edge-nav-links a{font-size:12px}
  #root .mx-auto{padding-left:16px;padding-right:16px}
  #root [class*="grid-cols-3"],#root [class*="grid-cols-2"]{grid-template-columns:1fr!important}
}

/* STYLE-01: preserve the filled action’s inverse foreground after link reset. */
#root a.bg-primary{color:var(--primary-foreground)}
#root a.bg-primary:hover{color:var(--primary-foreground);background:var(--primary);box-shadow:0 0 0 2px var(--ring)}