:root {
  --kabu-safe-top:var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --kabu-safe-bottom:var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --kabu-safe-left:var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
  --kabu-safe-right:var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
}
.index-card { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; align-items:start; min-width:0; min-height:220px; }
.index-copy { display:grid; gap:9px; min-width:0; }
.index-card h3 { margin:0; }
.index-values { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; }
.index-card .index-values>b { margin:0; font-size:1.5rem; white-space:nowrap; }
.index-card .index-time { display:block; font-size:11px; line-height:1.5; letter-spacing:0; font-weight:400; overflow-wrap:anywhere; }
.index-card .session-badge { margin:0; }
.index-card>svg { width:100%; height:64px; }
.bottom-nav button { touch-action:manipulation; cursor:pointer; }
.bottom-nav button svg { pointer-events:none; }
@media(max-width:900px) {
  .index-strip { display:grid; grid-template-columns:minmax(0,1fr); overflow:visible; margin:0 0 18px; padding:0; scroll-snap-type:none; }
  .index-card { width:100%; min-width:0; max-width:100%; min-height:0; padding:18px; }
  .index-card>svg { height:60px; }
  main { padding-top:calc(22px + var(--kabu-safe-top)); padding-bottom:calc(94px + var(--kabu-safe-bottom)); }
  .bottom-nav {
    z-index:45; bottom:0; min-height:64px;
    padding:8px max(6px, var(--kabu-safe-right)) calc(8px + var(--kabu-safe-bottom)) max(6px, var(--kabu-safe-left));
  }
  .bottom-nav button { min-height:48px; min-width:0; padding:5px 2px; }
  .modal { padding-top:max(12px, var(--kabu-safe-top)); padding-bottom:max(12px, var(--kabu-safe-bottom)); }
  .toast { bottom:calc(84px + var(--kabu-safe-bottom)); }
}