Add progressive CSS enhancements to Sentinel dashboard

infra/debug-dashboard/static/app.css

@@ -44,3 +44,25 @@ body { background:radial-gradient(circle at 8% -10%,rgba(102,176,225,.24),transp
 .page-intro { max-width:770px; margin:10px 0 30px; }.page-intro h1 { margin:10px 0 13px; color:var(--navy); font-size:clamp(38px,5vw,62px); line-height:.94; letter-spacing:-.07em; }.page-intro h1 em { color:var(--green); font-style:normal; }.page-intro p { max-width:600px; margin:0; color:var(--muted); font-size:15px; line-height:1.65; }.reports-panel { margin-top:0; }
 .sensor-coverage-panel { margin-top:8px; }.sensor-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:11px; }.sensor-card { min-height:160px; display:grid; align-content:start; gap:10px; padding:17px; border:1px solid #dbe7ee; border-radius:11px; background:linear-gradient(145deg,#fff,#f6fafc); }.sensor-card > div { display:flex; align-items:center; gap:7px; }.sensor-card strong { color:#17354a; font-size:14px; line-height:1.3; }.sensor-card p { margin:0; color:#607b8e; font-size:12px; line-height:1.55; }.sensor-dot { width:8px; height:8px; border-radius:50%; background:#6abf90; box-shadow:0 0 0 4px rgba(106,191,144,.13); }.sensor-state { color:#5d788a; font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }.sensor-card.disabled { background:#f4f6f7; }.sensor-card.disabled .sensor-dot,.sensor-card.not-installed .sensor-dot { background:#9caeba; box-shadow:0 0 0 4px rgba(156,174,186,.13); }.sensor-card.query-failed { border-color:#f2c59c; background:#fff8ef; }.sensor-card.query-failed .sensor-dot,.sensor-card.truncated .sensor-dot { background:#e9a64d; box-shadow:0 0 0 4px rgba(233,166,77,.13); }.sensor-empty { width:100%; padding:24px; border:1px dashed #b8cbd7; border-radius:10px; color:#607b8e; text-align:center; font-size:13px; }.ransomware-panel + .sensor-coverage-panel { margin-top:8px; }
 @media (max-width:850px) { .dashboard-hero { grid-template-columns:1fr; min-height:0; padding:28px 24px; }.dashboard-status { align-self:auto; }.quick-metrics { grid-template-columns:repeat(2,1fr); }.quick-metrics article { min-height:102px; }.page-intro { margin-top:4px; }.sensor-grid { grid-template-columns:1fr; } }
+
+@layer enhancements {
+  :where(a,button,input,select,summary):focus-visible { outline:3px solid var(--lime); outline:3px solid color-mix(in srgb,var(--lime) 72%,white); outline-offset:3px; }
+  :where(a,button) { -webkit-tap-highlight-color:transparent; }
+  .quick-metrics,.sensor-grid { container-type:inline-size; }
+  .dashboard-hero { isolation:isolate; }
+  .dashboard-hero::after { position:absolute; z-index:-1; inset:auto -8% -54% auto; width:300px; aspect-ratio:1; border-radius:999px; background:radial-gradient(circle,rgba(184,227,106,.15),transparent 68%); content:''; filter:blur(3px); }
+  .quick-metrics article,.organization-card,.sensor-card { position:relative; overflow:hidden; }
+  .quick-metrics article::before,.sensor-card::before { position:absolute; inset:0; opacity:0; background:linear-gradient(120deg,transparent 18%,rgba(255,255,255,.65),transparent 82%); content:''; transform:translateX(-110%); transition:transform .55s ease,opacity .2s ease; }
+  @media (hover:hover) { .quick-metrics article:hover::before,.sensor-card:hover::before { opacity:1; transform:translateX(110%); }.quick-metrics article:hover { border-color:color-mix(in srgb,var(--blue) 42%,var(--line)); transform:translateY(-3px); box-shadow:0 18px 34px rgba(30,68,94,.12); }.sensor-card:hover { border-color:color-mix(in srgb,var(--blue) 34%,var(--line)); transform:translateY(-2px); box-shadow:0 14px 28px rgba(30,68,94,.09); } }
+  .quick-metrics article,.sensor-card { transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease,border-color .22s ease; }
+  .dashboard-hero,.quick-metrics article,.panel { animation:sentinel-rise .55s cubic-bezier(.2,.8,.2,1) both; }
+  .quick-metrics article:nth-child(2),.panel:nth-of-type(2) { animation-delay:60ms; }.quick-metrics article:nth-child(3),.panel:nth-of-type(3) { animation-delay:120ms; }.quick-metrics article:nth-child(4),.panel:nth-of-type(4) { animation-delay:180ms; }
+  @container (max-width:520px) { .sensor-card { min-height:0; grid-template-columns:auto 1fr; column-gap:12px; }.sensor-card > div { grid-column:1 / -1; }.sensor-card p { grid-column:1 / -1; } }
+  @supports (backdrop-filter:blur(1px)) { .panel { background:color-mix(in srgb,var(--panel) 90%,transparent); backdrop-filter:blur(10px); }.quick-metrics article { background:color-mix(in srgb,white 82%,transparent); backdrop-filter:blur(12px); } }
+  @supports not (backdrop-filter:blur(1px)) { .masthead { background:#0c2438; } }
+  @supports selector(body:has(.dashboard-hero.critical)) { body:has(.dashboard-hero.critical) .masthead { border-bottom-color:color-mix(in srgb,var(--red) 52%,#21445f); } body:has(.dashboard-hero.warning) .masthead { border-bottom-color:color-mix(in srgb,var(--amber) 55%,#21445f); } }
+  @media (prefers-contrast:more) { .panel,.quick-metrics article,.sensor-card { border-width:2px; }.state { border:1px solid currentColor; } }
+  @media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
+}
+
+@keyframes sentinel-rise { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }