/* Family Spots Map – V82, final interaction coherence layer
   Keep the established visual identity. No data/feature logic changes.
   This last stylesheet unifies intentional CTA, selection, touch and focus
   states without changing the map, Tilla illustration or content. */
html.fsm-polished {
  --fsm-ui-action: #f58b20;
  --fsm-ui-action-hover: #e98519;
  --fsm-ui-action-ink: #382e25;
  --fsm-ui-selected: #d9e6cd;
  --fsm-ui-selected-border: #839e77;
  --fsm-ui-selected-ink: #29462d;
  --fsm-ui-muted-ring: #e0d6c7;
  --fsm-ui-focus: #376a45;
  --fsm-ui-btn-radius: 11px;
}
html.fsm-polished[data-theme="dark"] {
  --fsm-ui-selected: #526b4b;
  --fsm-ui-selected-border: #9bb38b;
  --fsm-ui-selected-ink: #f8f8f0;
  --fsm-ui-muted-ring: #758473;
  --fsm-ui-focus: #d5e7c9;
}

/* One primary-action treatment, regardless of the surrounding panel. */
html.fsm-polished #tilla-section #btn-play-idea,
html.fsm-polished #filter-section #btn-open-filter-modal,
html.fsm-polished #filter-modal #filter-modal-apply {
  box-sizing: border-box!important;
  background: var(--fsm-ui-action)!important;
  color: var(--fsm-ui-action-ink)!important;
  border-color: #dc7613!important;
  border-radius: var(--fsm-ui-btn-radius)!important;
  box-shadow: none!important;
  text-shadow: none!important;
  font-weight: 600!important;
}
html.fsm-polished #filter-section #btn-open-filter-modal,
html.fsm-polished #filter-modal #filter-modal-apply,
html.fsm-polished #filter-modal #filter-modal-reset {
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  line-height:1.2!important;
}
html.fsm-polished #filter-section #btn-open-filter-modal {
  display:inline-flex!important;
  align-items:center!important;
  padding-inline:14px!important;
}
html.fsm-polished #filter-section > .filter-footer {
  padding-bottom:12px!important;
}
html.fsm-polished #filter-section #filter-summary {
  margin:3px 0 0!important;
  line-height:1.45!important;
  overflow-wrap:anywhere;
}
html.fsm-polished #filter-modal .filter-modal-footer {
  gap:8px!important;
  box-shadow:0 -3px 10px rgba(51,43,29,.035)!important;
}
html.fsm-polished #filter-modal #filter-modal-reset {
  box-shadow:none!important;
  border-radius:var(--fsm-ui-btn-radius)!important;
  font-weight:600!important;
  white-space:nowrap!important;
}
html.fsm-polished #filter-modal #filter-modal-apply {
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  white-space:nowrap!important;
  padding-block:6px!important;
}
html.fsm-polished #filter-modal #filter-modal-apply .filter-modal__action-label {
  white-space:nowrap!important;
  min-width:0!important;
}
html.fsm-polished #filter-modal #filter-modal-apply :is(span,svg),
html.fsm-polished #filter-modal #filter-modal-apply::after {
  color:var(--fsm-ui-action-ink)!important;
}

/* Each selectable theme owns its own state: neighbors never inherit it. */
html.fsm-polished #filter-section .mood-row > .mood-chip[aria-pressed="true"],
html.fsm-polished #filter-modal .category-explorer__worlds > .category-explorer__chip[aria-pressed="true"]:not([data-world=""]),
html.fsm-polished #fsm-map-fullscreen .fsm-map-themes > .fsm-map-tool--theme[aria-pressed="true"] {
  background:var(--fsm-ui-selected)!important;
  border-color:var(--fsm-ui-selected-border)!important;
  color:var(--fsm-ui-selected-ink)!important;
  box-shadow:inset 0 0 0 1px rgba(56,89,46,.07)!important;
}
/* Fullscreen toolbar is intentionally a stronger green in the light mode:
   the map behind it is highly varied and needs higher contrast. */
html.fsm-polished[data-theme="light"] #fsm-map-fullscreen .fsm-map-themes > .fsm-map-tool--theme[aria-pressed="true"] {
  background:#587348!important;
  border-color:#587348!important;
  color:#fffdf4!important;
}
html.fsm-polished #filter-modal .category-explorer__choice:has(input:checked) {
  background:#f0f7e9!important;
  color:#283e2b!important;
}
html.fsm-polished[data-theme="dark"] #filter-modal .category-explorer__choice:has(input:checked) {
  background:#526b4b!important;
  color:#fafbf5!important;
}
html.fsm-polished #filter-modal .category-explorer__choice input[type="checkbox"]:checked {
  accent-color:#567c4b!important;
  background:#d6e8c8!important;
  border-color:#86a97d!important;
  color:#244b32!important;
  box-shadow:none!important;
  outline:0;
}
html.fsm-polished[data-theme="dark"] #filter-modal .category-explorer__choice input[type="checkbox"]:checked {
  background:#c8e0bf!important;
  border-color:#a3c599!important;
}
/* A soft close affordance with a full 44px touch hit target. */
html.fsm-polished #filter-modal #filter-modal-close {
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  min-height:44px!important;
  background:#f8f5ef!important;
  color:#626a62!important;
  box-shadow:none!important;
}
html.fsm-polished[data-theme="dark"] #filter-modal #filter-modal-close {
  background:#3b483e!important;
  color:#e7eee2!important;
}
/* Focus feedback is consistent, never an orange ring on green selections. */
html.fsm-polished :is(
  #btn-play-idea, #btn-open-filter-modal, #filter-modal-apply,
  #filter-modal-reset, #filter-modal-close,
  .mood-chip, .fsm-map-tool--theme,
  .category-explorer__chip, .category-explorer__choice input[type="checkbox"]
):focus-visible {
  outline:2px solid var(--fsm-ui-focus)!important;
  outline-offset:3px!important;
}
/* Keep touches accessible while keeping the approved compact visual height. */
html.fsm-polished #filter-modal .category-explorer__choice {min-height:44px!important;}
html.fsm-polished #filter-modal .category-explorer__worlds > button {min-height:46px!important;}
@media (hover:hover) {
  html.fsm-polished #tilla-section #btn-play-idea:hover,
  html.fsm-polished #filter-section #btn-open-filter-modal:hover,
  html.fsm-polished #filter-modal #filter-modal-apply:not(:disabled):hover {
    background:var(--fsm-ui-action-hover)!important;
  }
}
@media (max-width:350px) {
  html.fsm-polished #filter-modal .filter-modal-footer {
    grid-template-columns:minmax(0,.73fr) minmax(0,1.42fr)!important;
    gap:6px!important;
  }
  html.fsm-polished #filter-modal #filter-modal-apply {font-size:11.5px!important;}
}
@media (prefers-reduced-motion:reduce) {
  html.fsm-polished :is(.mood-chip,.category-explorer__chip,.category-explorer__choice,
  #btn-play-idea,#btn-open-filter-modal,#filter-modal-apply,#filter-modal-reset) {
    transition:none!important;
  }
}

/* V82 final – Tilla, balanced mobile illustration size.
   More presence without enlarging the entire card or changing the story.
   The memory note shares the illustration canvas so its placement stays aligned.
   The narrow viewport keeps enough room for DE / EN / DA wording. */
@media (max-width: 899px) {
  html.fsm-polished #tilla-section .tilla-sidebar-card {
    grid-template-columns: clamp(104px, 34%, 128px) minmax(0, 1fr)!important;
    column-gap: 10px!important;
    align-items:center!important;
  }
  html.fsm-polished #tilla-section .tilla-sidebar-avatar {
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
  }
  html.fsm-polished #tilla-section .tilla-watercolor-canvas {
    width:143%!important;
    margin-inline-start:-21.5%!important;
  }
  html.fsm-polished #tilla-sidebar-text {
    min-width:0!important;
    overflow-wrap:break-word!important;
  }
}
@media (max-width:350px) {
  html.fsm-polished #tilla-section .tilla-sidebar-card {
    grid-template-columns:96px minmax(0,1fr)!important;
    column-gap:8px!important;
  }
}