/* One set of metric cards for indices, projects and servers. */
.mobile-navigation,.mobile-navigation-backdrop,.mobile-search-panel,.metrics-pagination{display:none}
.mobile-edge-fade{-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--menu-fade-left,0px),#000 calc(100% - var(--menu-fade-right,0px)),transparent);mask-image:linear-gradient(to right,transparent,#000 var(--menu-fade-left,0px),#000 calc(100% - var(--menu-fade-right,0px)),transparent)}
.metrics-carousel{min-width:0}
/* SSR slides are layout-neutral on desktop, before the controller flattens them. */
.metrics-slide{display:contents}
@media(min-width:801px){
  .metrics-carousel .stat-card{order:var(--metric-order,0)}
  .stats-grid:has(>[data-empty="true"])>:where(.metrics-slide)>.stat-card{flex:1 1 190px;grid-column:auto;grid-row:auto}
  .stats-grid:has(>[data-empty="true"])>:where(.metrics-slide)>.record-card{flex:2 1 290px}
}

.project-statistics{margin-top:0}
.project-statistics:has(.metrics-carousel[data-empty="true"]){display:none}
.stats-grid.project-metric-grid{display:flex;flex-wrap:wrap}
.stats-grid.project-metric-grid .stat-card{flex:1 1 180px;min-width:0}
.stats-grid.project-metric-grid .record-card{flex:2.2 1 370px}
.project-metric-grid .stat-card>.stat-caption{display:block;margin-top:var(--space-6)}

@media(max-width:800px){
  :root{--mobile-content-inset:20px}
  html{scroll-padding-bottom:24px}
  html:has(.mobile-navigation){scroll-padding-bottom:100px}
  body{padding-bottom:0}
  .dashboard .hero{padding-bottom:var(--space-8)}
  .project-dashboard .hero{padding-bottom:var(--space-16)}
  .project-overview{row-gap:var(--space-16)}
  .breadcrumbs{margin-bottom:18px}

  /* A native scroll container keeps vertical page gestures and live refresh stable. */
  .metrics-carousel .stats-grid.metrics-track{display:flex;flex-wrap:nowrap;gap:var(--space-12);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;align-items:stretch;padding:0;margin-top:0;border-radius:20px;isolation:isolate}
  .metrics-track::-webkit-scrollbar{display:none}
  .metrics-track:focus-visible{outline:2px solid var(--color-accent);outline-offset:5px}
  .metrics-slide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-10);flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;align-items:stretch}
  .metrics-slide>.stat-card{grid-column:auto;grid-row:auto;min-width:0;min-height:124px;padding:var(--panel-padding-compact);border-radius:20px;display:flex;flex-direction:column;justify-content:center;gap:0}
  .metrics-slide>.stat-card:only-child{grid-column:1/-1}
  .metrics-slide>.stat-card .stat-value{flex-wrap:wrap;gap:5px 7px;margin:var(--space-6) 0 var(--space-4)}
  .metrics-slide>.stat-card .stat-value>strong{font-size:var(--text-value);line-height:1.2}
  .metrics-slide .stat-label{font-size:var(--text-small);line-height:1.4}
  .metrics-slide .stat-caption{font-size:var(--text-small);line-height:1.45;margin-left:0}
  .metrics-slide #hero-change:not(:empty){flex-basis:100%;margin-top:2px}
  .metrics-slide .online-change{font-size:var(--text-small)}
  .metrics-slide>.record-card{--record-cell-padding:12px;padding:var(--panel-padding-compact) 0;min-height:124px}
  .metrics-slide .record-breakdown{width:100%}
  .metrics-slide .record-breakdown>div{justify-content:space-between}
  .metrics-slide .record-breakdown .stat-label{min-height:34px}
  .metrics-slide .record-breakdown .stat-caption{min-height:32px}
  .metrics-slide .record-breakdown strong{font-size:var(--text-value);margin:5px 0;white-space:nowrap}
  .metrics-slide>.leader-card{flex-direction:row;align-items:center;gap:9px;padding:var(--panel-padding-compact)}
  .metrics-slide .domination-toggle{width:32px;height:32px;flex-basis:32px}
  .metrics-slide .domination-icon{width:32px;height:32px}
  .metrics-slide .domination-copy{min-width:0}
  .metrics-slide .domination-copy .leader-name{display:block;font-size:var(--text-table);line-height:1.4;margin:var(--space-6) 0 var(--space-4);white-space:nowrap}
  .metrics-slide .domination-copy .stat-caption{display:block;font-size:var(--text-small)}
  .metrics-pagination:not([hidden]){display:flex;justify-content:center;align-items:center;gap:0;height:24px;margin-top:var(--space-6)}
  .metrics-pagination button{display:grid;place-items:center;width:30px;height:24px;padding:0;background:none;border:0;border-radius:12px}
  .metrics-pagination button:after{content:"";width:5px;height:5px;border-radius:6px;background:var(--color-accent);transition:width var(--motion-standard),background-color var(--motion-standard)}
  .metrics-pagination button[aria-current]:after{width:18px;background:var(--color-accent)}
  .metrics-pagination button:focus-visible{outline:2px solid var(--color-accent);outline-offset:0}

  .mobile-search-panel:not([hidden]){position:fixed;z-index:52;left:var(--mobile-content-inset);right:var(--mobile-content-inset);bottom:calc(80px + env(safe-area-inset-bottom,0px) + var(--search-keyboard-offset,0px));display:flex;align-items:center;gap:var(--space-8);padding:var(--space-8);border-radius:22px}
  .mobile-search-panel>[data-mobile-search-field]{flex:1;min-width:0}
  .mobile-search-panel .search{display:flex;width:100%;max-width:none;height:44px;padding:var(--space-8);background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .mobile-search-panel .search input{font-size:16px}
  .mobile-search-panel .search kbd{display:none}
  .mobile-search-panel>button{min-height:44px;padding:var(--space-8);color:var(--color-accent-text);background:color-mix(in srgb, var(--color-accent) 9.4%, transparent);border-radius:14px;font-size:12px}
  .mobile-search-panel:focus-within{border-color:color-mix(in srgb, var(--color-accent) 43.9%, transparent)}

  /* Browser chrome changes safe-area-inset-bottom on iOS. Keep a fixed visual
     gap in a normal tab instead of adding that changing inset to the dock. */
  .mobile-navigation,.mobile-navigation-backdrop{--dock-item-height:48px;--dock-padding:4px;--dock-offset:12px;--dock-edge:12px;--dock-duration:.44s;--dock-ease:cubic-bezier(.22,.8,.24,1)}
  .mobile-navigation{position:fixed;z-index:45;bottom:var(--dock-offset);left:50%;transform:translateX(-50%);display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:3px;width:calc(100% - 2 * var(--dock-edge));padding:var(--dock-padding);border-radius:30px;border-color:color-mix(in srgb, var(--color-accent) 16.1%, transparent);box-shadow:inset 0 1px 1px color-mix(in srgb, var(--color-text) 9.4%, transparent),0 10px 35px color-mix(in srgb, var(--color-bg) 33.3%, transparent);transition:width var(--dock-duration) var(--dock-ease),padding var(--dock-duration) var(--dock-ease),border-radius var(--dock-duration) var(--dock-ease)}
  .mobile-navigation>:is(a,button){position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:var(--dock-item-height);padding:var(--space-6) 3px;border-radius:26px;color:var(--color-muted);background:none;font-size:10px;font-weight:500;line-height:1.2;white-space:nowrap;transition:background var(--motion-standard),color var(--motion-standard),min-height var(--dock-duration) var(--dock-ease),gap var(--dock-duration) var(--dock-ease)}
  .mobile-navigation>:is(a,button)>svg{display:block;width:21px;height:21px;flex:none;transition:transform var(--dock-duration) var(--dock-ease)}
  .mobile-navigation>:is(a,button)>span{max-height:12px;opacity:1;overflow:hidden;transform:translateY(0);transition:max-height var(--dock-duration) var(--dock-ease),opacity .22s ease .08s,transform var(--dock-duration) var(--dock-ease)}
  .mobile-navigation[data-compact="true"],.mobile-navigation[data-compact="true"]+.mobile-navigation-backdrop{--dock-item-height:44px}
  .mobile-navigation[data-compact="true"]{width:min(248px,calc(100% - 2 * var(--dock-edge)))}
  .mobile-navigation[data-compact="true"]>:is(a,button){gap:0}
  .mobile-navigation[data-compact="true"]>:is(a,button)>span{max-height:0;opacity:0;transform:translateY(5px);transition-delay:0s}
  .mobile-navigation[data-compact="true"]>:is(a,button)>svg{transform:scale(.96)}
  .mobile-navigation>a[aria-current],.mobile-navigation>button[aria-expanded="true"],.mobile-navigation>button[data-search-active="true"]{color:var(--color-accent-text);background:linear-gradient(145deg,color-mix(in srgb, var(--color-accent) 17.3%, transparent),color-mix(in srgb, var(--color-accent) 7.1%, transparent));box-shadow:inset 0 1px 0 color-mix(in srgb, var(--color-text) 4.3%, transparent)}
  .mobile-navigation>:is(a,button):focus-visible{outline:2px solid var(--color-accent);outline-offset:0}
  /* Two masked passes retain the progressive fade without four overlapping filters. */
  .mobile-navigation-backdrop{position:fixed;z-index:44;inset:auto 0 0;display:block;height:calc(var(--dock-offset) + var(--dock-padding) + 1px + var(--dock-item-height) / 2);pointer-events:none;transition:height var(--dock-duration) var(--dock-ease)}
  .mobile-navigation-backdrop>span{position:absolute;inset:0;pointer-events:none;-webkit-backdrop-filter:blur(var(--dock-blur));backdrop-filter:blur(var(--dock-blur));-webkit-mask-image:var(--dock-mask);mask-image:var(--dock-mask)}
  .mobile-navigation-backdrop>span:nth-child(1){--dock-blur:4px;--dock-mask:linear-gradient(to bottom,transparent,#000 55%)}
  .mobile-navigation-backdrop>span:nth-child(2){--dock-blur:14px;--dock-mask:linear-gradient(to bottom,transparent 30%,#000)}
  .mobile-navigation-backdrop:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,color-mix(in srgb, var(--color-bg) 0%, transparent),color-mix(in srgb, var(--color-bg) 22%, transparent) 50%,color-mix(in srgb, var(--color-bg) 78%, transparent))}
  body:has(>.mobile-navigation) .toast{bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  /* Reserve dock space inside the footer so its background reaches the edge. */
  body:has(>.mobile-navigation) .site-footer{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}
  #about{scroll-margin-top:120px}
}
/* Installed apps have no browser toolbar protecting the home indicator. */
@media(max-width:800px) and (display-mode:standalone){
  .mobile-navigation,.mobile-navigation-backdrop{--dock-offset:max(12px,env(safe-area-inset-bottom,0px));--dock-edge:max(12px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px))}
}
@media(max-width:680px){:root{--mobile-content-inset:16px}}
@media(max-width:359px){
  .mobile-navigation>:is(a,button)>span{font-size:9px}
  .metrics-slide>.stat-card{padding-inline:var(--panel-padding-compact)}
  .metrics-slide>.record-card{--record-cell-padding:10px;padding-inline:0}
  .metrics-slide>.leader-card{padding-inline:var(--space-12);gap:var(--space-6)}
  .metrics-slide .domination-toggle,.metrics-slide .domination-icon{width:27px;height:27px;flex-basis:27px}
  .metrics-slide .stat-label,.metrics-slide .domination-copy .leader-name{font-size:var(--text-table)}
  .metrics-slide .stat-caption,.metrics-slide .domination-copy .stat-caption{font-size:var(--text-small)}
}
@media(prefers-reduced-motion:reduce){.metrics-pagination button:after,.mobile-navigation,.mobile-navigation-backdrop,.mobile-navigation>:is(a,button),.mobile-navigation>:is(a,button)>span,.mobile-navigation>:is(a,button)>svg{transition:none}}
@media(prefers-reduced-transparency:reduce){.mobile-navigation-backdrop{display:none}}

/* Index requests leave the shell in place; only the requested item signals work. */
@keyframes index-pending{50%{opacity:1}}