/* GSF04 map-first interface, inspired by map search + detail sheet patterns. */
html, body {
  width: 100%;
  min-height: 100%;
}
body:not(.is-list) {
  height: 100dvh;
  overflow: hidden;
  background: #e7e4df;
}
header {
  height: 60px;
  padding: 7px 20px;
  position: relative;
  z-index: 60;
  box-shadow: 0 2px 14px rgba(24, 36, 50, .08);
  border: 0;
}
.brand .mark {
  width: 39px;
  height: 39px;
  border-radius: 11px;
}
.brand h1 { font-size: 17px; }
.brand .eyebrow { letter-spacing: .09em; }
.tabbar { background: #f1f3f6; }
.tabbar button { padding: 9px 14px; }
.wrapper {
  width: 100%;
  height: calc(100dvh - 60px);
  padding: 0;
  margin: 0;
  max-width: none;
  display: block;
  overflow: hidden;
}
#mapView {
  height: 100%;
  width: 100%;
  position: relative;
}
.workspace {
  display: block;
  position: absolute;
  inset: 0;
}
.mapCard {
  position: relative;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.mapViewport {
  height: 100%;
  min-height: 0;
  max-height: none;
  overflow: auto;
  background: #eeeae4;
  scrollbar-width: none;
  cursor: grab;
}
.mapViewport::-webkit-scrollbar { display: none; }
.mapViewport.is-dragging { cursor: grabbing; }
.mapViewport svg {
  display: block;
  max-width: none;
  touch-action: pan-x pan-y;
}
.toolbar {
  position: absolute;
  z-index: 40;
  top: 15px;
  left: 17px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 85px 118px;
  width: min(540px, calc(100% - 124px));
  gap: 8px;
  filter: drop-shadow(0 5px 18px rgba(18, 33, 47, .09));
}
.toolbar .search {
  grid-column: 1 / -1;
  min-width: 0;
  width: 100%;
}
.search input {
  height: 54px;
  font-size: 15px;
  font-weight: 530;
  border: 1px solid rgba(197, 205, 213, .95);
  border-radius: 15px;
  padding-left: 47px;
  box-shadow: 0 4px 20px rgba(34, 45, 60, .12);
}
.search::before { left: 15px; top: 6px; font-size: 29px; }
.clearSearch { top: 9px; }
.resultbox {
  border-radius: 13px;
  box-shadow: 0 14px 36px rgba(15, 30, 42, .18);
  max-height: min(50vh, 370px);
}
.groupSelect, .locationNumber, .toolbar > .primary {
  height: 42px;
  min-height: 42px;
  padding: 7px 10px;
  width: 100%;
  box-shadow: 0 3px 12px rgba(30, 42, 50, .11);
  background: #fff;
  border-radius: 11px;
  font-size: 13px;
}
.toolbar > .primary {
  background: #314e68;
  border-color: #314e68;
  color: #fff;
}
.mapbar {
  position: absolute;
  z-index: 28;
  right: 17px;
  top: 112px;
  border: 0;
  border-radius: 16px;
  padding: 0;
  display: block;
  background: transparent;
  pointer-events: none;
}
.mapbar .zoom {
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: auto;
}
.mapbar .zoom button {
  width: 50px;
  height: 46px;
  border: 1px solid #d9e0e7;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(15, 31, 45, .15);
  background: rgba(255,255,255,.98);
  font-size: 19px;
  color: #2c465a;
}
.mapbar #fit, .mapbar #focusGSF {
  min-width: 50px;
  width: 50px;
  height: 43px;
  font-size: 11px;
  padding: 3px;
  white-space: normal;
}
.mapbar #zoomOutput { display: none; }
.mapbar > .toggleNumber { display: none; }
.mapFooter {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: auto;
  z-index: 12;
  padding: 10px 14px;
  border: 1px solid rgba(220, 226, 231, .8);
  border-radius: 14px;
  max-width: min(650px, calc(100% - 100px));
  background: rgba(255,255,255,.93);
  box-shadow: 0 4px 18px rgba(27,42,54,.1);
  backdrop-filter: blur(12px);
}
.mapFooter .legends { gap: 12px; }
.mapFooter #mapSelection {
  font-size: 10px;
  font-weight: 500;
  max-width: 300px;
}
.mapGuide {
  position: absolute;
  left: 18px;
  bottom: 93px;
  z-index: 12;
  color: #334c61;
  background: rgba(255,255,255,.88);
  padding: 7px 12px;
  border: 1px solid rgba(210,215,220,.8);
  border-radius: 999px;
  font-size: 11px;
  pointer-events: none;
}
svg .booth.orange { fill-opacity: .14; stroke-opacity: .33; }
svg .booth.blue { fill-opacity: .15; stroke-opacity: .37; }
svg .booth.favorite { fill-opacity: .95; stroke-opacity: 1; }
svg .booth.done { fill-opacity: .95; stroke-opacity: 1; }
svg .booth.selected {
  fill-opacity: 1 !important;
  stroke-opacity: 1 !important;
  stroke-width: 3.8 !important;
}
svg .number { fill: #1d3550; }
.detailCard {
  position: absolute;
  z-index: 30;
  top: 167px;
  right: 17px;
  bottom: 18px;
  width: min(365px, calc(100vw - 34px));
  max-height: none;
  height: auto;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid #dce1e7;
  box-shadow: 0 16px 46px rgba(20, 34, 48, .22);
  background: #fff;
}
body:not(.has-selection) .detailCard { display: none; }
.detailBody {
  height: 100%;
  padding: 22px;
  overflow: auto;
  overscroll-behavior: contain;
}
.detailBody .detailHead { padding-right: 27px; }
.sheetClose {
  position: absolute;
  z-index: 4;
  top: 12px;
  right: 12px;
  background: #edf1f4;
  color: #3a5365;
  font-size: 20px;
  border: 0;
  border-radius: 50%;
  height: 32px;
  width: 32px;
  display: grid;
  place-items: center;
}
.sheetHandle, .sheetExpand { display: none; }
.statusline { display: none; }
body.is-list {
  height: auto;
  overflow: auto;
  background: #f6f8fb;
}
body.is-list .wrapper {
  height: auto;
  max-width: 1100px;
  margin: auto;
  padding: 20px;
  overflow: visible;
}
body.is-list .listCard {
  display: block;
  border-radius: 18px;
}
#toast { z-index: 100; }
@media (max-width: 760px) {
  header {
    height: 56px;
    padding: 7px 10px;
    gap: 8px;
  }
  .brand { gap: 8px; }
  .brand .mark {
    width: 33px;
    height: 33px;
    font-size: 17px;
    border-radius: 9px;
  }
  .brand h1 { font-size: 14px; }
  .brand .eyebrow { display: none; }
  .tabbar { padding: 3px; }
  .tabbar button { font-size: 11px; padding: 9px 8px; }
  .wrapper { height: calc(100dvh - 56px); }
  .toolbar {
    left: 10px;
    top: 10px;
    width: calc(100% - 20px);
    grid-template-columns: minmax(0,1fr) 64px 90px;
    gap: 6px;
  }
  .search { min-width: 0; flex-basis: auto; }
  .search input {
    height: 49px;
    font-size: 13px;
    padding-left: 43px;
    border-radius: 13px;
  }
  .search::before { top: 4px; left: 13px; }
  .clearSearch { top: 7px; }
  .groupSelect, .locationNumber, .toolbar > .primary {
    height: 38px;
    min-height: 38px;
    padding: 5px 7px;
    font-size: 12px;
  }
  .resultbox { max-height: min(48dvh, 320px); }
  .mapbar {
    position: absolute;
    top: auto;
    bottom: 68px;
    right: 11px;
    width: 45px;
  }
  .mapbar .zoom { gap: 6px; }
  .mapbar .zoom button {
    width: 44px;
    min-width: 44px;
    height: 43px;
    border-radius: 13px;
    font-size: 20px;
  }
  .mapbar #fit, .mapbar #focusGSF {
    width: 44px;
    min-width: 44px;
    height: 38px;
    font-size: 10px;
  }
  .mapFooter {
    bottom: 9px;
    left: 10px;
    max-width: calc(100% - 74px);
    padding: 8px 9px;
    border-radius: 10px;
  }
  .mapFooter .legends { gap: 8px; }
  .mapFooter .legends span { font-size: 9px; }
  .mapFooter #mapSelection { display: none; }
  .mapGuide {
    bottom: 75px;
    left: 10px;
    font-size: 10px;
    padding: 6px 9px;
  }
  .detailCard {
    top: auto;
    bottom: 9px;
    left: 9px;
    right: 9px;
    width: auto;
    max-height: 210px;
    border-radius: 20px;
  }
  .detailBody {
    padding: 22px 15px 12px;
    overflow-y: auto;
    max-height: inherit;
    height: auto;
  }
  .detailBody .sectionLabel { display: none; }
  .detailHead {
    font-size: 18px;
    margin: 3px 0 7px;
  }
  .detailMeta { margin-bottom: 8px; }
  .detailCard .actions { margin: 8px 0; }
  .detailCard .actions button { padding: 10px 7px; }
  .sheetHandle {
    position: absolute;
    z-index: 4;
    display: block;
    width: 40px;
    height: 5px;
    left: calc(50% - 20px);
    top: 7px;
    background: #cbd5dd;
    border-radius: 10px;
    pointer-events: none;
  }
  .sheetExpand {
    position: absolute;
    right: 53px;
    top: 12px;
    z-index: 4;
    display: block;
    background: #edf5fb;
    color: #2d658c;
    border: 0;
    border-radius: 9px;
    padding: 7px 9px;
    font-size: 11px;
    font-weight: 750;
  }
  body.has-selection:not(.sheet-expanded) .detailBody > .divider,
  body.has-selection:not(.sheet-expanded) .detailBody > .sectionTitle,
  body.has-selection:not(.sheet-expanded) #workList,
  body.has-selection:not(.sheet-expanded) #workForm,
  body.has-selection:not(.sheet-expanded) .detailBody > .hint {
    display: none;
  }
  body.has-selection.sheet-expanded .detailCard { max-height: min(73dvh, 680px); }
  body.has-selection.sheet-expanded .detailBody { max-height: min(73dvh, 680px); }
  body.has-selection .mapFooter, body.has-selection .mapGuide { display: none; }
  body.has-selection:not(.sheet-expanded) .mapbar { bottom: 232px; }
  body.has-selection.sheet-expanded .mapbar { display: none; }
  body.is-list .wrapper { max-width: none; padding: 12px; }
  body.is-list .listCard { padding: 14px; }
  #toast { bottom: max(18px, env(safe-area-inset-bottom)); }
}
@media (max-width: 390px) {
  .brand h1 { font-size: 12px; letter-spacing: -.015em; white-space: nowrap; }
  .tabbar button { font-size: 10px; padding: 8px 7px; }
  .mapFooter .legends { gap: 5px; }
}