/* Navigation */
.navigation  {
  
  position: fixed;
  
  bottom: 0;
  
  left: 0;
  
  right: 0;
  
  height: calc(var(--nav-height) + env(safe-area-inset-bottom));
  
  background: var(--color-surface);
  
  display: flex;
  
  justify-content: space-around;
  
  align-items: center;
  
  border-top: var(--border-width) solid var(--color-border);
  
  z-index: var(--z-navigation);
  
  padding-bottom: env(safe-area-inset-bottom);
  

}

.navigation button  {
  
  background: transparent;
  
  border: none;
  
  color: var(--color-text-secondary);
  
  font: inherit;
  
  font-size: var(--text-sm);
  
  display: flex;
  
  flex-direction: column;
  
  align-items: center;
  
  justify-content: center;
  
  min-height: var(--tap-min);
  
  min-width: var(--tap-min);
  
  cursor: pointer;
  
  padding: 0 var(--space-2);
  

}

.navigation button[aria-current="page"]  {
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-full);
}

@media (min-width: 768px)  {
  
  .navigation  {
  
    position: static;
  
    height: auto;
  
    margin-left: auto;
  
    padding: var(--space-0);
  
    border: var(--space-0);
  
    background: transparent;
  
    gap: var(--space-1);
  
    justify-content: normal;
  
  
}

  .navigation button  {
  
    font-size: var(--text-base);
  
    flex-direction: row;
  
    height: auto;
  
    border-radius: var(--radius-full);
  
    padding: var(--space-2) var(--space-4);
  
  
}

  .navigation button[aria-current="page"]  {
  
    font-weight: normal;
  
  
}

}


/* WeatherDay */
.weather  {
  
  display: grid;
  
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  
  gap: var(--space-2);
  

}

.wday  {
  
  padding: var(--space-3) var(--space-4);
  
  border-radius: var(--radius-card);
  
  background: var(--color-info-soft);
  
  display: flex;
  
  flex-direction: column;
  

}

.wday.warning  {
  
  background: var(--color-warning-soft);
  
  color: var(--color-warning);
  

}

.wday .date  {
  
  font-size: var(--text-sm);
  

}

.wday .desc  {
  
  font-size: var(--text-lg);
  
  font-weight: var(--weight-medium);
  
  margin: var(--space-1) 0;
  

}

.wday .temp  {
  
  font-size: var(--text-sm);
  

}

/* Pill */
.pick  {
  
  border: var(--border-width) solid var(--color-border);
  
  background: var(--color-surface);
  
  padding: 0 var(--space-3);
  
  min-height: var(--tap-min);
  
  border-radius: var(--radius-full);
  
  cursor: pointer;
  
  font: inherit;
  
  font-size: var(--text-sm);
  
  display: inline-flex;
  
  align-items: center;
  
  justify-content: center;
  

}

.pick[aria-pressed="true"]  {
  
  background: var(--color-primary-soft);
  
  border-color: var(--color-primary);
  
  color: var(--color-primary);
  

}


/* Button */
.btn  {
  
  border: none;
  
  background: var(--color-primary);
  
  color: var(--color-on-primary);
  
  padding: 0 var(--space-4);
  
  border-radius: var(--radius-control);
  
  cursor: pointer;
  
  font: inherit;
  
  font-size: var(--text-base);
  
  min-height: var(--tap-min);
  
  display: inline-flex;
  
  align-items: center;
  
  justify-content: center;
  

}

.btn.secondary  {
  
  background: var(--color-surface);
  
  color: var(--color-text);
  
  border: var(--border-width) solid var(--color-border-strong);
  

}

.btn.ghost  {
  
  background: transparent;
  
  color: var(--color-text);
  
  border: var(--border-width) solid var(--color-border);
  

}

.btn.text  {
  
  background: transparent;
  
  color: var(--color-primary);
  
  padding: 0 var(--space-2);
  

}

.btn.danger  {
  
  color: var(--color-danger);
  

}

.btn.sm  {
  
  min-height: var(--tap-min);
  
  padding: 0 var(--space-3);
  
  font-size: var(--text-sm);
  

}

/* M4: focus, persistent feedback, and announced loading states. */
:where(a, button, input, select, textarea):focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

.persistent-alert {
  position: fixed;
  z-index: var(--z-overlay);
  inset: var(--space-3) var(--space-3) auto;
  max-width: var(--content-max);
  margin: auto;
  padding: var(--space-3) var(--space-4);
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  color: var(--color-danger);
  background: var(--color-danger-soft);
  border: var(--border-width) solid var(--color-danger);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-overlay);
}

.persistent-alert-list {
  margin: var(--space-0);
  padding: var(--space-0);
  list-style: none;
}

.weather-loading {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--color-text-secondary);
}

.closed-notice {
  margin: var(--space-4) var(--space-0);
  padding: var(--space-3);
  /* DESIGN §1: the lime accent is a brand marker, never a warning colour */
  color: var(--color-warning);
  background: var(--color-warning-soft);
  border-radius: var(--radius-control);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

.btn:disabled  {
  
  opacity: 0.45;
  
  cursor: not-allowed;
  

}

/* Forms */
label.f  {
  
  display: block;
  
  font-size: var(--text-sm);
  
  color: var(--color-text-secondary);
  
  margin: var(--space-4) 0 var(--space-2);
  

}

input[type="text"],
textarea,
select  {
  
  width: 100%;
  
  border: var(--border-width) solid var(--color-border-strong);
  
  border-radius: var(--radius-control);
  
  padding: var(--space-2) var(--space-3);
  
  font: inherit;
  
  font-size: var(--text-base);
  
  background: var(--color-surface);
  
  min-height: var(--control-height);
  
  color: var(--color-text);
  

}

textarea  {
  
  min-height: 112px;
  
  resize: vertical;
  

}

/* Segmented */
.segmented  {
  
  display: flex;
  
  background: var(--color-surface-muted);
  
  border-radius: var(--radius-full);
  
  padding: var(--space-1);
  

}

.segmented label  {
  
  flex: 1;
  
  display: flex;
  
  align-items: center;
  
  justify-content: center;
  
  min-height: var(--tap-min);
  
  font-size: var(--text-sm);
  
  color: var(--color-text-secondary);
  
  cursor: pointer;
  
  border-radius: var(--radius-full);
  
  user-select: none;
  

}

.segmented input  {
  
  position: absolute;
  
  opacity: 0;
  
  width: 0;
  
  height: 0;
  

}

.segmented input:focus-visible + label  {
  
  outline: var(--focus-width) solid var(--color-primary);
  
  outline-offset: -2px;
  

}

.segmented input:checked + label  {
  
  background: var(--color-surface);
  
  color: var(--color-text);
  
  box-shadow: var(--shadow-none);
  
  font-weight: var(--weight-medium);
  

}

/* Stepper */
.stepper  {
  
  display: inline-flex;
  
  align-items: center;
  
  border: var(--border-width) solid var(--color-border-strong);
  
  border-radius: var(--radius-control);
  
  overflow: hidden;
  
  height: var(--control-height);
  

}

.stepper button  {
  
  background: var(--color-surface);
  
  border: none;
  
  min-width: var(--tap-min);
  
  min-height: var(--tap-min);
  
  font-size: var(--text-xl);
  
  cursor: pointer;
  
  display: flex;
  
  align-items: center;
  
  justify-content: center;
  
  color: var(--color-text);
  

}

.stepper button:disabled  {
  
  color: var(--color-disabled-text);
  
  cursor: not-allowed;
  

}

.stepper .val  {
  
  min-width: 60px;
  
  text-align: center;
  
  font-size: var(--text-base);
  
  border-left: var(--border-width) solid var(--color-border);
  
  border-right: var(--border-width) solid var(--color-border);
  
  line-height: var(--control-height);
  

}


.stat  {
  
  font-size: var(--text-2xl);
  
  font-weight: var(--weight-bold);
  

}

/* Empty State */
.empty  {
  
  padding: var(--space-6);
  
  text-align: center;
  
  color: var(--color-text-secondary);
  
  border: var(--border-width) dashed var(--color-border);
  
  border-radius: var(--radius-card);
  

}

/* Dialog */
dialog  {
  
  border: none;
  
  background: var(--color-surface);
  
  padding: var(--space-5);
  
  color: var(--color-text);
  

}

@media (max-width: 767px)  {
  
  dialog  {
  
    margin: auto 0 0 0;
  
    width: 100%;
  
    max-width: 100%;
  
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  
    max-height: 85dvh;
  
    box-shadow: var(--shadow-overlay);
  
  
}


}

@media (min-width: 768px)  {
  
  dialog  {
  
    border-radius: var(--radius-sheet);
  
    max-width: var(--dialog-max);
  
    width: calc(100% - var(--space-8));
  
    margin: auto;
  
    box-shadow: var(--shadow-overlay);
  
  
}


}

dialog::backdrop  {
  
  background: var(--color-scrim);
  

}

.bar  {
  
  height: 6px;
  
  background: var(--color-surface-muted);
  
  border-radius: var(--radius-full);
  
  overflow: hidden;
  
  margin-top: var(--space-2);
  

}

.bar i  {
  
  display: block;
  
  height: 100%;
  
  background: var(--color-primary);
  

}

/* GuideCard & TeamCard */
.guide-article .auth  {
  
  font-size: var(--text-sm);
  
  color: var(--color-text-secondary);
  
  margin-top: var(--space-2);
  

}

/* Tag */
.tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  border-radius: var(--radius-tag);
  padding: 2px 6px;
  font-weight: var(--weight-medium);
}
.tag.neutral {
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
}
.tag.category {
  background: var(--color-surface-muted);
  color: var(--color-text);
}
.tag.success {
  background: var(--color-success-soft);
  color: var(--color-success);
}
.tag.warning {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}
.tag.danger {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}
.tag.info {
  background: var(--color-info-soft);
  color: var(--color-info);
}

/* 条件摘要行：可点、可聚焦、点击区不小于 44px */
.summary-item  {
  
  display: inline-flex;
  
  align-items: center;
  
  min-height: var(--tap-min);
  
  padding: var(--space-1) var(--space-2);
  
  border: 0;
  
  background: transparent;
  
  color: var(--color-primary);
  
  font: inherit;
  
  font-weight: var(--weight-medium);
  
  border-radius: var(--radius-control);
  
  cursor: pointer;
  

}

.summary-item:hover  {
  
  background: var(--color-primary-soft);
  

}

.summary-item:focus-visible  {
  
  outline: var(--focus-width) solid var(--color-focus);
  
  outline-offset: var(--focus-offset);
  

}

.summary-sep  {
  
  color: var(--color-text-muted);
  
  padding: 0 var(--space-1);
  

}

/* M2.5-A editorial production views */
.shell  {
  
  max-width: var(--content-max);
  
  margin: auto;
  
  padding: 0 var(--space-4)
    calc(var(--nav-height) + var(--space-8) + env(safe-area-inset-bottom));
  

}

.masthead  {
  
  min-height: var(--action-height);
  
  display: flex;
  
  align-items: center;
  
  gap: var(--space-4);
  
  border-bottom: var(--border-width) solid var(--color-border);
  

}

.wordmark  {
  
  display: flex;
  
  align-items: center;
  
  gap: var(--space-2);
  
  min-height: var(--tap-min);
  
  text-decoration: none;
  
  font-size: var(--text-xl);
  
  font-weight: var(--weight-display);
  
  letter-spacing: var(--tracking-display);
  

}

.brand-symbol  {
  
  width: var(--space-8);
  
  height: var(--space-8);
  
  display: grid;
  
  place-items: center;
  
  border-radius: var(--radius-full);
  
  background: var(--color-accent);
  
  color: var(--color-on-accent);
  

}


.city  {
  
  font-size: var(--text-sm);
  
  color: var(--color-text-secondary);
  

}

#content > section  {
  
  display: none;
  
  padding: var(--space-0);
  

}

#content > section.on  {
  
  display: block;
  

}

.intro  {
  
  display: flex;
  
  justify-content: space-between;
  
  align-items: end;
  
  gap: var(--space-4);
  
  padding: var(--space-10) var(--space-0) var(--space-6);
  

}

.eyebrow  {
  
  font-family: var(--font-mono);
  
  font-size: var(--text-xs);
  
  letter-spacing: var(--tracking-label);
  
  color: var(--color-text-secondary);
  

}

.intro h1  {
  
  margin: var(--space-2) var(--space-0) var(--space-0);
  
  font-size: var(--text-display);
  
  line-height: var(--leading-display);
  
  letter-spacing: var(--tracking-display);
  

}

.intro em  {
  
  font-style: normal;
  
  background: var(--color-accent);
  
  padding: var(--space-0) var(--space-1);
  

}

.issue  {
  
  text-align: right;
  

}

.issue strong  {
  
  display: block;
  
  font-family: var(--font-mono);
  
  font-size: var(--text-number);
  

}

.issue span,
.meta  {
  
  font-size: var(--text-sm);
  
  color: var(--color-text-secondary);
  

}

.condition-bar  {
  
  display: flex;
  
  align-items: center;
  
  justify-content: space-between;
  
  gap: var(--space-4);
  
  flex-wrap: wrap;
  
  padding: var(--space-3) var(--space-0);
  
  border-top: var(--border-width) solid var(--color-border);
  
  border-bottom: var(--border-width) solid var(--color-border);
  

}

.filter  {
  
  min-height: var(--tap-min);
  
  padding: var(--space-2) var(--space-4);
  
  border: var(--border-width) solid var(--color-border-strong);
  
  border-radius: var(--radius-full);
  
  background: var(--color-surface);
  
  color: var(--color-text);
  

}

.weather-inline  {
  
  display: flex;
  
  gap: var(--space-3);
  
  font-size: var(--text-sm);
  
  color: var(--color-text-secondary);
  

}

.section-head  {
  
  display: flex;
  
  justify-content: space-between;
  
  align-items: baseline;
  
  margin: var(--space-8) var(--space-0) var(--space-5);
  

}

.section-head h1,
.section-head h2  {
  
  margin: var(--space-0);
  
  font-size: var(--text-xl);
  

}

.discovery-grid  {
  
  display: grid;
  
  grid-template-columns: minmax(var(--space-0), var(--reading-max)) minmax(
      var(--space-0),
      1fr
    );
  
  gap: var(--space-8);
  

}

.type-cover  {
  
  min-height: var(--media-thumb);
  
  padding: var(--space-3);
  
  border-radius: var(--radius-media);
  
  display: flex;
  
  flex-direction: column;
  
  justify-content: space-between;
  

}

.type-cover strong  {
  
  font-size: var(--text-lg);
  
  line-height: var(--leading-title);
  

}

.hero-cover  {
  
  min-height: var(--action-height);
  

}

.cat-exhibition  {
  
  background: var(--category-exhibition-soft);
  
  color: var(--category-exhibition);
  

}

.cat-market  {
  
  background: var(--category-market-soft);
  
  color: var(--category-market);
  

}

.cat-performance  {
  
  background: var(--category-performance-soft);
  
  color: var(--category-performance);
  

}

.cat-hiking  {
  
  background: var(--category-hiking-soft);
  
  color: var(--category-hiking);
  

}

.cat-sport  {
  
  background: var(--category-sport-soft);
  
  color: var(--category-sport);
  

}

.cat-craft  {
  
  background: var(--category-craft-soft);
  
  color: var(--category-craft);
  

}

.cat-food  {
  
  background: var(--category-food-soft);
  
  color: var(--category-food);
  

}

.feature-body  {
  
  padding: var(--space-5) var(--space-0);
  

}

.tagline,
.card-bottom,
.row-end  {
  
  display: flex;
  
  justify-content: space-between;
  
  align-items: center;
  
  gap: var(--space-3);
  
  flex-wrap: wrap;
  

}

.category  {
  
  font-size: var(--text-sm);
  
  font-weight: var(--weight-semibold);
  
  color: var(--color-primary);
  

}

.feature-title  {
  
  margin: var(--space-2) var(--space-0);
  
  font-size: var(--text-cover);
  
  letter-spacing: var(--tracking-display);
  

}

.reason  {
  
  font-size: var(--text-sm);
  
  font-weight: var(--weight-medium);
  

}

.price  {
  
  font-size: var(--text-xl);
  
  font-weight: var(--weight-bold);
  

}

.price small  {
  
  font-size: var(--text-xs);
  
  font-weight: var(--weight-normal);
  
  color: var(--color-text-secondary);
  

}

.side-list  {
  
  border-top: var(--border-width) solid var(--color-border);
  

}

.event-row  {
  
  display: grid;
  
  grid-template-columns: var(--media-thumb) minmax(var(--space-0), 1fr);
  
  gap: var(--space-4);
  
  padding: var(--space-5) var(--space-0);
  
  border-bottom: var(--border-width) solid var(--color-border);
  

}

.event-row h3  {
  
  margin: var(--space-1) var(--space-0);
  
  font-size: var(--text-lg);
  

}

.event-row a,
.back  {
  
  min-height: var(--tap-min);
  
  display: inline-flex;
  
  align-items: center;
  
  color: var(--color-primary);
  

}

.detail-layout  {
  
  display: grid;
  
  grid-template-columns: minmax(var(--space-0), 1.6fr) minmax(
      var(--space-0),
      1fr
    );
  
  gap: var(--space-8);
  
  max-width: var(--detail-max);
  
  margin: var(--space-8) auto;
  

}

.back  {
  
  margin-top: var(--space-6);
  
  text-decoration: none;
  

}

.lead  {
  
  margin-top: var(--space-5);
  
  color: var(--color-text-secondary);
  

}

.plan-card,
.note-panel  {
  
  padding: var(--space-6);
  
  border: var(--border-width) solid var(--color-border);
  
  border-radius: var(--radius-card);
  
  background: var(--color-surface);
  

}

.plan-card h1  {
  
  font-size: var(--text-xl);
  

}

.facts div  {
  
  padding: var(--space-3) var(--space-0);
  
  border-bottom: var(--border-width) solid var(--color-border);
  

}

.facts dt  {
  
  font-size: var(--text-sm);
  
  color: var(--color-text-secondary);
  

}

.facts dd  {
  
  margin: var(--space-1) var(--space-0) var(--space-0);
  

}

.sheet-head  {
  
  display: flex;
  
  justify-content: space-between;
  
  align-items: center;
  
  gap: var(--space-3);
  

}

.sheet-head h2  {
  
  margin: var(--space-0);
  

}

.sheet-close  {
  
  min-width: var(--tap-min);
  
  min-height: var(--tap-min);
  
  border: var(--border-width) solid var(--color-border);
  
  border-radius: var(--radius-full);
  
  background: var(--color-surface);
  
  color: var(--color-text);
  
  font-size: var(--text-xl);
  

}

.sheet-actions  {
  
  display: flex;
  
  justify-content: flex-end;
  
  gap: var(--space-2);
  
  margin-top: var(--space-5);
  

}

.site-footer  {
  
  padding: var(--space-10) var(--space-0);
  
  font-size: var(--text-sm);
  
  color: var(--color-text-secondary);
  

}

@media (max-width: 767px)  {
  
  .city  {
  
    display: none;
  
  
}

  .navigation  {
  
    margin-left: auto;
  
  
}

  .navigation button  {
  
    padding: var(--space-2);
  
  
}

  .discovery-grid,
  .detail-layout  {
  
    grid-template-columns: minmax(var(--space-0), 1fr);
  
  
}

  .detail-layout  {
  
    margin: var(--space-5) var(--space-0);
  
  
}


}

/* 平板 768–1023：DESIGN §4 发现页 1.3:1。原规则左列固定 reading-max，768 宽时右列被挤到只剩几像素 */
@media (min-width: 768px) and (max-width: 1023px)  {
  
  .discovery-grid  {
  
    grid-template-columns: minmax(var(--space-0), 1.3fr) minmax(
        var(--space-0),
        1fr
      );
  
  
}


}

.skip  {
  
  position: fixed;
  
  top: var(--space-3);
  
  left: var(--space-3);
  
  z-index: var(--z-feedback);
  
  padding: var(--space-2) var(--space-3);
  
  background: var(--color-primary);
  
  color: var(--color-on-primary);
  
  border-radius: var(--radius-control);
  
  transform: translateY(calc(var(--space-12) * -2));
  
  transition: transform var(--motion-fast) var(--ease-standard);
  

}

.skip:focus  {
  
  transform: translateY(var(--space-0));
  

}

.wordmark,
.text-link  {
  
  color: var(--color-primary);
  
  text-decoration: none;
  

}

.activity-cover  {
  
  position: relative;
  
  overflow: hidden;
  
  padding: var(--space-0);
  

}

.activity-cover img  {
  
  width: 100%;
  
  height: 100%;
  
  min-height: inherit;
  
  object-fit: cover;
  

}

.activity-cover.hero-cover  {
  
  aspect-ratio: var(--media-hero-ratio);
  

}

.event-row .activity-cover  {
  
  width: var(--media-thumb);
  
  height: var(--media-thumb);
  

}

.activity-cover .cover-fallback  {
  
  display: none;
  
  min-height: inherit;
  
  padding: var(--space-3);
  
  flex-direction: column;
  
  justify-content: space-between;
  

}

.activity-cover.is-failed .cover-fallback  {
  
  display: flex;
  

}

.activity-cover.is-failed img  {
  
  display: none;
  

}

.photo-caption  {
  
  position: absolute;
  
  right: var(--space-2);
  
  bottom: var(--space-2);
  
  padding: var(--space-1) var(--space-2);
  
  border-radius: var(--radius-tag);
  
  background: var(--color-photo-caption);
  
  color: var(--color-on-primary);
  
  font-size: var(--text-xs);
  

}

.photo-caption-thumb  {
  
  min-width: var(--space-5);
  
  min-height: var(--space-5);
  
  display: grid;
  
  place-items: center;
  
  padding: var(--space-0);
  
  font-size: var(--text-xs);
  
  font-weight: var(--weight-bold);
  

}

.checked-mark  {
  
  margin-left: auto;
  

}

.weather-inline  {
  
  display: grid;
  
  gap: var(--space-2);
  
  flex: 1 1 auto;
  

}

.weather-summary  {
  
  display: flex;
  
  flex-wrap: wrap;
  
  gap: var(--space-3);
  

}

.weather-error,
.weather-risk  {
  
  display: flex;
  
  align-items: center;
  
  gap: var(--space-2);
  
  padding: var(--space-2) var(--space-3);
  
  background: var(--color-warning-soft);
  
  color: var(--color-warning);
  
  border-radius: var(--radius-control);
  

}

.weather-loading  {
  
  color: var(--color-text-secondary);
  

}

.detail-section  {
  
  margin-top: var(--space-6);
  
  padding-top: var(--space-5);
  
  border-top: var(--border-width) solid var(--color-border);
  

}

.detail-section h2,
.guide-snippets h3  {
  
  margin: var(--space-0);
  

}

.reason-list  {
  
  margin: var(--space-3) var(--space-0) var(--space-0);
  
  padding-left: var(--space-5);
  

}

.guide-snippets  {
  
  display: grid;
  
  gap: var(--space-3);
  

}

.guide-snippets article  {
  
  padding: var(--space-3);
  
  background: var(--color-surface-muted);
  
  border-radius: var(--radius-control);
  

}

.guide-snippets p  {
  
  margin: var(--space-2) var(--space-0);
  

}

.detail-actions  {
  
  gap: var(--space-3);
  

}

.page-intro  {
  
  padding: var(--space-10) var(--space-0) var(--space-5);
  

}

.page-intro h1,
.page-intro p  {
  
  margin: var(--space-0);
  

}

.page-intro p  {
  
  color: var(--color-text-secondary);
  

}

@media (max-width: 767px)  {
  
  .intro  {
  
    padding: var(--space-5) var(--space-0) var(--space-3);
  
  
}

  .intro .eyebrow,
  .section-head  {
  
    display: none;
  
  
}

  .condition-bar  {
  
    gap: var(--space-2);
  
    padding: var(--space-2) var(--space-0);
  
  
}

  .filter  {
  
    min-height: var(--tap-min);
  
    padding: var(--space-1) var(--space-3);
  
  
}

  .weather-inline,
  .weather-summary  {
  
    display: flex;
  
    flex-wrap: wrap;
  
    gap: var(--space-2);
  
  
}

  .weather-error,
  .weather-risk,
  .weather-summary span,
  .weather-risk span  {
  
    font-size: var(--text-xs);
  
  
}

  .weather-risk  {
  
    color: var(--color-warning);
  
    padding: var(--space-0);
  
    background: transparent;
  
  
}

  .activity-cover.hero-cover  {
  
    aspect-ratio: var(--media-hero-ratio-mobile);
  
  
}

  .feature-body  {
  
    padding: var(--space-3) var(--space-0);
  
  
}

  .feature-title  {
  
    margin: var(--space-1) var(--space-0);
  
  
}

  .reason  {
  
    margin: var(--space-1) var(--space-0);
  
  
}

  .detail-actions .btn  {
  
    flex: 1;
  
  
}


}

/* M2.5-B Styles */
.team-list {
  display:grid;
  gap:var(--space-4)
}

.team-card {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:var(--space-6);
  padding:var(--space-6);
  background:var(--color-surface);
  border:var(--border-width) solid var(--color-border);
  border-radius:var(--radius-card)
}

.team-card h3 {
  margin:var(--space-2) 0;
  font-size:var(--text-lg)
}

.avatars {
  display:flex;
  gap:var(--space-1);
  margin-top:var(--space-3);
  align-items:center
}

.avatar {
  display:grid;
  place-items:center;
  width:var(--space-8);
  height:var(--space-8);
  border:var(--border-width) solid var(--color-border);
  border-radius:var(--radius-full);
  background:var(--color-surface-muted);
  font-size:var(--text-xs)
}

.team-action {
  text-align:right
}

.team-action strong {
  display:block;
  font-size:var(--text-xl);
  margin-bottom:var(--space-3)
}


.category-strip {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  margin:var(--space-6) 0
}

.category-strip button {
  background:transparent;
  border:var(--border-width) solid var(--color-border-strong);
  border-radius:var(--radius-full);
  min-height:var(--tap-min);
  padding:var(--space-2) var(--space-4);
  color:var(--color-text-secondary);
  font-size:var(--text-sm)
}

.category-strip button[aria-pressed=true] {
  background:var(--color-primary);
  border-color:var(--color-primary);
  color:var(--color-on-primary)
}


.stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-bottom:var(--border-width) solid var(--color-border);
  padding:var(--space-6) 0 var(--space-8);
  margin-bottom:var(--space-8)
}

.stats strong {
  display:block;
  font-size:var(--text-number);
  line-height:var(--leading-title);
  letter-spacing:var(--tracking-display);
  font-variant-numeric:tabular-nums
}

.stats span {
  font-size:var(--text-sm);
  color:var(--color-text-secondary)
}

.stamps {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--space-4);
  padding:var(--space-6);
  background:var(--color-surface-muted);
  border-radius:var(--radius-card)
}

.collection-cell {
  aspect-ratio:1;
  min-height:var(--stamp-size);
  border:var(--border-width) solid var(--color-border-strong);
  border-radius:var(--radius-control);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--space-1);
  color:var(--color-text-secondary)
}

.collection-cell span {
  font:var(--text-xs) var(--font-mono)
}

.collection-cell strong {
  font-size:var(--text-lg)
}

.collection-cell.unlocked {
  border-color:var(--color-primary);
  background:var(--color-accent);
  color:var(--color-on-accent)
}

.journal-entry {
  padding:var(--space-5) 0;
  border-bottom:var(--border-width) solid var(--color-border)
}

.journal-entry h3 {
  font-size:var(--text-lg);
  margin:var(--space-2) 0
}

.journal-entry .note {
  margin-bottom: var(--space-2);
}


.guide-article {
  padding:var(--space-6) 0;
  border-top:var(--border-width) solid var(--color-border)
}

.guide-article h2 {
  font-size:var(--text-xl);
  margin:var(--space-2) 0 var(--space-3)
}

.guide-article p {
  max-width:var(--reading-max);
  color:var(--color-text-secondary)
}

.guide-article .actions {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:var(--space-4)
}

.guide-article .actions .btn {
  flex:initial
}


@media(max-width:767px)  {
  
  .team-card {
  grid-template-columns: 1fr;
  padding:var(--space-4);
  gap:var(--space-3)
}

  .team-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }
  
  .team-action strong {
  margin-bottom: 0;
  font-size:var(--text-lg)
}

  .team-action .btn {
  padding-inline:var(--space-3)
}

  .stamps {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-3)
}

  .stats {
  padding-top:var(--space-2)
}

  .stats strong {
  font-size:var(--text-2xl)
}


}

/* 桌面端收集册一行放下 7 格；原 4 列在 1200px 容器里每格约 270px 见方，过大 */
@media (min-width:1024px) {
  .stamps {
    grid-template-columns:repeat(7,minmax(0,1fr));
  }
}

/* 做成按钮样式的链接不要下划线（DESIGN §5 Button） */
a.btn {
  text-decoration:none;
}

/* M3 onboarding, rainy alternatives, and truthful empty-result actions. */
.onboarding {
  position: fixed;
  inset: var(--space-0);
  z-index: var(--z-overlay);
  display: grid;
  align-items: end;
  background: var(--color-scrim);
}

.onboarding-panel {
  max-height: 85dvh;
  overflow: auto;
  padding: var(--space-6);
  background: var(--color-surface);
  border-radius: var(--radius-sheet) var(--radius-sheet) var(--space-0) var(--space-0);
  box-shadow: var(--shadow-overlay);
}

.onboarding-panel h2 {
  margin: var(--space-2) var(--space-0);
  font-size: var(--text-xl);
}

.onboarding-panel p {
  color: var(--color-text-secondary);
}

.onboarding-panel input {
  width: 100%;
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-3);
  color: var(--color-text);
  font: inherit;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-control);
}

.onboarding-picks {
  margin: var(--space-4) var(--space-0);
}

.onboarding-actions {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.field-error {
  color: var(--color-danger) !important;
}

.rain-group {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  color: var(--color-warning);
  background: var(--color-warning-soft);
  border-radius: var(--radius-control);
}

.rain-group-title {
  margin: var(--space-0);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.rain-list {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
}

.rain-item {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: var(--space-0) var(--space-2);
  color: var(--color-warning);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  border: var(--border-width) solid var(--color-warning);
  border-radius: var(--radius-tag);
}

.rain-item span {
  font-weight: var(--weight-semibold);
}

.empty-results ul {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) var(--space-0) var(--space-0);
  padding: var(--space-0);
  list-style: none;
}

.empty-results li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .onboarding {
    align-items: center;
    justify-items: center;
    padding: var(--space-6);
  }

  .onboarding-panel {
    width: min(100%, var(--dialog-max));
    border-radius: var(--radius-sheet);
  }
}

/* ---------- 作品说明页 about.html ---------- */
.about {
  max-width: var(--reading-max);
  padding: var(--space-8) var(--space-0);
}

.about h1 {
  margin: var(--space-2) var(--space-0) var(--space-4);
  font-size: var(--text-2xl);
  line-height: var(--leading-title);
}

.about-lead {
  font-size: var(--text-lg);
  line-height: var(--leading-body);
}

.about-note {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.about-section {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--color-border);
}

.about-section h2 {
  margin-bottom: var(--space-4);
  font-size: var(--text-xl);
  color: var(--color-text);
}

.about-list div {
  padding: var(--space-3) var(--space-0);
  border-bottom: var(--border-width) solid var(--color-border);
}

.about-list dt {
  font-weight: var(--weight-semibold);
}

.about-list dd {
  margin: var(--space-1) var(--space-0) var(--space-0);
  color: var(--color-text-secondary);
}

.about-steps,
.about-bullets {
  margin: var(--space-0) var(--space-0) var(--space-4);
  padding-left: var(--space-6);
  line-height: var(--leading-body);
}

.about-steps li,
.about-bullets li {
  margin-bottom: var(--space-3);
}

.about-back,
.footer-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  color: var(--color-primary);
}