/* Family Spots Map · V4.3 · Design-Details (nur gezielte Komponenten)
   Ausgangspunkt: V4.2. Daten, Kalenderaktionen und Navigationslogik unverändert.
   Reihenfolge: nach fsm-orange-actions-v41.css laden. */

/* 1. Die vier Kalenderaktionen wieder als ruhige, nahezu quadratische Kacheln.
   Normalgroße iPhones: eine Reihe. Sehr schmale Displays: 2 x 2 ohne Quetschen. */
html.fsm-polished #fse-overlay .fse-event-actions {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:11px;
  align-items:stretch;
}
html.fsm-polished #fse-overlay .fse-mini {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:4px;
  padding:6px 2px;
  min-height:70px;
  border-radius:13px;
  text-align:center;
  font-size:clamp(9px,2.35vw,10.5px)!important;
  line-height:1.18;
  font-weight:650!important;
  white-space:normal;
  overflow-wrap:anywhere;
}
html.fsm-polished #fse-overlay .fse-mini .fse-svg{
  width:17px!important;height:17px!important;flex:none;
}
@media(max-width:339px){
  html.fsm-polished #fse-overlay .fse-event-actions {grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  html.fsm-polished #fse-overlay .fse-mini {min-height:64px;font-size:11px!important;}
}

/* 2. Ruhige Markierung für gespeicherte Tage – klein, klar, ohne Ring/Icon.
   Die ausgewählte Tagesfläche bleibt sichtbar, aber sanfter und schmaler. */
#fse-overlay .fse-day--chosen{
  background:#768b59;
  color:#fffaf2;
  border-radius:12px;
  height:49px;
  margin-block:3px;
}
#fse-overlay .fse-day--has:not(.fse-day--chosen){background:transparent}
#fse-overlay .fse-day-saved{
  position:absolute;
  bottom:3px;
  left:50%;right:auto;
  transform:translateX(-50%);
  width:6px;height:6px;
  border:0;
  border-radius:50%;
  background:#688447;
  box-shadow:none;
  pointer-events:none;
}
#fse-overlay .fse-day--chosen .fse-day-saved{
  background:#fff6e8;
  border:0;
  box-shadow:none;
}
#fse-overlay .fse-month-grid .fse-day-saved{bottom:2px;width:5px;height:5px}
#fse-overlay .fse-month-grid .fse-day--chosen{height:37px;margin-block:2px}

/* 3. Der ausgeklappte So-funktioniert's-Text bekommt denselben warmen
   Glühbirnencharakter, jedoch lesbar und zurückhaltend statt knallig orange. */
#fsm-community-overlay .category-explorer__rules > p {
  box-sizing:border-box;
  padding:11px 12px;
  margin:8px 0 0;
  border:1px solid #f2d8a7;
  border-radius:12px;
  background:#fff0d2;
  color:#493626;
  line-height:1.55;
}

/* 4. Einheitliches, dezentes Schließen-X: 44px Trefffläche, 30px feiner Ring.
   Bereits bestehende Klick-Handler/Focus bleiben vollständig erhalten. */
html.fsm-polished :is(
 #app-menu .app-menu-close,
 #filter-modal #filter-modal-close,
 #fsm-home-sheet .fsm-home-sheet__close,
 #fsm-community-overlay .fsm-community-close,
 #fse-overlay .fse-icon-btn,
 #spot-detail .spot-details-actions > .spot-details-close,
 .fsm-spot-preview__close,
 .fsm-cycle-tours header button[data-close],
 .fsm-onboarding-hint__close
){
  box-sizing:border-box!important;
  display:grid!important;
  place-items:center!important;
  flex:none!important;
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  min-height:44px!important;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#675a4d!important;
  isolation:isolate;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
/* Anchor the existing circular X decoration to its own button, not the dialog. */
html.fsm-polished .fsm-cycle-tours header button[data-close]{position:relative!important;}
html.fsm-polished .fsm-onboarding-hint__close{font-size:18px!important;line-height:1!important}
/* Preserve the calendar close's absolute placement in its header. */
html.fsm-polished #fse-overlay .fse-icon-btn{position:absolute!important;right:8px;top:calc(7px + env(safe-area-inset-top,0px))}
html.fsm-polished :is(
 #app-menu .app-menu-close,
 #filter-modal #filter-modal-close,
 #fsm-home-sheet .fsm-home-sheet__close,
 #fsm-community-overlay .fsm-community-close,
 #fse-overlay .fse-icon-btn,
 #spot-detail .spot-details-actions > .spot-details-close,
 .fsm-spot-preview__close,
 .fsm-cycle-tours header button[data-close],
 .fsm-onboarding-hint__close
)::before {
  content:""!important;
  display:block!important;
  box-sizing:border-box!important;
  position:absolute!important;
  left:50%!important;top:50%!important;
  right:auto!important;bottom:auto!important;
  width:30px!important;height:30px!important;
  transform:translate(-50%,-50%)!important;
  border:1px solid rgba(98,82,64,.34)!important;
  border-radius:50%!important;
  background:rgba(255,251,245,.32)!important;
  box-shadow:none!important;
  opacity:1!important;
  pointer-events:none!important;
}
html.fsm-polished :is(
 #app-menu .app-menu-close,
 #filter-modal #filter-modal-close,
 #fsm-home-sheet .fsm-home-sheet__close,
 #fsm-community-overlay .fsm-community-close,
 #fse-overlay .fse-icon-btn,
 #spot-detail .spot-details-actions > .spot-details-close,
 .fsm-spot-preview__close,
 .fsm-cycle-tours header button[data-close]
) > svg {
  position:relative;z-index:1;
  display:block!important;
  width:20px!important;height:20px!important;
  stroke:currentColor!important;
  stroke-width:1.5!important;
  stroke-linecap:round!important;
  fill:none!important;
  pointer-events:none;
}
html.fsm-polished :is(
 #app-menu .app-menu-close,
 #filter-modal #filter-modal-close,
 #fsm-home-sheet .fsm-home-sheet__close,
 #fsm-community-overlay .fsm-community-close,
 #fse-overlay .fse-icon-btn,
 #spot-detail .spot-details-actions > .spot-details-close,
 .fsm-spot-preview__close,
 .fsm-cycle-tours header button[data-close]
) > svg :is(path,line){stroke-width:1.5!important;stroke-linecap:round!important}
html.fsm-polished :is(
 #app-menu .app-menu-close,
 #filter-modal #filter-modal-close,
 #fsm-home-sheet .fsm-home-sheet__close,
 #fsm-community-overlay .fsm-community-close,
 #fse-overlay .fse-icon-btn,
 #spot-detail .spot-details-actions > .spot-details-close,
 .fsm-spot-preview__close,
 .fsm-cycle-tours header button[data-close]
):focus-visible {outline:2px solid #617c47!important;outline-offset:1px!important}
@media(hover:hover){
 html.fsm-polished :is(
 #app-menu .app-menu-close,#filter-modal #filter-modal-close,
 #fsm-home-sheet .fsm-home-sheet__close,#fsm-community-overlay .fsm-community-close,
 #fse-overlay .fse-icon-btn,#spot-detail .spot-details-actions > .spot-details-close,
 .fsm-spot-preview__close,.fsm-cycle-tours header button[data-close]
 ):hover::before{background:#f2eadc!important;border-color:#9f927e!important}
}
@media(prefers-reduced-motion:reduce){html.fsm-polished #fse-overlay .fse-day-saved{transition:none!important}}

/* V4.5 preview: Date with a saved outing has an orange number, no dot. */
html.fsm-polished #fse-overlay .fse-day-saved { display:none!important; }
html.fsm-polished #fse-overlay .fse-day--has .fse-day-number { color:#F58B20!important; font-weight:800!important; }
html.fsm-polished #fse-overlay .fse-day--has.fse-day--chosen { background:transparent!important; color:#443527!important; border-color:transparent!important; }
html.fsm-polished #fse-overlay .fse-day--today:not(.fse-day--chosen) { border:1px solid #91a66c!important; border-radius:12px!important; }

/* V4.6 preview: only the four action tiles are slightly smaller. */
html.fsm-polished #fse-overlay .fse-event-actions {
 display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:11px!important; margin-top:10px!important;
}
html.fsm-polished #fse-overlay .fse-mini {
 display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;
 height:56px!important;min-height:56px!important;gap:3px!important;padding:4px 2px!important;
 border-radius:11px!important;font-size:clamp(9px,2.5vw,10px)!important;line-height:1.1!important;
 font-weight:650!important;text-align:center!important;overflow-wrap:normal!important;hyphens:auto!important;
}
html.fsm-polished #fse-overlay .fse-mini .fse-svg{width:16px!important;height:16px!important}
@media(max-width:339px){
 html.fsm-polished #fse-overlay .fse-event-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 html.fsm-polished #fse-overlay .fse-mini{height:52px!important;min-height:52px!important;font-size:11px!important}
}


/* V4.6 Designfreigabe-Kandidat: Einheitliches X ohne dekorativen Kreis.
   Nur visuelle Close-Buttons. Alle Click-Handler, Schrift-/App-Layouts unberührt. */
html.fsm-polished :is(
  #app-menu .app-menu-close,
  #filter-modal #filter-modal-close,
  #fsm-home-sheet .fsm-home-sheet__close,
  #fsm-community-overlay .fsm-community-close,
  #fse-overlay .fse-icon-btn,
  #spot-detail .spot-details-actions > .spot-details-close,
  .fsm-spot-preview__close,
  .fsm-cycle-tours header button[data-close],
  .fsm-onboarding-hint__close,
  .leaflet-popup-close-button
) {
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  outline:0!important;
  border-radius:10px!important;
  color:#4f4639!important;
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  min-height:44px!important;
  padding:0!important;
}
html.fsm-polished :is(
  #app-menu .app-menu-close,
  #filter-modal #filter-modal-close,
  #fsm-home-sheet .fsm-home-sheet__close,
  #fsm-community-overlay .fsm-community-close,
  #fse-overlay .fse-icon-btn,
  #spot-detail .spot-details-actions > .spot-details-close,
  .fsm-spot-preview__close,
  .fsm-cycle-tours header button[data-close],
  .fsm-onboarding-hint__close,
  .leaflet-popup-close-button
)::before { content:none!important;display:none!important;border:0!important;box-shadow:none!important; }
/* Preserve accessible focus for a real keyboard, not touch/autofocus. */
html.fsm-polished[data-fsm-focus-modality="keyboard"] :is(
  #app-menu .app-menu-close,
  #filter-modal #filter-modal-close,
  #fsm-home-sheet .fsm-home-sheet__close,
  #fsm-community-overlay .fsm-community-close,
  #fse-overlay .fse-icon-btn,
  #spot-detail .spot-details-actions > .spot-details-close,
  .fsm-spot-preview__close,
  .fsm-cycle-tours header button[data-close],
  .fsm-onboarding-hint__close,
  .leaflet-popup-close-button
):focus-visible { outline:2px solid #685c51!important; outline-offset:2px!important; }
/* Consistent visual X sizes. Text × of cycle dialog uses the same brown tone. */
html.fsm-polished .fsm-cycle-tours header button[data-close] {
  position:relative!important;
  font-size:24px!important;
  font-weight:300!important;
  line-height:1!important;
}
/* The map stays legible against its busy background: same X, no ring,
   only a soft paper surface beneath the icon. */
html.fsm-polished #fsm-map-fullscreen .fsm-map-fullscreen-button[aria-expanded="true"] {
  color:#4f4639!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
html.fsm-polished #fsm-map-fullscreen .fsm-map-fullscreen-button[aria-expanded="true"]::before {
  border:0!important;
  border-radius:9px!important;
  background:rgba(255,249,239,.94)!important;
  box-shadow:0 1px 4px rgba(48,36,20,.12)!important;
}
html.fsm-polished #fsm-map-fullscreen .fsm-map-fullscreen-button[aria-expanded="true"] svg {
  stroke-width:1.6!important;
}

/* V4.6: programmatic focus after tapping a dialog must not paint an olive halo. */
html.fsm-polished:not([data-fsm-focus-modality="keyboard"]) :is(
  #app-menu .app-menu-close,
  #filter-modal #filter-modal-close,
  #fsm-home-sheet .fsm-home-sheet__close,
  #fsm-community-overlay .fsm-community-close,
  #fse-overlay .fse-icon-btn,
  #spot-detail .spot-details-actions > .spot-details-close,
  .fsm-spot-preview__close,
  .fsm-cycle-tours header button[data-close],
  .fsm-onboarding-hint__close,
  .leaflet-popup-close-button
):focus-visible { outline:0!important; outline-offset:0!important; box-shadow:none!important; }
