/**
 * Dashboard Rebuild — RC2.5 Sprint 6 presentation polish.
 * Today Outside + Workspace; library Customize; family grouping; calm density.
 * Authority: docs/rebuild-2026/03-dashboard-architecture.md + 07-design-system.md
 */

.wdb-r {
  --wdb-r-ink: var(--wds-text, #eef2f6);
  --wdb-r-muted: var(--wds-text-secondary, rgba(238, 242, 246, 0.78));
  --wdb-r-faint: var(--wds-text-tertiary, rgba(238, 242, 246, 0.62));
  --wdb-r-line: var(--wds-border-subtle, rgba(155, 143, 217, 0.08));
  --wdb-r-line-strong: var(--wds-border, rgba(155, 143, 217, 0.14));
  --wdb-r-panel: var(--wds-elevated, #112038);
  --wdb-r-surface: color-mix(in srgb, var(--wds-surface, #0c1628) 88%, #fff 4%);
  --wdb-r-hover: color-mix(in srgb, var(--wds-elevated, #112038) 92%, var(--wds-accent, #6ea8c9) 8%);
  --wdb-r-accent: var(--wds-accent, #6ea8c9);
  --wdb-r-radius: var(--wds-radius-lg, 14px);
  --wdb-r-radius-md: var(--wds-radius-md, 10px);
  --wdb-r-radius-sm: var(--wds-radius-sm, 6px);
  --wdb-r-pad: 0.85rem 0.95rem 0.8rem;
  --wdb-r-gap: 0.7rem;
  --wdb-r-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 6px 22px rgba(4, 8, 18, 0.32);
  --wdb-r-shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 12px 30px rgba(4, 8, 18, 0.42);
  /* Category presence — atmospheric, luminous (not filled neon) */
  /* Semantic category tokens — luminous identity at normal viewing distance */
  --category-weather: #4da3e0;
  --category-light: #e8a838;
  --category-nature: #8fd14a;
  --category-astronomy: #a78bfa;
  --category-photography: #e879c8;
  --category-water: #2dd4bf;
  --category-hiking: #3d8f5a;
  --category-earth: #d97757;
  --category-alerts: #8b9bb0;
  --category-alerts-active: #ef5350;
  --category-travel: #9bb0c8;
  /* Widget aliases map onto semantic tokens */
  --wdb-r-cat-conditions: var(--category-weather);
  --wdb-r-cat-light: var(--category-light);
  --wdb-r-cat-air: var(--category-nature);
  --wdb-r-cat-wildlife: var(--category-nature);
  --wdb-r-cat-astronomy: var(--category-astronomy);
  --wdb-r-cat-photography: var(--category-photography);
  --wdb-r-cat-rivers: var(--category-water);
  --wdb-r-cat-water: var(--category-water);
  --wdb-r-cat-trails: var(--category-hiking);
  --wdb-r-cat-hiking: var(--category-hiking);
  --wdb-r-cat-flora: var(--category-earth);
  --wdb-r-cat-mushrooms: var(--category-earth);
  --wdb-r-cat-earth: var(--category-earth);
  --wdb-r-cat-alerts: var(--category-alerts);
  --wdb-r-cat-travel: var(--category-travel);
  max-width: 74rem;
  margin: 0 auto;
  padding: var(--wds-space-3, 0.75rem) clamp(0.9rem, 2.8vw, 1.6rem) var(--wds-space-10, 2.5rem);
  color: var(--wdb-r-ink);
  font-family: var(--wds-font-body, Inter, system-ui, sans-serif);
  scroll-behavior: smooth;
}

.wdb-r-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ——— Today Outside: compact premium summary panel ——— */
.wdb-r-today {
  margin: 0 0 var(--wds-space-4, 1rem);
  padding: 0.65rem 1rem 0.7rem;
  border: 1px solid var(--wdb-r-line-strong);
  border-radius: var(--wdb-r-radius);
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--wdb-r-panel) 92%, var(--wdb-r-accent) 8%) 0%,
      var(--wdb-r-surface) 55%,
      var(--wdb-r-panel) 100%
    );
  box-shadow: var(--wdb-r-shadow);
}

.wdb-r-today__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.2rem 0.85rem;
  margin-bottom: 0.4rem;
}

.wdb-r-today__title {
  margin: 0;
  font-family: var(--wds-font-display, "Cormorant Garamond", Georgia, serif);
  font-size: clamp(1.1rem, 1.7vw, 1.3rem);
  font-weight: 500;
  letter-spacing: var(--wds-tracking-tight, -0.03em);
  line-height: var(--wds-leading-tight, 1.12);
  color: var(--wdb-r-ink);
}

.wdb-r-today__meta {
  margin: 0;
  font-size: var(--wds-text-sm, 0.8125rem);
  color: var(--wdb-r-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.15rem;
}

.wdb-r-today__sep {
  opacity: 0.55;
}

.wdb-r-today__body {
  margin: 0;
}

.wdb-r-today__lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
}

.wdb-r-today__lines li {
  margin: 0;
  padding: 0.05rem 0 0.05rem 0.7rem;
  position: relative;
  font-size: var(--wds-text-sm, 0.8125rem);
  line-height: var(--wds-leading-snug, 1.35);
  color: var(--wdb-r-muted);
}

.wdb-r-today__lines li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--wdb-r-accent) 70%, transparent);
}

/* ——— Workspace: dominant field ——— */
.wdb-r-workspace {
  margin-top: var(--wds-space-1, 0.25rem);
}

.wdb-r-workspace__header {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 0.45rem 1.1rem;
  margin-bottom: var(--wds-space-4, 1rem);
}

.wdb-r-workspace__title {
  margin: 0;
  font-family: var(--wds-font-display, "Cormorant Garamond", Georgia, serif);
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  font-weight: 500;
  letter-spacing: var(--wds-tracking-tight, -0.03em);
  line-height: var(--wds-leading-tight, 1.12);
}

.wdb-r-workspace__lede {
  margin: 0.15rem 0 0;
  max-width: 36rem;
  font-size: var(--wds-text-sm, 0.8125rem);
  line-height: var(--wds-leading-normal, 1.55);
  color: var(--wdb-r-muted);
}

.wdb-r-workspace__grid {
  display: flex;
  flex-direction: column;
  gap: var(--wdb-r-gap);
  align-items: stretch;
}

.wdb-r-family {
  display: flex;
  flex-direction: column;
  gap: calc(var(--wdb-r-gap) * 0.65);
  min-width: 0;
  width: 100%;
}

.wdb-r-family__grid {
  display: grid;
  grid-template-columns: repeat(var(--wdb-r-family-cols, 3), minmax(0, 1fr));
  gap: var(--wdb-r-gap);
  align-items: stretch;
  min-width: 0;
  width: 100%;
}

.wdb-r-workspace__grid--animate .wdb-r-widget {
  animation: wdb-r-widget-in 200ms ease;
}

.wdb-r--settling .wdb-r-workspace__grid {
  opacity: 0.94;
}

.wdb-r-workspace__empty {
  margin: 0;
  padding: var(--wds-space-7, 1.75rem) var(--wds-space-4, 1rem);
  text-align: center;
  color: var(--wdb-r-muted);
  border: 1px dashed var(--wdb-r-line-strong);
  border-radius: var(--wdb-r-radius);
  background: color-mix(in srgb, var(--wdb-r-surface) 80%, transparent);
}

.wdb-r-workspace__empty-title {
  margin: 0 0 0.35rem;
  font-family: var(--wds-font-display, "Cormorant Garamond", Georgia, serif);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--wdb-r-ink);
}

.wdb-r-workspace__empty p {
  margin: 0;
  font-size: var(--wds-text-sm, 0.8125rem);
  line-height: var(--wds-leading-normal, 1.55);
}

/* Family grouping — quiet section rhythm without redesign */
.wdb-r-group {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0.15rem 0 0;
  min-height: 1.1rem;
  width: 100%;
}

.wdb-r-group:first-child {
  margin-top: 0;
}

.wdb-r-group__label {
  margin: 0;
  flex: 0 0 auto;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wdb-r-faint);
}

.wdb-r-group::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--wdb-r-line-strong) 0%,
    transparent 100%
  );
}

/* Explicit column preference (1 / 2 / 3) — equal-width family grids */
.wdb-r-workspace__grid[data-columns="1"] .wdb-r-family__grid,
.wdb-r-family__grid[data-cols="1"] {
  grid-template-columns: minmax(0, 1fr);
}

.wdb-r-workspace__grid[data-columns="2"] .wdb-r-family__grid,
.wdb-r-family__grid[data-cols="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wdb-r-workspace__grid[data-columns="3"] .wdb-r-family__grid,
.wdb-r-family__grid[data-cols="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@keyframes wdb-r-widget-in {
  from {
    opacity: 0.45;
    transform: translateY(6px) scale(0.992);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes wdb-r-skeleton-shine {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

@keyframes wdb-r-fade-in {
  from {
    opacity: 0.35;
  }
  to {
    opacity: 1;
  }
}

/* ——— Widgets: equal-width contract (standard / wide / featured) ——— */
.wdb-r-widget {
  grid-column: auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  min-height: 8.35rem;
  padding: var(--wdb-r-pad);
  border: 1px solid var(--wdb-r-line-strong);
  border-radius: var(--wdb-r-radius);
  background: var(--wdb-r-surface);
  box-shadow: var(--wdb-r-shadow);
  content-visibility: auto;
  contain-intrinsic-size: auto 8.35rem;
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease,
    opacity 160ms ease;
}

.wdb-r-widget--favorite {
  border-color: color-mix(in srgb, var(--wdb-r-accent) 40%, var(--wdb-r-line-strong));
}

.wdb-r-widget__body--pending {
  min-height: 3.75rem;
}

.wdb-r-widget[data-lazy="ready"] > .wdb-r-widget__body:not(.wdb-r-widget__body--pending) {
  animation: wdb-r-fade-in 180ms ease;
}

.wdb-r-widget:hover,
.wdb-r-widget:focus-within {
  border-color: color-mix(in srgb, var(--wdb-r-accent) 45%, var(--wdb-r-line-strong));
  background: var(--wdb-r-hover);
  box-shadow: var(--wdb-r-shadow-hover);
  transform: translateY(-1px);
}

/* Size variants — explicit, never accidental half tiles */
.wdb-r-widget--standard,
.wdb-r-widget--sm,
.wdb-r-widget--md {
  grid-column: auto;
  min-width: 0;
  width: 100%;
  max-width: none;
}

.wdb-r-widget--wide,
.wdb-r-widget--lg {
  grid-column: span 2;
  min-height: 9.5rem;
  min-width: 0;
  width: 100%;
  max-width: none;
}

.wdb-r-widget--featured,
.wdb-r-widget--anchor {
  grid-column: 1 / -1;
  min-height: 10rem;
  min-width: 0;
  width: 100%;
  max-width: none;
}

/*
 * 3-column families use a 6-track grid so incomplete rows can fill cleanly:
 * three tiles → span 2 each; one leftover → full; two leftovers → span 3 each.
 */
.wdb-r-family__grid[data-cols="3"],
.wdb-r-workspace__grid[data-columns="3"] .wdb-r-family__grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.wdb-r-family__grid[data-cols="3"] > .wdb-r-widget--standard,
.wdb-r-family__grid[data-cols="3"] > .wdb-r-widget--sm,
.wdb-r-family__grid[data-cols="3"] > .wdb-r-widget--md,
.wdb-r-workspace__grid[data-columns="3"] .wdb-r-family__grid > .wdb-r-widget--standard,
.wdb-r-workspace__grid[data-columns="3"] .wdb-r-family__grid > .wdb-r-widget--sm,
.wdb-r-workspace__grid[data-columns="3"] .wdb-r-family__grid > .wdb-r-widget--md {
  grid-column: span 2;
}

.wdb-r-family__grid[data-cols="3"] > .wdb-r-widget--wide,
.wdb-r-family__grid[data-cols="3"] > .wdb-r-widget--lg,
.wdb-r-workspace__grid[data-columns="3"] .wdb-r-family__grid > .wdb-r-widget--wide,
.wdb-r-workspace__grid[data-columns="3"] .wdb-r-family__grid > .wdb-r-widget--lg {
  grid-column: span 4;
}

.wdb-r-family__grid[data-cols="2"] > .wdb-r-widget--standard:last-child:nth-child(odd),
.wdb-r-family__grid[data-cols="2"] > .wdb-r-widget--sm:last-child:nth-child(odd),
.wdb-r-family__grid[data-cols="2"] > .wdb-r-widget--md:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.wdb-r-family__grid[data-cols="3"] > .wdb-r-widget--standard:last-child:nth-child(3n + 1),
.wdb-r-family__grid[data-cols="3"] > .wdb-r-widget--sm:last-child:nth-child(3n + 1),
.wdb-r-family__grid[data-cols="3"] > .wdb-r-widget--md:last-child:nth-child(3n + 1) {
  grid-column: 1 / -1;
}

.wdb-r-family__grid[data-cols="3"] > .wdb-r-widget--standard:nth-last-child(2):nth-child(3n + 1),
.wdb-r-family__grid[data-cols="3"] > .wdb-r-widget--sm:nth-last-child(2):nth-child(3n + 1),
.wdb-r-family__grid[data-cols="3"] > .wdb-r-widget--md:nth-last-child(2):nth-child(3n + 1),
.wdb-r-family__grid[data-cols="3"] > .wdb-r-widget--standard:last-child:nth-child(3n + 2),
.wdb-r-family__grid[data-cols="3"] > .wdb-r-widget--sm:last-child:nth-child(3n + 2),
.wdb-r-family__grid[data-cols="3"] > .wdb-r-widget--md:last-child:nth-child(3n + 2) {
  grid-column: span 3;
}

.wdb-r-widget__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.45rem;
  margin-bottom: 0.5rem;
}

.wdb-r-widget__title-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.wdb-r-widget__icon {
  flex: 0 0 auto;
  width: 1.55rem;
  height: 1.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--wdb-r-radius-sm);
  border: 1px solid var(--wdb-r-line);
  background: color-mix(in srgb, var(--wdb-r-panel) 72%, transparent);
  color: var(--wdb-r-accent);
}

.wdb-r-widget__icon .wdb-r-catalog__icon-svg,
.wdb-r-widget__icon svg {
  width: 0.9rem;
  height: 0.9rem;
}

.wdb-r-widget__icon .wdb-r-catalog__icon-fallback {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--wdb-r-muted);
}

.wdb-r-widget__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--wdb-r-ink);
  line-height: 1.2;
}

.wdb-r-widget__cat {
  margin: 0;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wdb-r-faint);
  white-space: nowrap;
}

.wdb-r-widget__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.5rem;
}

.wdb-r-widget__status {
  margin: 0;
  font-size: var(--wds-text-sm, 0.8125rem);
  line-height: var(--wds-leading-snug, 1.35);
  color: var(--wdb-r-muted);
}

.wdb-r-widget__state {
  margin: 0;
  padding: 0.35rem 0.55rem;
  border-radius: var(--wdb-r-radius-sm);
  border: 1px solid transparent;
  background: transparent;
}

.wdb-r-widget__state--unavailable,
.wdb-r-widget__state--offline {
  border-color: color-mix(in srgb, #e0a090 28%, transparent);
  background: color-mix(in srgb, #e0a090 8%, transparent);
}

.wdb-r-widget__state--placeholder,
.wdb-r-widget__state--waiting {
  border-color: color-mix(in srgb, var(--wdb-r-accent) 22%, transparent);
  background: color-mix(in srgb, var(--wdb-r-accent) 6%, transparent);
}

.wdb-r-widget__facts {
  margin: 0;
  display: grid;
  gap: 0.28rem 0.65rem;
}

.wdb-r-widget__fact {
  display: grid;
  grid-template-columns: minmax(5rem, 32%) 1fr;
  gap: 0.25rem 0.55rem;
  align-items: baseline;
}

.wdb-r-widget__fact dt {
  margin: 0;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wdb-r-faint);
}

.wdb-r-widget__fact dd {
  margin: 0;
  font-size: var(--wds-text-sm, 0.8125rem);
  line-height: var(--wds-leading-snug, 1.35);
  color: var(--wdb-r-ink);
}

.wdb-r-widget__note {
  font-size: 0.6875rem;
  color: var(--wdb-r-faint);
  font-weight: 500;
}

.wdb-r-widget__trust {
  margin: 0;
}

.wdb-r-widget__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.6rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--wdb-r-line);
}

/* Skeleton placeholders — calm, CLS-safe */
.wdb-r-skeleton {
  display: grid;
  gap: 0.4rem;
  margin: 0.15rem 0 0.25rem;
}

.wdb-r-skeleton__line {
  display: block;
  height: 0.65rem;
  width: 78%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--wdb-r-panel) 70%, transparent) 0%,
    color-mix(in srgb, var(--wdb-r-accent) 18%, var(--wdb-r-panel)) 48%,
    color-mix(in srgb, var(--wdb-r-panel) 70%, transparent) 100%
  );
  background-size: 220% 100%;
  animation: wdb-r-skeleton-shine 1.35s ease-in-out infinite;
}

.wdb-r-skeleton__line--lg {
  width: 92%;
  height: 0.75rem;
}

.wdb-r-skeleton__line--sm {
  width: 54%;
}

/* Category presence — full outline + wide glow + tinted wash + label/pill accent */
.wdb-r-widget[data-category="conditions"] {
  --wdb-r-cat: var(--category-weather);
}
.wdb-r-widget[data-category="light"] {
  --wdb-r-cat: var(--category-light);
}
.wdb-r-widget[data-category="air"],
.wdb-r-widget[data-category="wildlife"],
.wdb-r-widget[data-category="nature"] {
  --wdb-r-cat: var(--category-nature);
}
.wdb-r-widget[data-category="astronomy"] {
  --wdb-r-cat: var(--category-astronomy);
}
.wdb-r-widget[data-category="photography"] {
  --wdb-r-cat: var(--category-photography);
}
.wdb-r-widget[data-category="rivers"],
.wdb-r-widget[data-category="water"] {
  --wdb-r-cat: var(--category-water);
}
.wdb-r-widget[data-category="trails"],
.wdb-r-widget[data-category="hiking"] {
  --wdb-r-cat: var(--category-hiking);
}
.wdb-r-widget[data-category="flora"],
.wdb-r-widget[data-category="mushrooms"],
.wdb-r-widget[data-category="earth"] {
  --wdb-r-cat: var(--category-earth);
}
.wdb-r-widget[data-category="travel"] {
  --wdb-r-cat: var(--category-travel);
}
/* Alerts: muted slate until an active alert — never alarm-red by default */
.wdb-r-widget[data-category="alerts"] {
  --wdb-r-cat: var(--category-alerts);
}
.wdb-r-widget[data-category="alerts"][data-alert-active="true"] {
  --wdb-r-cat: var(--category-alerts-active);
}

.wdb-r-widget[data-category] {
  border: 1.5px solid color-mix(in srgb, var(--wdb-r-cat, var(--wdb-r-accent)) 58%, transparent);
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--wdb-r-cat, var(--wdb-r-accent)) 16%, transparent) 0%,
      color-mix(in srgb, var(--wdb-r-cat, var(--wdb-r-accent)) 7%, var(--wdb-r-surface)) 40%,
      var(--wdb-r-surface) 78%
    );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--wdb-r-cat, var(--wdb-r-accent)) 18%, transparent),
    0 0 24px color-mix(in srgb, var(--wdb-r-cat, var(--wdb-r-accent)) 28%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--wdb-r-cat, var(--wdb-r-accent)) 28%, transparent),
    var(--wdb-r-shadow);
}

.wdb-r-widget[data-category]:hover,
.wdb-r-widget[data-category]:focus-within {
  border-color: color-mix(in srgb, var(--wdb-r-cat, var(--wdb-r-accent)) 78%, transparent);
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--wdb-r-cat, var(--wdb-r-accent)) 22%, transparent) 0%,
      color-mix(in srgb, var(--wdb-r-cat, var(--wdb-r-accent)) 9%, var(--wdb-r-hover)) 42%,
      var(--wdb-r-hover) 80%
    );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--wdb-r-cat, var(--wdb-r-accent)) 28%, transparent),
    0 0 32px color-mix(in srgb, var(--wdb-r-cat, var(--wdb-r-accent)) 34%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--wdb-r-cat, var(--wdb-r-accent)) 36%, transparent),
    var(--wdb-r-shadow-hover);
}

.wdb-r-widget[data-category] .wdb-r-widget__cat {
  color: color-mix(in srgb, var(--wdb-r-cat, var(--wdb-r-accent)) 88%, #fff 12%);
}

.wdb-r-widget[data-category] .wdb-r-widget__icon {
  border-color: color-mix(in srgb, var(--wdb-r-cat, var(--wdb-r-accent)) 40%, transparent);
  color: color-mix(in srgb, var(--wdb-r-cat, var(--wdb-r-accent)) 88%, #fff 8%);
  background: color-mix(in srgb, var(--wdb-r-cat, var(--wdb-r-accent)) 14%, var(--wdb-r-panel));
}

.wdb-r-widget[data-category] .wdb-r-widget__note {
  color: color-mix(in srgb, var(--wdb-r-cat, var(--wdb-r-accent)) 58%, var(--wdb-r-faint));
}

.wdb-r-widget[data-category] .wds-trust-chip {
  border-color: color-mix(in srgb, var(--wdb-r-cat, var(--wdb-r-accent)) 45%, transparent);
  color: color-mix(in srgb, var(--wdb-r-cat, var(--wdb-r-accent)) 82%, var(--wdb-r-ink));
  background: color-mix(in srgb, var(--wdb-r-cat, var(--wdb-r-accent)) 12%, var(--wdb-r-panel));
}

@media (prefers-reduced-motion: reduce) {
  .wdb-r-widget[data-category] {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--wdb-r-cat, var(--wdb-r-accent)) 24%, transparent),
      0 0 16px color-mix(in srgb, var(--wdb-r-cat, var(--wdb-r-accent)) 22%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--wdb-r-cat, var(--wdb-r-accent)) 28%, transparent),
      var(--wdb-r-shadow);
  }
}

/* ——— Customize ——— */
.wdb-r-customize-bar {
  margin-bottom: var(--wds-space-4, 1rem);
  padding: 0.85rem 1rem;
  border: 1px solid var(--wdb-r-line-strong);
  border-radius: var(--wdb-r-radius);
  background: var(--wdb-r-surface);
  box-shadow: var(--wdb-r-shadow);
}

.wdb-r-customize-bar__label {
  margin: 0 0 0.55rem;
  font-size: var(--wds-text-md, 1rem);
  font-weight: 600;
}

.wdb-r-customize-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.wdb-r-customize-bar__columns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.75rem;
}

.wdb-r-customize-bar__columns-label {
  margin-right: 0.25rem;
  font-size: var(--wds-text-sm, 0.8125rem);
  color: var(--wdb-r-muted);
}

.wdb-r-customize-bar__hint {
  margin: 0.65rem 0 0;
  font-size: var(--wds-text-sm, 0.8125rem);
  color: var(--wdb-r-faint);
}

.wdb-r-customize-bar__commit {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.85rem;
}

.wdb-r-btn--primary {
  border-color: color-mix(in srgb, var(--wdb-r-accent) 55%, var(--wdb-r-line-strong));
  background: color-mix(in srgb, var(--wdb-r-accent) 18%, transparent);
  color: var(--wdb-r-ink);
  font-weight: 600;
}

.wdb-r-btn--customize {
  flex: 0 0 auto;
  min-width: 2.75rem;
  min-height: 2.75rem;
  align-self: center;
}

.wdb-r-catalog {
  margin-top: var(--wds-space-8, 2rem);
}

.wdb-r-catalog h2 {
  margin: 0 0 0.35rem;
  font-family: var(--wds-font-display, "Cormorant Garamond", Georgia, serif);
  font-size: 1.45rem;
  font-weight: 500;
}

.wdb-r-catalog__lede {
  margin: 0 0 1rem;
  font-size: var(--wds-text-sm, 0.8125rem);
  color: var(--wdb-r-muted);
  max-width: 40rem;
}

.wdb-r-library__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 1rem;
}

.wdb-r-library__tab {
  appearance: none;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  min-height: 2rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--wdb-r-line-strong);
  border-radius: var(--wds-radius-sm, 6px);
  background: transparent;
  color: var(--wdb-r-muted);
  cursor: pointer;
}

.wdb-r-library__tab:hover,
.wdb-r-library__tab:focus-visible {
  border-color: color-mix(in srgb, var(--wdb-r-accent) 45%, var(--wdb-r-line-strong));
  color: var(--wdb-r-ink);
  outline: none;
}

.wdb-r-library__tab:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--wdb-r-accent) 45%, transparent);
}

.wdb-r-library__tab.is-active {
  border-color: color-mix(in srgb, var(--wdb-r-accent) 55%, var(--wdb-r-line-strong));
  background: color-mix(in srgb, var(--wdb-r-accent) 14%, transparent);
  color: var(--wdb-r-ink);
}

.wdb-r-catalog__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.wdb-r-catalog__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--wdb-r-line-strong);
  border-radius: var(--wdb-r-radius-md);
  background: var(--wdb-r-surface);
  transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.wdb-r-catalog__item:hover {
  border-color: color-mix(in srgb, var(--wdb-r-accent) 35%, var(--wdb-r-line-strong));
  background: var(--wdb-r-hover);
}

.wdb-r-catalog__icon {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--wds-radius-sm, 6px);
  border: 1px solid var(--wdb-r-line);
  background: color-mix(in srgb, var(--wdb-r-panel) 70%, transparent);
  color: var(--wdb-r-accent);
}

.wdb-r-catalog__icon-svg {
  width: 1.15rem;
  height: 1.15rem;
}

.wdb-r-catalog__icon-fallback {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--wdb-r-muted);
}

.wdb-r-catalog__meta {
  flex: 1 1 auto;
  min-width: 0;
}

.wdb-r-catalog__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
}

.wdb-r-catalog__meta strong {
  font-size: var(--wds-text-md, 1rem);
  font-weight: 600;
}

.wdb-r-catalog__meta p {
  margin: 0.3rem 0 0;
  font-size: var(--wds-text-sm, 0.8125rem);
  color: var(--wdb-r-muted);
  line-height: var(--wds-leading-snug, 1.35);
}

.wdb-r-catalog__cat {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wdb-r-faint);
}

.wdb-r-catalog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: flex-start;
  flex: 0 0 auto;
}

.wdb-r-catalog__empty {
  margin: 0;
  padding: 1rem;
  color: var(--wdb-r-muted);
  border: 1px dashed var(--wdb-r-line-strong);
  border-radius: var(--wds-radius-md, 10px);
}

.wdb-r-badge {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.15rem 0.4rem;
  border-radius: var(--wds-radius-sm, 6px);
  border: 1px solid var(--wdb-r-line-strong);
  color: var(--wdb-r-muted);
}

.wdb-r-badge--available {
  border-color: color-mix(in srgb, var(--wds-accent, #c8f055) 40%, transparent);
  color: var(--wds-accent, #c8f055);
}

.wdb-r-badge--coming-soon {
  border-color: color-mix(in srgb, var(--wds-warm, #e8b86d) 40%, transparent);
  color: var(--wds-warm, #e8b86d);
}

.wdb-r-btn {
  appearance: none;
  font: inherit;
  font-size: var(--wds-text-sm, 0.8125rem);
  font-weight: 500;
  min-height: 2.25rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--wdb-r-line-strong);
  border-radius: var(--wds-radius-sm, 6px);
  background: color-mix(in srgb, var(--wdb-r-panel) 70%, transparent);
  color: var(--wdb-r-ink);
  cursor: pointer;
  text-decoration: none;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.wdb-r-btn--quiet {
  background: transparent;
  color: var(--wdb-r-muted);
}

.wdb-r-btn.is-active,
.wdb-r-btn[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--wdb-r-accent) 55%, var(--wdb-r-line-strong));
  background: color-mix(in srgb, var(--wdb-r-accent) 12%, transparent);
  color: var(--wdb-r-ink);
}

.wdb-r-btn:hover,
.wdb-r-btn:focus-visible {
  border-color: color-mix(in srgb, var(--wdb-r-accent) 55%, var(--wdb-r-line-strong));
  background: var(--wdb-r-hover);
  outline: none;
}

.wdb-r-btn:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--wdb-r-accent) 45%, transparent);
}

.wdb-r-btn--link {
  display: inline-flex;
  align-items: center;
}

/* Trust chip — quiet instrument label */
.wdb-r .wds-trust-chip {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--wdb-r-line-strong);
  border-radius: var(--wds-radius-sm, 6px);
  background: color-mix(in srgb, var(--wdb-r-panel) 60%, transparent);
  color: var(--wdb-r-muted);
}

.wdb-r .wds-trust-chip[data-trust="live"] {
  border-color: color-mix(in srgb, var(--wds-accent, #c8f055) 45%, transparent);
  color: var(--wds-accent, #c8f055);
}

.wdb-r .wds-trust-chip[data-trust="estimated"],
.wdb-r .wds-trust-chip[data-trust="partial"],
.wdb-r .wds-trust-chip[data-trust="cached"] {
  border-color: color-mix(in srgb, var(--wds-warm, #e8b86d) 45%, transparent);
  color: var(--wds-warm, #e8b86d);
}

.wdb-r .wds-trust-chip[data-trust="unavailable"],
.wdb-r .wds-trust-chip[data-trust="offline"] {
  border-color: color-mix(in srgb, #e0a090 40%, transparent);
  color: color-mix(in srgb, #e0a090 90%, var(--wdb-r-muted));
}

.wdb-r .wds-trust-chip[data-trust="waiting"],
.wdb-r .wds-trust-chip[data-trust="pending"] {
  border-color: color-mix(in srgb, var(--wdb-r-accent) 40%, transparent);
  color: var(--wdb-r-accent);
}

/* Kiosk */
html.wdb-r-kiosk .wdb-r,
[data-wdb-r-kiosk="true"] .wdb-r {
  max-width: none;
  padding: 1.25rem clamp(1rem, 3vw, 2rem) 2.5rem;
  font-size: 1.125rem;
}

.wdb-r-kiosk-chrome {
  margin-bottom: 1.15rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--wdb-r-line-strong);
  border-radius: var(--wds-radius-md, 10px);
  background: var(--wdb-r-surface);
}

.wdb-r-kiosk-chrome__label {
  margin: 0 0 0.25rem;
  font-weight: 600;
}

.wdb-r-kiosk-chrome__meta {
  margin: 0 0 0.65rem;
  font-size: var(--wds-text-sm, 0.8125rem);
  color: var(--wdb-r-muted);
}

/* Boot */
.wdb-r-boot {
  max-width: 42rem;
  margin: 0 auto;
  padding: 1.5rem 1.15rem 2rem;
}

.wdb-r-boot__copy {
  margin: 0 0 0.4rem;
  font-family: var(--wds-font-display, "Cormorant Garamond", Georgia, serif);
  font-size: 1.35rem;
  font-weight: 500;
}

.wdb-r-boot__detail {
  margin: 0;
  font-size: var(--wds-text-sm, 0.8125rem);
  color: var(--wdb-r-muted);
}

/* ——— Responsive: intentional breakpoints ——— */

/* Laptop — keep equal family columns */
@media (max-width: 72rem) {
  .wdb-r-widget--wide,
  .wdb-r-widget--lg {
    grid-column: span 2;
  }

  .wdb-r-family__grid[data-cols="3"] > .wdb-r-widget--wide,
  .wdb-r-family__grid[data-cols="3"] > .wdb-r-widget--lg {
    grid-column: span 4;
  }
}

/* Tablet — comfortable 2-up when readable; orphans fill */
@media (max-width: 52rem) {
  .wdb-r {
    padding-top: var(--wds-space-3, 0.75rem);
  }

  .wdb-r-today {
    padding: 0.75rem 0.9rem;
  }

  .wdb-r-today__lines {
    flex-direction: column;
    gap: 0.25rem;
  }

  .wdb-r-workspace__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .wdb-r-family__grid,
  .wdb-r-family__grid[data-cols="2"],
  .wdb-r-family__grid[data-cols="3"],
  .wdb-r-workspace__grid[data-columns="2"] .wdb-r-family__grid,
  .wdb-r-workspace__grid[data-columns="3"] .wdb-r-family__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wdb-r-family__grid > .wdb-r-widget,
  .wdb-r-family__grid > .wdb-r-widget--standard,
  .wdb-r-family__grid > .wdb-r-widget--sm,
  .wdb-r-family__grid > .wdb-r-widget--md,
  .wdb-r-family__grid > .wdb-r-widget--wide,
  .wdb-r-family__grid > .wdb-r-widget--lg,
  .wdb-r-family__grid > .wdb-r-widget--featured,
  .wdb-r-family__grid > .wdb-r-widget--anchor {
    grid-column: auto;
    min-width: 0;
    width: 100%;
    max-width: none;
  }

  .wdb-r-family__grid > .wdb-r-widget--featured,
  .wdb-r-family__grid > .wdb-r-widget--anchor,
  .wdb-r-family__grid > .wdb-r-widget--standard:last-child:nth-child(odd),
  .wdb-r-family__grid > .wdb-r-widget--sm:last-child:nth-child(odd),
  .wdb-r-family__grid > .wdb-r-widget--md:last-child:nth-child(odd),
  .wdb-r-family__grid > .wdb-r-widget--wide:last-child:nth-child(odd),
  .wdb-r-family__grid > .wdb-r-widget--lg:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* Phone / all mobile widths — every tile full content width */
@media (max-width: 47.99rem) {
  .wdb-r {
    padding-left: max(0.85rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.85rem, env(safe-area-inset-right, 0px));
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
  }

  .wdb-r-today__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .wdb-r-family__grid,
  .wdb-r-family__grid[data-cols="1"],
  .wdb-r-family__grid[data-cols="2"],
  .wdb-r-family__grid[data-cols="3"],
  .wdb-r-workspace__grid[data-columns="1"] .wdb-r-family__grid,
  .wdb-r-workspace__grid[data-columns="2"] .wdb-r-family__grid,
  .wdb-r-workspace__grid[data-columns="3"] .wdb-r-family__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .wdb-r-widget,
  .wdb-r-widget--standard,
  .wdb-r-widget--sm,
  .wdb-r-widget--md,
  .wdb-r-widget--wide,
  .wdb-r-widget--lg,
  .wdb-r-widget--featured,
  .wdb-r-widget--anchor,
  .wdb-r-family__grid > .wdb-r-widget,
  .wdb-r-family__grid > .wdb-r-widget--standard,
  .wdb-r-family__grid > .wdb-r-widget--sm,
  .wdb-r-family__grid > .wdb-r-widget--md,
  .wdb-r-family__grid > .wdb-r-widget--wide,
  .wdb-r-family__grid > .wdb-r-widget--lg,
  .wdb-r-family__grid > .wdb-r-widget--featured,
  .wdb-r-family__grid > .wdb-r-widget--anchor {
    grid-column: 1 / -1;
    min-width: 0;
    width: 100%;
    max-width: none;
    min-height: 7rem;
    box-sizing: border-box;
  }

  .wdb-r-widget__fact {
    grid-template-columns: minmax(4.5rem, 36%) 1fr;
  }

  .wdb-r-group {
    margin-top: 0.35rem;
  }

  .wdb-r-widget__controls {
    gap: 0.45rem;
  }

  .wdb-r-widget__controls .wdb-r-btn,
  .wdb-r-catalog__actions .wdb-r-btn,
  .wdb-r-customize-bar .wdb-r-btn,
  .wdb-r-library__tab,
  .wdb-r-btn--customize {
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding: 0.45rem 0.85rem;
  }

  .wdb-r-catalog__item {
    flex-direction: column;
    align-items: stretch;
  }

  .wdb-r-catalog__actions {
    width: 100%;
  }

  .wdb-r-catalog__item .wdb-r-btn {
    align-self: stretch;
    justify-content: center;
  }

  .wdb-r-customize {
    padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
  }

  .wdb-r-customize-bar__commit {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    margin: 0;
    padding: 0.75rem max(0.85rem, env(safe-area-inset-left, 0px))
      calc(0.75rem + env(safe-area-inset-bottom, 0px))
      max(0.85rem, env(safe-area-inset-right, 0px));
    background: color-mix(in srgb, var(--wdb-r-bg, var(--wds-bg, #0b1220)) 94%, transparent);
    border-top: 1px solid var(--wdb-r-line-strong);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .wdb-r-customize-bar__commit .wdb-r-btn {
    flex: 1 1 auto;
  }

  /* Prevent horizontal page scroll while editing */
  .wdb-r-customize,
  .wdb-r-catalog__list,
  .wdb-r-library__tabs {
    max-width: 100%;
    overflow-x: hidden;
  }

  .wdb-r-library__tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 0.2rem;
  }

  .wdb-r-library__tab {
    flex: 0 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wdb-r {
    scroll-behavior: auto;
  }

  .wdb-r-widget,
  .wdb-r-btn,
  .wdb-r-catalog__item,
  .wdb-r--settling .wdb-r-workspace__grid,
  .wdb-r-skeleton__line {
    transition: none !important;
    animation: none !important;
  }

  .wdb-r-workspace__grid--animate .wdb-r-widget,
  .wdb-r-widget[data-lazy="ready"] > .wdb-r-widget__body:not(.wdb-r-widget__body--pending) {
    animation: none !important;
  }

  .wdb-r-widget:hover,
  .wdb-r-widget:focus-within {
    transform: none;
  }

  .wdb-r-skeleton__line {
    background: color-mix(in srgb, var(--wdb-r-panel) 78%, transparent);
  }
}

/* —— Home below-fold deepeners (aligned to widget chrome) —— */
.wdb-r-deepen {
  margin-top: 2rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--wdb-r-line);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.wdb-r-deepen__section {
  max-width: 52rem;
}

.wdb-r-deepen__header {
  margin-bottom: 0.65rem;
}

.wdb-r-deepen__title {
  margin: 0;
  font-family: var(--wds-font-display, "Cormorant Garamond", Georgia, serif);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: var(--wds-tracking-tight, -0.03em);
  color: var(--wdb-r-ink);
}

.wdb-r-deepen__lede {
  margin: 0.3rem 0 0;
  font-size: var(--wds-text-sm, 0.8125rem);
  line-height: 1.45;
  color: var(--wdb-r-muted);
}

.wdb-r-deepen__panel {
  padding: 0.9rem 1rem;
  border: 1px solid var(--wdb-r-line-strong);
  border-radius: var(--wdb-r-radius);
  background: color-mix(in srgb, var(--wdb-r-surface) 88%, transparent);
  box-shadow: var(--wdb-r-shadow);
}

.wdb-r-deepen__status,
.wdb-r-deepen__empty,
.wdb-r-deepen__copy,
.wdb-r-deepen__summary,
.wdb-r-deepen__meta,
.wdb-r-deepen__caption {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--wdb-r-muted);
}

.wdb-r-deepen__meta {
  margin-top: 0.55rem;
  font-size: 0.8rem;
  color: var(--wdb-r-faint);
}

.wdb-r-deepen__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.wdb-r-deepen__article a {
  color: var(--wdb-r-ink);
  text-decoration: none;
  font-weight: 500;
}

.wdb-r-deepen__article a:hover,
.wdb-r-deepen__article a:focus-visible {
  color: var(--wdb-r-accent);
  text-decoration: underline;
}

.wdb-r-deepen__chip {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0.08rem 0.4rem;
  border-radius: 0.3rem;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--wdb-r-faint);
  border: 1px solid var(--wdb-r-line);
}

.wdb-r-deepen__summary {
  margin-top: 0.25rem;
}

.wdb-r-deepen__action {
  margin: 0.85rem 0 0;
}

.wdb-r-deepen__link {
  color: var(--wdb-r-accent);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
}

.wdb-r-deepen__link:hover,
.wdb-r-deepen__link:focus-visible {
  text-decoration: underline;
}

.wdb-r-deepen__figure {
  margin: 0;
  border: 1px solid var(--wdb-r-line-strong);
  border-radius: var(--wdb-r-radius);
  overflow: hidden;
  background: var(--wdb-r-panel);
  box-shadow: var(--wdb-r-shadow);
}

.wdb-r-deepen__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 22rem;
  object-fit: cover;
}

.wdb-r-deepen__caption {
  padding: 0.65rem 0.9rem 0.8rem;
  border-top: 1px solid var(--wdb-r-line);
}

.wdb-r-deepen .wds-take {
  margin: 0;
}

.wdb-r-deepen .wds-take__body {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--wdb-r-muted);
}

.wdb-r-deepen .wds-take__meta {
  margin: 0.55rem 0 0;
  font-size: 0.8rem;
  color: var(--wdb-r-faint);
}

@media (max-width: 640px) {
  .wdb-r-deepen {
    margin-top: 2rem;
    gap: 1.4rem;
  }

  .wdb-r-deepen__img {
    max-height: 16rem;
  }
}