/* Shared mobile-friendly date selector for Top 100 and Kanal Share.
   A real native date input covers each styled control; this preserves iOS's
   accessibility and picker behavior while normalizing date text/spacing. */
#speedPanelTop100 .filter-grid {
  grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);
}
.share-filter-card .share-filters {
  grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));
}
.speed-date-pair {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  min-width:0;
  width:100%;
  align-items:end;
}
.speed-date-field {
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  min-width:0;
  width:100%;
  cursor:pointer;
}
.speed-date-field-label {
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  line-height:1.35;
  letter-spacing:.02em;
  white-space:nowrap;
}
.speed-date-control {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  width:100%;
  height:49px;
  min-width:0;
  padding:0 11px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel-solid);
  color:var(--text);
  transition:border-color .15s,box-shadow .15s;
}
.speed-date-field:focus-within .speed-date-control {
  border-color:#3993f4;
  box-shadow:0 0 0 2px rgba(57,147,244,.17);
}
.speed-date-display {
  display:block;
  min-width:0;
  overflow:hidden;
  font:750 14px/1.25 system-ui,-apple-system,"Segoe UI",sans-serif;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
  color:var(--text);
  white-space:nowrap;
  pointer-events:none;
}
.speed-date-calendar {
  display:block;
  flex:0 0 16px;
  width:16px;
  height:16px;
  fill:none;
  stroke:var(--muted);
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}
/* The native date control remains enabled and clickable. Only its browser-
   dependent visual treatment is hidden (iOS: '5 Kas 2026' vs desktop). */
.speed-date-control input[type="date"] {
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  opacity:.01!important;
  background:transparent!important;
  color:transparent!important;
  font-size:16px!important;
  cursor:pointer;
  z-index:1;
  -webkit-appearance:none;
  appearance:none;
}
html[data-theme="dark"] .speed-date-control {
  background:var(--panel-solid);
  border-color:var(--line);
  color-scheme:dark;
}
html[data-theme="light"] .speed-date-control {color-scheme:light}
@media(max-width:980px) {
  #speedPanelTop100 .filter-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  #speedPanelTop100 .speed-date-pair {grid-column:1/-1}
  .share-filter-card .share-filters {grid-template-columns:repeat(2,minmax(0,1fr))}
  .share-filter-card .speed-date-pair {grid-column:1/-1}
}
@media(max-width:740px) {
  #speedPanelTop100 .filter-grid {grid-template-columns:minmax(0,1fr)}
  #speedPanelTop100 .speed-date-pair {grid-column:1/-1}
  .share-filter-card .share-filters {grid-template-columns:minmax(0,1fr)}
  .share-filter-card .speed-date-pair {grid-column:1/-1}
}
@media(max-width:355px) {
  .speed-date-pair {gap:8px}
  .speed-date-control {padding:0 8px}
  .speed-date-display {font-size:12px}
  .speed-date-calendar {flex-basis:14px;width:14px;height:14px}
  .speed-date-field-label {font-size:10px;letter-spacing:0}
}