/* v4: light-mode contrast and existing-badge reuse for curated cards.
   Keep Safari chrome handling, liquid rails and motion untouched. */

html[data-theme="light"]{
  --light-card-ink:#252a33;
  --light-card-copy:#525b68;
  --light-card-muted:#6f7988;
  --light-card-line:rgba(54,72,101,.10);
  --light-card-shadow:0 12px 30px rgba(34,52,82,.065),inset 0 1px 0 rgba(255,255,255,.82);
}

/* style-24 neutralized the former dark guide-key surface without changing the
   original white typography. Restore a complete light-mode color system. */
html[data-theme="light"] .guide-key{
  background:
    linear-gradient(180deg,rgba(248,250,253,.98),rgba(242,246,251,.96))!important;
  color:var(--light-card-ink)!important;
  border:1px solid var(--light-card-line)!important;
  box-shadow:var(--light-card-shadow)!important;
}
html[data-theme="light"] .guide-key b,
html[data-theme="light"] .guide-key strong{
  color:#687487!important;
}
html[data-theme="light"] .guide-key .guide-key__text,
html[data-theme="light"] .guide-key .key-flow__item{
  color:var(--light-card-ink)!important;
}
html[data-theme="light"] .guide-key>span:not(.key-flow),
html[data-theme="light"] .guide-key p{
  color:var(--light-card-copy)!important;
}
html[data-theme="light"] .guide-key .key-flow__arrow{
  color:#929cab!important;
}

/* Soft callouts should remain quieter than key callouts but still read as a
   deliberate card instead of a washed-out patch on a white page. */
html[data-theme="light"] .guide-key--soft{
  background:rgba(247,249,252,.92)!important;
  color:var(--light-card-ink)!important;
  border-color:rgba(54,72,101,.085)!important;
  box-shadow:0 8px 22px rgba(34,52,82,.04),inset 0 1px 0 rgba(255,255,255,.78)!important;
}
html[data-theme="light"] .guide-key--soft b{
  color:#6d7684!important;
}
html[data-theme="light"] .guide-key--soft .guide-key__text,
html[data-theme="light"] .guide-key--soft .key-flow__item{
  color:#303640!important;
}
html[data-theme="light"] .guide-key--soft>span:not(.key-flow){
  color:#626b78!important;
}

/* Regular callouts and compact metric cards need a visible edge on the white
   canvas, but not the heavy dark-mode elevation. */
html[data-theme="light"] .callout-card{
  background:rgba(249,250,252,.96)!important;
  border-color:rgba(48,65,94,.09)!important;
  box-shadow:0 10px 26px rgba(36,50,77,.05),inset 0 1px 0 rgba(255,255,255,.88)!important;
}
html[data-theme="light"] .callout-card strong{
  color:#252a31!important;
}
html[data-theme="light"] .callout-card p{
  color:#4e5662!important;
}
html[data-theme="light"] .metric-card{
  border:1px solid rgba(48,65,94,.055)!important;
  background:#f5f7fa!important;
}

/* Preserve the existing liquid navigation language; only keep inactive labels
   comfortably readable against the very bright rail. */
html[data-theme="light"] .nav-chip:not(.is-active),
html[data-theme="light"] .collection-tab:not(.is-active),
html[data-theme="light"] .theme-choice button:not(.is-active){
  color:#596270!important;
}

/* --------------------------------------------------------------------------
   Curated reading cards.
   Image-source labels need their own image-safe treatment, but content tags
   deliberately reuse the same badge language already used in gear rows.
   -------------------------------------------------------------------------- */
.curated-card .curated-platform{
  min-height:31px!important;
  padding:0 11px!important;
  display:inline-flex!important;
  align-items:center!important;
  border:1px solid rgba(255,255,255,.34)!important;
  background:rgba(20,24,31,.91)!important;
  color:#fff!important;
  box-shadow:0 6px 17px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.18)!important;
  -webkit-backdrop-filter:blur(16px) saturate(130%)!important;
  backdrop-filter:blur(16px) saturate(130%)!important;
  font-weight:780!important;
  text-shadow:0 1px 2px rgba(0,0,0,.28)!important;
}

html[data-theme="light"] .curated-card .curated-tags>span{
  display:inline-block!important;
  padding:.34rem .5rem!important;
  border:0!important;
  border-radius:7px!important;
  background:var(--grouped)!important;
  color:#55555a!important;
  box-shadow:none!important;
  font-size:12px!important;
  font-weight:400!important;
  line-height:1.2!important;
}

html[data-theme="dark"] .curated-card .curated-tags>span{
  display:inline-block!important;
  padding:.34rem .5rem!important;
  border:1px solid rgba(255,255,255,.055)!important;
  border-radius:7px!important;
  background:var(--v36-dark-surface-3,#20252d)!important;
  color:#bcc4cf!important;
  box-shadow:none!important;
  font-size:12px!important;
  font-weight:400!important;
  line-height:1.2!important;
}