/* TRADEL Wanted. A discreet location-aware pinboard plus an app-like compose view.
   Scope everything to the existing Wanted modal, leaving Browse Map untouched. */
.wanted-prototype {
  --wanted-ink: #23382b;
  --wanted-muted: #758176;
  --wanted-green: #286849;
  --wanted-line: #e6eae4;
  font-family: Ubuntu, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--wanted-ink);
}
.wanted-prototype *, .wanted-prototype *::before, .wanted-prototype *::after { box-sizing: border-box; }
.wanted-prototype [hidden] { display: none !important; }
.wanted-prototype button, .wanted-prototype input, .wanted-prototype select,
.wanted-prototype textarea { font: inherit; }
.wanted-prototype button { cursor: pointer; }
.wanted-prototype :is(button, input, textarea, select, summary):focus-visible {
  outline: 3px solid rgba(49,131,84,.45);
  outline-offset: 3px;
}
.wanted-modal__sr-only, .wanted-modal__native-value {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.wanted-modal__native-value { pointer-events: none; }

/* Shared Browse Map launcher. Its entrance is controlled by browse-map.css. */
.wanted-launcher { display: flex; justify-content: center; margin: 6px auto 17px; }
.wanted-launcher__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 37px;
  max-width: min(100%, 450px);
  padding: 5px 14px 5px 10px;
  border: 1px solid #fff;
  border-radius: 999px;
  background-color: #f7f5ee;
  background-image: radial-gradient(#e5dfd1 0.7px, transparent 0.7px);
  background-size: 18px 18px;
  box-shadow: 0 3px 12px rgba(29, 39, 31, .065);
  color: #202020;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.25;
  transition: background-color .18s ease, box-shadow .18s ease;
}
.wanted-launcher__button:hover {
  background-color: #f3efe5;
  box-shadow: 0 4px 13px rgba(29, 39, 31, .09);
}
.wanted-launcher__button:focus-visible {
  outline: 2px solid #458b59;
  outline-offset: 3px;
}
.wanted-launcher__icon {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  flex: none;
  background: transparent;
  color: #171717;
}
.wanted-launcher__icon svg { width: 16px; height: 16px; }
.wanted-launcher__preview, .wanted-modal__demo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 5px 8px;
  background: #f3f5ef;
  color: #8b9589;
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
}

/* Dialog shell. */
.wanted-modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 160000;
  padding: 20px;
  isolation: isolate;
}
.wanted-modal__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(25,38,29,.62);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
body.wanted-modal-open { overflow: hidden !important; }
.wanted-modal__dialog {
  display: flex;
  flex-direction: column;
  width: min(100%, 920px);
  max-height: min(91dvh, 870px);
  overflow: hidden;
  background-color: #f7f5ee;
  background-image: radial-gradient(#e5dfd1 0.85px, transparent 0.85px);
  background-size: 18px 18px;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 26px;
  color: var(--wanted-ink);
  box-shadow: 0 28px 85px rgba(3,29,12,.25);
  animation: wantedEnter .2s ease-out both;
}
@keyframes wantedEnter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.wanted-modal__header {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  min-height: 62px;
  padding: 12px 22px 9px;
  background: transparent;
}
.wanted-modal__brand { display: flex; align-items: center; gap: 10px; }
.wanted-modal__brand strong { font-size: 16px; letter-spacing: -.025em; font-weight: 800; }
.wanted-modal__brandmark {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 11px;
  background: #27583d;
  color: #fff;
  font-size: 20px;
  letter-spacing: -.12em;
  font-weight: 800;
}
.wanted-modal__close {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border: 0;
  border-radius: 50%;
  background: #f5f6f3;
  color: #405749;
}
.wanted-modal__close svg { width: 18px; height: 18px; }
.wanted-modal__close:hover { background: #e7eee7; }
.wanted-modal__tabs {
  display: flex;
  align-items: center;
  flex: none;
  gap: 25px;
  border-bottom: 1px solid rgba(128,119,96,.16);
  padding: 0 23px;
}
.wanted-modal__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 45px;
  padding: 5px 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #87918a;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 650;
}
.wanted-modal__tab svg { width: 16px; height: 16px; }
.wanted-modal__tab.is-active { color: #245b3d; border-bottom-color: #2a7b4e; font-weight: 800; }
.wanted-modal__tab:hover { color: #245b3d; }
.wanted-modal__body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.wanted-modal__panel { padding: 17px 24px 22px; }

/* Compact geographic toolbar: Worldwide, My Area and location search. */
.wanted-modal__board-controls { display: flex; align-items: center; gap: 10px; }
.wanted-modal__area-modes {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: none;
  padding: 3px;
  border: 1px solid rgba(88,107,87,.13);
  border-radius: 999px;
  background: rgba(255,255,255,.76);
}
.wanted-modal__worldwide, .wanted-modal__my-area {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: none;
  min-height: 35px;
  padding: 8px 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #627366;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.wanted-modal__worldwide svg, .wanted-modal__my-area svg { width: 16px; height: 16px; }
.wanted-modal__worldwide:hover, .wanted-modal__my-area:hover { color: #286348; background: rgba(225,238,223,.7); }
.wanted-modal__worldwide.is-active, .wanted-modal__my-area.is-active {
  color: #fff;
  background: #2f7050;
  box-shadow: 0 2px 6px rgba(32,81,47,.13);
}

.wanted-modal__area-search {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #e4e8e1;
  background: #fafbf8;
  transition: border-color .15s ease, background .15s ease;
}
.wanted-modal__area-search:focus-within { border-color: #77ad87; background: #fff; }
.wanted-modal__area-search > svg { width: 17px; height: 17px; flex: none; color: #698172; }
.wanted-modal__area-search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 10px;
  border: 0;
  outline: none;
  color: #314839;
  background: transparent;
  font-size: 12.5px;
  box-shadow: none !important;
}
.wanted-modal__area-search input::placeholder { color: #929c92; }
.wanted-modal__area-search button {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: #eef2eb;
  color: #63816b;
}
.wanted-modal__area-search button svg { width: 13px; height: 13px; }
.wanted-modal__area-radius {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 9px 8px 0;
  font-size: 11.5px;
  color: #637264;
}
.wanted-modal__area-radius input { flex: 1; min-width: 0; accent-color: #377b57; cursor: pointer; }
.wanted-modal__area-radius output { min-width: 70px; text-align: right; color: #2d6846; font-weight: 800; font-variant-numeric: tabular-nums; }
.wanted-modal__area-status {
  margin: 9px 1px 0;
  color: #63806b;
  font-size: 11px;
  line-height: 1.4;
}
.wanted-modal__counter { flex: none; color: #7b8679; font-size: 10.5px; white-space: nowrap; }

/* Warm bulletin board with subtle dot texture. All cards are fictional. */
.wanted-modal__board {
  padding: 16px 2px 5px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.wanted-modal__cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
.wanted-modal__card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 212px;
  padding: 18px 16px 14px;
  border: 1px solid #edeadf;
  border-radius: 13px;
  background: #fffdf9;
  box-shadow: 0 5px 12px rgba(64,58,39,.09),0 1px 3px rgba(64,58,39,.035);
  transform: rotate(-.35deg);
  transition: transform .15s ease, box-shadow .15s ease;
}
.wanted-modal__card--1 { background: #f5f9f4; transform: rotate(.55deg); }
.wanted-modal__card--2 { background: #fdfaf1; transform: rotate(-.6deg); }
.wanted-modal__card--3 { background: #f7f9f7; transform: rotate(.3deg); }
.wanted-modal__card:hover { transform: translateY(-3px) rotate(0deg); box-shadow: 0 9px 22px rgba(64,58,39,.14); }
.wanted-modal__pin {
  --pin-head: #c99c68;
  position: absolute;
  z-index: 2;
  top: -8px;
  left: calc(50% - 9px);
  width: 18px;
  height: 29px;
  border: 0;
  background: transparent;
  pointer-events: none;
  transform: rotate(-8deg);
}
.wanted-modal__pin::before {
  content: '';
  position: absolute;
  z-index: 2;
  top: 0;
  left: 2px;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(79,65,43,.14);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 27%, rgba(255,255,255,.82) 0 1.7px, transparent 2.1px), var(--pin-head);
  box-shadow: 0 2px 4px rgba(58,51,41,.22), inset 0 -2px 2px rgba(78,57,30,.13);
}
.wanted-modal__pin::after {
  content: '';
  position: absolute;
  top: 11px;
  left: 7px;
  width: 4px;
  height: 18px;
  background: linear-gradient(90deg,#67736b 5%,#c9cdc5 48%,#778178 100%);
  clip-path: polygon(10% 0,90% 0,50% 100%);
  filter: drop-shadow(1px 1px 1px rgba(50,54,48,.3));
}
.wanted-modal__card--1 .wanted-modal__pin { --pin-head: #79a986; transform: rotate(7deg); }
.wanted-modal__card--2 .wanted-modal__pin { --pin-head: #d4ae70; transform: rotate(-4deg); }
.wanted-modal__card--3 .wanted-modal__pin { --pin-head: #91b0a0; transform: rotate(5deg); }
.wanted-modal__card-top { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 11px; }
.wanted-modal__card-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid #e6ebdf;
  border-radius: 13px;
  background: rgba(255,255,255,.83);
}
.wanted-modal__card-icon img { width: 25px; height: 25px; object-fit: contain; }
.wanted-modal__card-type { font-size: 10px; color: #59906c; font-weight: 750; }
.wanted-modal__card h3 {
  margin: 0 0 8px;
  color: #293c2e;
  font-size: 14.5px;
  line-height: 1.26;
  font-weight: 800;
  letter-spacing: -.024em;
}
.wanted-modal__card-description {
  margin: 0 0 12px;
  color: #6f7b70;
  font-size: 11px;
  line-height: 1.42;
}
.wanted-modal__card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 7px; border-top: 1px solid rgba(66,94,70,.09); }
.wanted-modal__card-place {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #37694e;
  font-size: 10.5px;
  font-weight: 750;
}
.wanted-modal__card-radius { flex: none; color: #859285; font-size: 10px; }
.wanted-modal__card-demo { position: absolute; top: 12px; right: 13px; font-size: 8px; color: #a4aba1; }
.wanted-modal__empty {
  grid-column: 1 / -1;
  padding: 38px 20px;
  text-align: center;
  color: #7d897e;
  font-size: 12px;
}
.wanted-modal__empty > span { display: block; margin-bottom: 9px; color: #96ae97; font-size: 29px; }
.wanted-modal__empty p { margin: 0; line-height: 1.5; }
.wanted-modal__board-status {
  padding: 10px 13px;
  margin: 13px 0 0;
  border: 1px solid #c6ddc8;
  border-radius: 12px;
  color: #3c784f;
  background: #f2f8ef;
  font-size: 11.5px;
}
.wanted-modal__board-actions { display: flex; justify-content: flex-end; margin-top: 17px; }

/* Compact, app-style create view. */
.wanted-modal__panel--create {
  width: min(100%, 744px);
  margin: 17px auto 22px;
  padding: 22px 24px 24px;
  border: 1px solid rgba(255,255,255,.84);
  border-radius: 22px;
  background: rgba(255,255,255,.83);
  box-shadow: 0 6px 22px rgba(69,65,46,.05);
}
.wanted-modal__compose-head { display: flex; align-items: center; gap: 13px; margin: 0 0 22px; }
.wanted-modal__compose-head h2 { margin: 0; color: #22382b; font-size: clamp(21px,3vw,26px); font-weight: 800; letter-spacing: -.04em; line-height: 1.22; }
.wanted-modal__compose-head p { margin: 4px 0 0; color: #849185; font-size: 12px; }
.wanted-modal__compose-sparkle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 15px;
  background: #eaf3e8;
  color: #40835c;
}
.wanted-modal__compose-sparkle svg { width: 21px; height: 21px; }
.wanted-modal__field { display: flex; flex-direction: column; gap: 8px; min-width: 0; color: #4a5e4e; font-size: 11.5px; font-weight: 700; }
.wanted-modal__field input, .wanted-modal__field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #e3e8e1;
  outline: none;
  border-radius: 14px;
  background: #fff;
  color: #233d2d;
  font-size: 13px;
  padding: 11px 14px;
}
.wanted-modal__field input:focus, .wanted-modal__field textarea:focus { border-color: #73a681; box-shadow: 0 0 0 3px rgba(73,147,86,.1); }
.wanted-modal__field input::placeholder, .wanted-modal__field textarea::placeholder { color: #a5afa4; }
.wanted-modal__field--title input {
  height: 51px;
  border-radius: 16px;
  background: #fcfdfb;
  font-size: 15px;
}
.wanted-modal__section { padding-top: 20px; }
.wanted-modal__section-title { display: block; margin: 0 0 12px; color: #4a5e4e; font-size: 12px; font-weight: 800; }
.wanted-modal__category-strip {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding: 3px 2px 10px;
  scrollbar-width: thin;
  scrollbar-color: #c9d9c9 transparent;
  overscroll-behavior-x: contain;
}
.wanted-modal__category {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  flex: 0 0 86px;
  min-height: 85px;
  padding: 11px 7px;
  border: 1px solid #e7ebe5;
  border-radius: 18px;
  background: #fff;
  color: #526c56;
  box-shadow: 0 1px 5px rgba(32,64,38,.03);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.wanted-modal__category:hover { border-color: #a5c5a7; background: #f7fbf4; }
.wanted-modal__category.is-selected { background: #eaf5e8; border-color: #73aa7e; color: #275d3e; box-shadow: inset 0 0 0 1px #82b58c; }
.wanted-modal__category-icon { display: grid; place-items: center; width: 34px; height: 34px; }
.wanted-modal__category-icon img { width: 32px; height: 32px; object-fit: contain; }
.wanted-modal__subcategory-chips { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 3px; }
.wanted-modal__subcategory {
  padding: 8px 12px;
  border: 1px solid #e0e7dd;
  border-radius: 999px;
  background: #fff;
  color: #657666;
  font-size: 10.5px;
  font-weight: 700;
}
.wanted-modal__subcategory.is-selected { background: #2b6b48; color: #fff; border-color: #2b6b48; }
.wanted-modal__location-block { display: grid; grid-template-columns: 1fr 1fr; gap: 19px; align-items: end; padding: 21px 0 6px; }
.wanted-modal__input-icon { position: relative; display: flex; align-items: center; }
.wanted-modal__input-icon > svg { position: absolute; left: 13px; width: 17px; height: 17px; color: #4e825b; pointer-events: none; }
.wanted-modal__input-icon input { height: 47px; padding-left: 39px; }
.wanted-modal__range-block { display: flex; flex-direction: column; gap: 13px; padding-bottom: 10px; color: #4a5e4e; font-size: 11.5px; font-weight: 750; }
.wanted-modal__range-line { display: flex; align-items: center; gap: 12px; }
.wanted-modal__range-line input { flex: 1; accent-color: #307a4d; cursor: pointer; }
.wanted-modal__range-line output { width: 72px; text-align: right; color: #2e6e48; font-size: 13px; font-weight: 800; white-space: nowrap; }
.wanted-modal__more { margin: 12px 0 0; padding: 0; }
.wanted-modal__more summary { width: max-content; max-width: 100%; color: #2f7650; font-size: 12px; font-weight: 750; cursor: pointer; }
.wanted-modal__more[open] summary { margin-bottom: 13px; }
.wanted-modal__more .wanted-modal__field textarea { resize: vertical; min-height: 75px; }
.wanted-modal__section--share { padding-top: 25px; }
.wanted-modal__choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.wanted-modal__choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #e2e9e0;
  border-radius: 17px;
  background: #fff;
  cursor: pointer;
}
.wanted-modal__choice:has(input:checked) { background: #f5fbf4; border-color: #9ac2a1; }
.wanted-modal__choice:has(input:focus-visible) { outline: 3px solid rgba(49,131,84,.45); outline-offset: 2px; }
.wanted-modal__choice-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 37px;
  height: 37px;
  border-radius: 12px;
  color: #31724e;
  background: #e7f2e8;
}
.wanted-modal__choice-icon--wanted { background: #f8efdf; color: #be9250; }
.wanted-modal__choice-icon svg { width: 19px; height: 19px; }
.wanted-modal__choice-copy { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.wanted-modal__choice-copy strong { font-size: 12px; color: #293e30; font-weight: 800; }
.wanted-modal__choice-copy small { font-size: 10.5px; line-height: 1.3; color: #7f8c7e; }
.wanted-modal__choice input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.wanted-modal__switch { flex: none; display: block; width: 33px; height: 20px; padding: 2px; border-radius: 999px; background: #dce5da; transition: background .15s ease; }
.wanted-modal__switch::after { content: ''; display: block; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); transition: transform .15s ease; }
.wanted-modal__choice input:checked + .wanted-modal__switch { background: #388758; }
.wanted-modal__choice input:checked + .wanted-modal__switch::after { transform: translateX(13px); }
.wanted-modal__notice { margin: 17px 0 0; color: #989a8a; font-size: 10.5px; line-height: 1.45; }
.wanted-modal__form-error { margin: 10px 0 0; color: #a84b41; font-size: 11.5px; font-weight: 750; }
.wanted-modal__form-actions, .wanted-modal__preview-actions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end; margin-top: 17px; }
.wanted-modal__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 41px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 800;
  transition: background .15s ease, transform .15s ease;
}
.wanted-modal__button svg { width: 15px; height: 15px; }
.wanted-modal__button:hover { transform: translateY(-1px); }
.wanted-modal__button--dark { background: #285c40; color: #fff; }
.wanted-modal__button--dark:hover { background: #193f2a; }
.wanted-modal__button--outline { color: #496c53; background: #fff; border-color: #e3e9df; }
.wanted-modal__button--outline:hover { background: #f4f8f2; }
.wanted-modal__preview { margin-top: 19px; padding: 18px; background: #f5faf3; border: 1px solid #bed3c0; border-radius: 17px; }
.wanted-modal__preview-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 13px; }
.wanted-modal__preview-row { display: flex; align-items: center; gap: 6px; margin: 8px 0; font-size: 12px; color: #415b46; line-height: 1.5; }
.wanted-modal__preview-row img { width: 24px; height: 24px; }

@media (max-width: 760px) {
  .wanted-modal__cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .wanted-modal__board { padding: 14px 1px 4px; }
}
@media (max-width: 700px) {
  .wanted-modal { padding: 0; place-items: end center; }
  .wanted-modal__dialog {
    max-height: 95dvh;
    width: 100%;
    border-radius: 25px 25px 0 0;
    border-bottom: 0;
  }
  .wanted-modal__header { padding: 9px 18px 6px; min-height: 55px; }
  .wanted-modal__tabs { padding: 0 18px; gap: 19px; }
  .wanted-modal__panel { padding: 17px 16px 23px; }
  .wanted-modal__panel--create { width: calc(100% - 24px); margin: 12px auto 18px; padding: 18px 16px 22px; }
}
@media (max-width: 490px) {
  .wanted-launcher { margin: 4px 8px 13px; }
  .wanted-modal__brand strong { font-size: 15px; }
  .wanted-modal__tab { font-size: 12px; }
  .wanted-modal__board-controls { flex-wrap: wrap; gap: 7px; }
  .wanted-modal__area-modes { flex: 1 1 auto; justify-content: flex-start; }
  .wanted-modal__worldwide, .wanted-modal__my-area { min-height: 34px; padding: 7px 11px; gap: 6px; font-size: 11px; }
  .wanted-modal__area-search { flex: 1 1 100%; order: 3; padding: 0 10px; height: 39px; }
  .wanted-modal__counter { margin-left: auto; font-size: 10px; }
  .wanted-modal__board { padding: 13px 1px 4px; }
  .wanted-modal__cards { grid-template-columns: 1fr; gap: 11px; }
  .wanted-modal__card { min-height: 175px; }
  .wanted-modal__board-actions .wanted-modal__button { flex: 1; }
  .wanted-modal__compose-head { margin-bottom: 18px; }
  .wanted-modal__location-block, .wanted-modal__choice-grid { grid-template-columns: 1fr; }
  .wanted-modal__location-block { gap: 14px; }
  .wanted-modal__range-block { padding: 0; }
  .wanted-modal__category { flex-basis: 80px; min-height: 81px; }
}
/* Fixed-size modal, regardless of board contents, create mode or preview. */
.wanted-modal__dialog {
  height: min(740px, 94dvh);
  max-height: none;
}
.wanted-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
/* The search wrapper owns focus; do not draw a second rectangular browser outline. */
.wanted-prototype .wanted-modal__area-search input:focus,
.wanted-prototype .wanted-modal__area-search input:focus-visible {
  outline: none !important;
  outline-offset: 0;
  border: 0 !important;
  box-shadow: none !important;
}
.wanted-modal__area-search:focus-within {
  border-color: #94bc9e;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(55,126,77,.10);
}
/* Place the user-facing mode choice before the category and the area. */
.wanted-modal__panel--create {
  margin: 10px auto 0;
  padding: 14px 20px 16px;
  background: rgba(255,255,255,.84);
}
.wanted-modal__compose-head { gap: 10px; margin: 0 0 11px; }
.wanted-modal__compose-head h2 { font-size: 21px; line-height: 1.18; }
.wanted-modal__compose-head p { margin-top: 2px; font-size: 11px; line-height: 1.4; }
.wanted-modal__compose-sparkle { width: 34px; height: 34px; border-radius: 12px; }
.wanted-modal__compose-sparkle svg { width: 18px; height: 18px; }
.wanted-modal__choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.wanted-modal__choice {
  min-height: 77px;
  padding: 9px 10px;
  gap: 8px;
  border-radius: 14px;
  background: rgba(255,255,255,.86);
}
.wanted-modal__choice-icon { width: 32px; height: 32px; border-radius: 11px; }
.wanted-modal__choice-icon svg { width: 17px; height: 17px; }
.wanted-modal__choice-copy strong { font-size: 11.5px; line-height: 1.15; }
.wanted-modal__choice-copy small { font-size: 10px; line-height: 1.3; }
.wanted-modal__section--category { padding-top: 13px; }
.wanted-modal__section-title { margin: 0 0 7px; font-size: 11px; }
.wanted-modal__category-strip { gap: 6px; padding: 2px 2px 4px; }
.wanted-prototype .wanted-modal__category {
  flex: 0 0 67px !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  padding: 5px 3px !important;
  gap: 3px !important;
  border-radius: 12px !important;
  font-size: 9.5px !important;
  line-height: 1.1 !important;
  overflow: hidden;
}
.wanted-modal__category-icon { width: 24px; height: 24px; flex: none; }
.wanted-modal__category-icon img { width: 22px; height: 22px; }
.wanted-modal__category > span:last-child {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  max-height: 24px;
  overflow-wrap: anywhere;
}
.wanted-modal__subcategory-chips {
  gap: 5px;
  padding: 6px 0 0;
  max-height: 67px;
  overflow-y: auto;
}
.wanted-modal__subcategory { padding: 5px 9px; font-size: 10px; }
.wanted-modal__location-block {
  grid-template-columns: minmax(0,1fr) minmax(0,.77fr);
  align-items: end;
  gap: 15px;
  padding: 13px 0 0;
}
.wanted-modal__field { gap: 6px; font-size: 11px; }
.wanted-modal__input-icon input { height: 41px; padding: 8px 9px 8px 37px; }
.wanted-modal__range-block { gap: 9px; padding-bottom: 7px; font-size: 11px; }
.wanted-modal__range-line { gap: 8px; }
.wanted-modal__range-line input { min-width: 0; }
.wanted-modal__range-line output { width: 65px; font-size: 11px; }
.wanted-modal__more { margin: 10px 0 0; }
.wanted-modal__more summary { font-size: 11px; }
.wanted-modal__more .wanted-modal__field textarea { min-height: 66px; }
.wanted-modal__form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 0;
  flex-wrap: nowrap;
}
.wanted-modal__form-actions .wanted-modal__notice {
  flex: 1;
  margin: 0;
  font-size: 9.5px;
  line-height: 1.3;
}
.wanted-modal__form-actions .wanted-modal__button { flex: none; min-height: 39px; }
.wanted-modal__preview { margin: 0; }
@media (max-width: 700px) {
  .wanted-modal__dialog { height: min(740px, 94dvh); max-height: none; }
  .wanted-modal__panel--create {
    width: calc(100% - 20px);
    margin: 9px auto 0;
    padding: 12px 13px 14px;
  }
  .wanted-modal__compose-head { margin-bottom: 10px; }
  .wanted-modal__compose-head h2 { font-size: 19px; }
  .wanted-modal__choice-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
  .wanted-modal__choice { gap: 6px; padding: 8px; min-height: 84px; }
  .wanted-modal__choice-icon { width: 27px; height: 27px; }
  .wanted-modal__choice-icon svg { width: 15px; height: 15px; }
  .wanted-modal__choice-copy strong { font-size: 10.5px; }
  .wanted-modal__choice-copy small { font-size: 9.5px; }
  .wanted-modal__switch { width: 27px; height: 17px; }
  .wanted-modal__switch::after { width: 13px; height: 13px; }
  .wanted-modal__choice input:checked + .wanted-modal__switch::after { transform: translateX(10px); }
  .wanted-modal__section--category { padding-top: 10px; }
  .wanted-modal__location-block { grid-template-columns: minmax(0,1fr) minmax(0,.8fr); gap: 10px; padding: 12px 0 0; }
  .wanted-modal__range-line { gap: 5px; }
  .wanted-modal__range-line output { width: 59px; font-size: 10px; }
  .wanted-modal__input-icon input { font-size: 12px; }
  .wanted-modal__form-actions { margin-top: 10px; }
}
@media (max-width: 410px) {
  .wanted-modal__choice-icon { display: none; }
  .wanted-modal__choice { min-height: 82px; }
  .wanted-modal__compose-head p { font-size: 10px; }
}


/* Use the modal's available canvas for the creator without changing the shell size. */
.wanted-modal__dialog { position: relative; }
.wanted-modal__panel--create {
  width: calc(100% - 36px);
  max-width: 865px;
  min-height: calc(100% - 20px);
  margin: 10px auto;
  padding: 20px 26px 20px;
  display: flex;
  flex-direction: column;
}
.wanted-modal__form {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.wanted-modal__compose-head { margin-bottom: 17px; }
.wanted-modal__compose-head h2 { font-size: 23px; }
.wanted-modal__compose-head p { font-size: 12px; }
.wanted-modal__choice-grid { gap: 12px; }
.wanted-modal__choice { min-height: 82px; padding: 11px 14px; }
.wanted-modal__choice-icon { width: 35px; height: 35px; }
.wanted-modal__choice-copy strong { font-size: 12px; }
.wanted-modal__choice-copy small { font-size: 10.5px; }
.wanted-modal__section--category { padding-top: 20px; }
.wanted-modal__category-strip { gap: 8px; padding-bottom: 8px; }
.wanted-modal__location-block { padding-top: 17px; gap: 22px; }
.wanted-modal__place-picker { display: flex; gap: 8px; align-items: center; min-width: 0; }
.wanted-modal__place-picker .wanted-modal__input-icon { flex: 1; min-width: 0; }
.wanted-modal__place-picker input[data-wanted-place] { min-width: 0; width: 100%; }
.wanted-modal__map-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 41px;
  flex: none;
  padding: 7px 12px;
  border: 1px solid #b6d3bd;
  border-radius: 12px;
  background: #edf6ec;
  color: #356f4b;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.wanted-modal__map-trigger:hover { background: #e0efdf; border-color: #91bd9d; }
.wanted-modal__map-trigger svg { width: 17px; height: 17px; }
.wanted-modal__description-section { display: flex; flex-direction: column; gap: 8px; padding-top: 17px; }
.wanted-modal__description-section label { font-size: 11.5px; font-weight: 800; color: #4a5e4e; }
.wanted-modal__description-section textarea {
  width: 100%;
  height: 102px;
  min-height: 88px;
  max-height: 180px;
  resize: vertical;
  padding: 13px 15px;
  border-radius: 14px;
  border: 1px solid #dbe7db;
  outline: 0;
  background: #fff;
  color: #2e4835;
  font: inherit;
  font-size: 12.5px;
  line-height: 1.5;
}
.wanted-modal__description-section textarea.is-suggested {
  color: #8e9d91;
  background: rgba(248,250,246,.91);
}
.wanted-modal__description-section textarea:focus {
  border-color: #73a681;
  box-shadow: 0 0 0 3px rgba(73,147,86,.11);
}
.wanted-modal__form-actions { margin-top: auto; padding-top: 18px; }

/* Second dialog inside the fixed-size Wanted shell. */
.wanted-modal__map-layer {
  position: absolute;
  inset: 0;
  z-index: 75;
  display: grid;
  place-items: center;
  padding: 18px;
}
.wanted-modal__map-scrim {
  position: absolute;
  inset: 0;
  background: rgba(25,41,29,.68);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.wanted-modal__map-dialog {
  position: relative;
  z-index: 1;
  width: min(100%,820px);
  height: min(100%,690px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 24px;
  background: #fffefa;
  box-shadow: 0 20px 55px rgba(8,32,17,.23);
}
.wanted-modal__map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px 12px;
}
.wanted-modal__map-header strong { color: #263c2c; font-size: 15px; font-weight: 800; }
.wanted-modal__map-header p { margin: 4px 0 0; color: #7e8b7f; font-size: 11px; }
.wanted-modal__map-close {
  display: grid; place-items: center; flex: none;
  width: 33px; height: 33px; border: 0; border-radius: 50%;
  background: #eff2ed; color: #355443;
}
.wanted-modal__map-close svg { width: 17px; height: 17px; }
.wanted-modal__map-search {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 17px 12px;
  padding: 4px 5px 4px 12px;
  border: 1px solid #dfe7df;
  border-radius: 999px;
  background: #f7f9f6;
}
.wanted-modal__map-search > svg { width: 16px; height: 16px; flex: none; color: #668170; }
.wanted-modal__map-search:focus-within { border-color: #90bb9e; box-shadow: 0 0 0 2px rgba(57,129,81,.1); }
.wanted-modal__map-search input {
  flex: 1; min-width: 0; border: 0 !important; outline: 0 !important;
  box-shadow: none !important; background: transparent !important;
  padding: 8px 3px; font-size: 12px; color: #2d4533;
}
.wanted-modal__map-search button {
  flex: none; border: 0; border-radius: 999px;
  background: #e7f1e7; color: #2a6945;
  font-size: 11px; font-weight: 800; padding: 9px 15px;
}
.wanted-modal__map-canvas {
  position: relative;
  z-index: 0;
  flex: 1 1 auto;
  min-height: 0;
  background: #e6eee7;
}
.wanted-modal__map-canvas.leaflet-container { font-family: inherit; }
.wanted-modal__map-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 11px 17px;
  background: #fffefa;
}
.wanted-modal__map-status {
  flex: 1; min-width: 0;
  color: #516e59; font-size: 11px; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wanted-modal__map-footer .wanted-modal__button { flex: none; }
.wanted-modal__map-footer .wanted-modal__button:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 700px) {
  .wanted-modal__panel--create {
    width: calc(100% - 20px);
    min-height: calc(100% - 20px);
    margin: 10px auto;
    padding: 15px 14px 18px;
  }
  .wanted-modal__compose-head { margin-bottom: 12px; }
  .wanted-modal__compose-head h2 { font-size: 20px; }
  .wanted-modal__compose-head p { font-size: 10.5px; }
  .wanted-modal__choice-grid { gap: 8px; }
  .wanted-modal__choice { min-height: 76px; padding: 8px 9px; }
  .wanted-modal__section--category { padding-top: 13px; }
  .wanted-modal__location-block { grid-template-columns: 1fr; gap: 11px; padding-top: 11px; }
  .wanted-modal__description-section { padding-top: 12px; }
  .wanted-modal__description-section textarea { height: 84px; min-height: 80px; padding: 9px 11px; }
  .wanted-modal__form-actions { padding-top: 12px; }
  .wanted-modal__map-layer { padding: 7px; }
  .wanted-modal__map-dialog { width: 100%; height: 100%; border-radius: 19px; }
  .wanted-modal__map-header { padding: 12px 13px 9px; }
  .wanted-modal__map-search { margin: 0 11px 9px; }
  .wanted-modal__map-footer { padding: 9px 11px; }
}
@media (max-width: 410px) {
  .wanted-modal__place-picker { gap: 5px; }
  .wanted-modal__map-trigger { padding: 7px 9px; font-size: 10px; }
  .wanted-modal__map-trigger svg { width: 15px; height: 15px; }
  .wanted-modal__map-footer .wanted-modal__button { padding-inline: 11px; }
}

/* Show available subcategories without creating a second scroll area in the composer. */
.wanted-modal__panel--create:has(.wanted-modal__subcategory-chips:not([hidden])) .wanted-modal__compose-head { margin-bottom: 9px; }
.wanted-modal__panel--create:has(.wanted-modal__subcategory-chips:not([hidden])) .wanted-modal__choice { min-height: 74px; }
.wanted-modal__panel--create:has(.wanted-modal__subcategory-chips:not([hidden])) .wanted-modal__category-strip { padding-bottom: 2px; }
.wanted-modal__panel--create:has(.wanted-modal__subcategory-chips:not([hidden])) .wanted-modal__location-block { padding-top: 11px; }
.wanted-modal__panel--create:has(.wanted-modal__subcategory-chips:not([hidden])) .wanted-modal__description-section { padding-top: 10px; }
.wanted-modal__panel--create:has(.wanted-modal__subcategory-chips:not([hidden])) .wanted-modal__description-section textarea { height: 88px; }
.wanted-modal__panel--create:has(.wanted-modal__subcategory-chips:not([hidden])) .wanted-modal__form-actions { padding-top: 13px; }

@media (max-width: 700px) {
  /* Subcategory choices should fit into the same fixed-height mobile sheet. */
  .wanted-modal__panel--create:has(.wanted-modal__subcategory-chips:not([hidden])) {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .wanted-modal__panel--create:has(.wanted-modal__subcategory-chips:not([hidden])) .wanted-modal__choice {
    min-height: 65px;
  }
  .wanted-modal__panel--create:has(.wanted-modal__subcategory-chips:not([hidden])) .wanted-modal__section--category {
    padding-top: 8px;
  }
  .wanted-modal__panel--create:has(.wanted-modal__subcategory-chips:not([hidden])) .wanted-modal__description-section textarea {
    min-height: 75px;
    height: 75px;
  }
  .wanted-modal__panel--create:has(.wanted-modal__subcategory-chips:not([hidden])) .wanted-modal__form-actions {
    padding-top: 9px;
  }
}

@media (max-width: 700px) and (max-height: 780px) {
  /* Preserve the fixed-height sheet on compact-height phones with subcategories. */
  .wanted-modal__panel--create:has(.wanted-modal__subcategory-chips:not([hidden])) {
    padding-top: 7px;
    padding-bottom: 7px;
  }
  .wanted-modal__panel--create:has(.wanted-modal__subcategory-chips:not([hidden])) .wanted-modal__compose-head { margin-bottom: 5px; }
  .wanted-modal__panel--create:has(.wanted-modal__subcategory-chips:not([hidden])) .wanted-modal__choice { min-height: 57px; }
  .wanted-modal__panel--create:has(.wanted-modal__subcategory-chips:not([hidden])) .wanted-modal__category { height: 58px !important; min-height: 58px !important; max-height: 58px !important; }
  .wanted-modal__panel--create:has(.wanted-modal__subcategory-chips:not([hidden])) .wanted-modal__description-section textarea { min-height: 66px; height: 66px; }
}


/* The location picker replaces the modal's interior rather than adding a second framed dialog. */
.wanted-modal__map-layer {
  padding: 0;
  overflow: hidden;
  border-radius: inherit;
}
.wanted-modal__map-scrim { display: none; }
.wanted-modal__map-dialog {
  width: 100%;
  height: 100%;
  max-height: none;
  border: 0;
  border-radius: inherit;
  box-shadow: none;
  background: #fffefa;
}
.wanted-modal__map-dialog:focus { outline: none; }
.wanted-modal__map-canvas:focus-visible {
  outline: 2px solid #418458;
  outline-offset: -2px;
}
@media (max-width: 700px) {
  .wanted-modal__map-layer { padding: 0; }
  .wanted-modal__map-dialog { width: 100%; height: 100%; border-radius: inherit; }
  .wanted-launcher { margin: 5px auto 14px; }
}


/* Public Wanted actions. Demo examples remain clearly marked and non-interactive. */
.wanted-modal__card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-top: 10px;
}
.wanted-modal__card-actions button,
.wanted-modal__mine-item > button {
  border: 1px solid #d7e5d7;
  border-radius: 999px;
  background: #f1f7ef;
  padding: 6px 11px;
  color: #2d6d46;
  font-size: 10.5px;
  font-weight: 750;
}
.wanted-modal__card-actions button:hover,
.wanted-modal__mine-item > button:hover { background: #e6f2e5; }
.wanted-modal__card-actions button:last-child:not(:first-child) {
  margin-left: auto;
  color: #7b8178;
  background: transparent;
  border-color: transparent;
}
.wanted-modal__card-demo { font-size: 9px; font-weight: 650; }
.wanted-modal__interaction {
  padding: 14px;
  margin: 12px 0;
  border-radius: 17px;
  border: 1px solid #d7e5d5;
  background: rgba(255,255,255,.95);
  box-shadow: 0 6px 18px rgba(43,70,46,.06);
}
.wanted-modal__interaction-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.wanted-modal__interaction-head strong { font-size: 13px; }
.wanted-modal__interaction-head button {
  border: 0;
  background: #edf2eb;
  color: #536c58;
  border-radius: 50%;
  width: 28px; height: 28px;
  font-size: 18px;
}
.wanted-modal__interaction label { display: flex; flex-direction: column; gap: 7px; font-size: 11px; font-weight: 700; }
.wanted-modal__interaction textarea, .wanted-modal__interaction select {
  width: 100%;
  min-width: 0;
  max-height: 140px;
  border: 1px solid #dce7dc;
  border-radius: 13px;
  background: #fff;
  color: #253e2b;
  padding: 10px 12px;
  font: inherit;
  font-size: 12px;
}
.wanted-modal__interaction textarea { resize: vertical; min-height: 80px; }
.wanted-modal__interaction-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.wanted-modal__interaction-actions [role=status] { color: #496b50; font-size: 11px; line-height: 1.45; }
.wanted-modal__interaction-actions button { margin-left: auto; }
.wanted-modal__preview-actions { align-items: center; }
.wanted-modal__save-status { flex: 1 1 100%; margin: 0; color: #956232; font-size: 12px; }
.wanted-modal__panel--mine { padding: 18px 25px 26px; }
.wanted-modal__mine-content { max-width: 820px; margin: 0 auto; }
.wanted-modal__mine-content > h3 { color: #2a5639; font-size: 15px; margin: 0 0 10px; }
.wanted-modal__mine-content > h3:not(:first-child) { margin-top: 22px; }
.wanted-modal__mine-content > p { font-size: 12px; color: #6f7f71; }
.wanted-modal__mine-item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 9px;
  padding: 12px 14px;
  margin: 8px 0;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(112,142,111,.13);
  border-radius: 15px;
}
.wanted-modal__mine-item > div:first-child { flex: 1; min-width: 0; }
.wanted-modal__mine-item strong { display: block; color: #344e3b; font-size: 12px; line-height: 1.35; }
.wanted-modal__mine-item small { display: block; color: #829085; font-size: 10.5px; margin-top: 4px; }
.wanted-modal__mine-replies { flex: 1 1 100%; padding-top: 8px; border-top: 1px solid #ebefea; }
.wanted-modal__mine-replies strong { font-size: 11px; }
.wanted-modal__mine-replies p { margin: 8px 0 0; color: #546658; font-size: 11.5px; line-height: 1.5; }
.wanted-modal__tab { gap: 6px; }
@media (max-width: 490px) {
  .wanted-modal__tabs { gap: 13px; }
  .wanted-modal__tab { font-size: 11px; }
  .wanted-modal__tab svg { width: 14px; height: 14px; }
  .wanted-modal__panel--mine { padding: 15px 14px 22px; }
  .wanted-modal__interaction { padding: 11px; }
}


/* Direct posting layout: compact hierarchy, a consistent one-row subcategory strip. */
.wanted-modal__panel--create { padding: 17px 24px 18px; }
.wanted-modal__compose-head { margin-bottom: 12px; }
.wanted-modal__compose-head h2 { font-size: 22px; }
.wanted-modal__compose-head p { color: #586d5d; line-height: 1.42; max-width: 680px; }
.wanted-modal__section--category { padding-top: 14px; }
.wanted-modal__category-strip { padding-bottom: 6px; }
.wanted-modal__subcategory-chips {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 7px;
  padding: 5px 2px 6px;
  margin-top: 2px;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: #cfdecf transparent;
}
.wanted-modal__subcategory-chips[hidden] { display: none !important; }
.wanted-modal__subcategory {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 6px;
  min-height: 29px;
  padding: 6px 10px;
  white-space: nowrap;
  border-radius: 11px;
  border-color: #e0e8de;
  background: #fff;
  color: #4d6551;
  font-size: 10.5px;
  line-height: 1.2;
  box-shadow: 0 1px 3px rgba(35,70,43,.035);
}
.wanted-modal__subcategory::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #b6cbb8;
}
.wanted-modal__subcategory:hover { background: #f4f9f2; border-color: #adc9ae; }
.wanted-modal__subcategory.is-selected {
  background: #eaf5e8;
  color: #245d3e;
  border-color: #76a980;
  box-shadow: inset 0 0 0 1px rgba(86,149,101,.22);
}
.wanted-modal__subcategory.is-selected::before { background: #28734a; }
.wanted-modal__location-block { padding-top: 13px; }
.wanted-modal__description-section { padding-top: 12px; gap: 6px; }
.wanted-modal__description-editor { position: relative; isolation: isolate; }
.wanted-modal__description-section textarea,
.wanted-modal__panel--create:has(.wanted-modal__subcategory-chips:not([hidden])) .wanted-modal__description-section textarea {
  box-sizing: border-box;
  display: block;
  height: 78px !important;
  min-height: 78px !important;
  max-height: 78px !important;
  resize: none;
  overflow-y: auto;
  font-size: 12.5px;
  line-height: 1.48;
  padding: 10px 13px;
  position: relative;
  z-index: 2;
}
.wanted-modal__suggested-format {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  padding: 10px 13px;
  color: #5a6e5f;
  font-size: 12.5px;
  line-height: 1.48;
  overflow: hidden;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}
.wanted-modal__suggested-format strong { color: #265338; font-weight: 800; }
.wanted-modal__description-section textarea.is-suggested:not(:focus) {
  color: transparent !important;
  background: rgba(248,250,246,.54);
  caret-color: #295d3e;
}
.wanted-modal__description-editor:has(textarea:focus) .wanted-modal__suggested-format,
.wanted-modal__description-editor:has(textarea:not(.is-suggested)) .wanted-modal__suggested-format { display: none; }
.wanted-modal__description-section textarea.is-suggested:focus {
  background: rgba(248,250,246,.91);
  color: #2f5039 !important;
}
.wanted-modal__form-actions { padding-top: 10px; }
.wanted-modal__form-actions .wanted-modal__button:disabled { opacity: .58; cursor: progress; }

/* My Wanted: one board of cards. Green = private Area Alert; orange = public pin. */
.wanted-modal__mine-content {
  max-width: 840px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
  align-content: start;
}
.wanted-modal__mine-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 17px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(93,137,101,.18);
  box-shadow: 0 3px 10px rgba(33,62,39,.045);
}
.wanted-modal__mine-card.is-paused {
  background: #f7f5f0;
  border-color: #dfc9a5;
  box-shadow: inset 3px 0 0 #c98d42;
}
.wanted-modal__mine-card-head { display: flex; align-items: flex-start; gap: 9px; flex-wrap: wrap; }
.wanted-modal__mine-card-icon {
  display: grid;
  place-items: center;
  width: 37px;
  height: 37px;
  flex: none;
  border-radius: 11px;
  background: #eff5ec;
}
.wanted-modal__mine-card-icon img { width: 22px; height: 22px; object-fit: contain; }
.wanted-modal__mine-main { flex: 1 1 140px; min-width: 0; }
.wanted-modal__mine-main strong { display: block; font-size: 12.5px; line-height: 1.4; color: #274833; }
.wanted-modal__mine-main small { display: block; margin-top: 4px; color: #728473; font-size: 10.5px; line-height: 1.4; }
.wanted-modal__mine-tags { display: flex; gap: 5px; flex-wrap: wrap; flex: 1 1 100%; }
.wanted-modal__mine-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}
.wanted-modal__mine-tag--private { background: #e4f3e6; color: #286445; }
.wanted-modal__mine-tag--public { background: #fff0db; color: #995b1f; }
.wanted-modal__mine-description { margin: 0; color: #566d5c; font-size: 11.5px; line-height: 1.5; }
.wanted-modal__mine-card.is-paused .wanted-modal__mine-description { color: #847969; }
.wanted-modal__mine-card-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: auto; }
.wanted-modal__mine-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 9px;
  font-weight: 800;
  font-size: 10px;
}
.wanted-modal__mine-status--active { color: #246342; background: #e7f4e8; }
.wanted-modal__mine-status--paused { color: #8d5a21; background: #ffeed3; }
.wanted-modal__mine-card-actions button,
.wanted-modal__mine-confirm button {
  border: 1px solid #d8e3d7;
  padding: 6px 10px;
  border-radius: 9px;
  color: #356a49;
  background: #fff;
  font-size: 10.5px;
  font-weight: 800;
}
.wanted-modal__mine-card-actions .wanted-modal__mine-toggle { margin-left: auto; }
.wanted-modal__mine-card-actions .wanted-modal__mine-delete { color: #91605a; border-color: #f0dfda; }
.wanted-modal__mine-confirm {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  align-items: center;
  border-top: 1px solid #e6e1d9;
  padding-top: 10px;
}
.wanted-modal__mine-confirm[hidden] { display: none; }
.wanted-modal__mine-confirm span { font-size: 11px; flex: 1 1 100%; color: #815046; }
.wanted-modal__mine-confirm .is-danger { background: #b74842; color: white; border-color: #b74842; }
.wanted-modal__mine-flash, .wanted-modal__mine-empty {
  grid-column: 1 / -1;
  font-size: 12px;
  color: #2f6444;
  margin: 0;
  padding: 9px 12px;
  border-radius: 11px;
  background: #eef7ed;
}
.wanted-modal__mine-flash--error { background: #fff0ee; color: #9b433c; }
.wanted-modal__mine-replies { width: 100%; flex: 1 1 100%; margin-top: 2px; }
.wanted-modal__mine-replies p { overflow-wrap: anywhere; }
.wanted-modal__mine-content > .wanted-modal__notice { grid-column: 1 / -1; }

@media (max-width: 700px) {
  .wanted-modal__panel--create { padding: 12px 14px 13px; }
  .wanted-modal__compose-head { margin-bottom: 10px; }
  .wanted-modal__compose-head h2 { font-size: 19px; }
  .wanted-modal__compose-head p { font-size: 10.5px; line-height: 1.38; }
  .wanted-modal__section--category { padding-top: 10px; }
  .wanted-modal__subcategory-chips { height: 40px; min-height: 40px; max-height: 40px; }
  .wanted-modal__subcategory { min-height: 27px; padding: 5px 9px; font-size: 10px; }
  .wanted-modal__location-block { padding-top: 9px; gap: 10px; }
  .wanted-modal__description-section { padding-top: 10px; }
  .wanted-modal__description-section textarea,
  .wanted-modal__panel--create:has(.wanted-modal__subcategory-chips:not([hidden])) .wanted-modal__description-section textarea {
    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;
  }
  .wanted-modal__mine-content { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 700px) and (max-height: 780px) {
  .wanted-modal__panel--create { padding-top: 8px; padding-bottom: 8px; }
  .wanted-modal__compose-head { margin-bottom: 6px; }
  .wanted-modal__choice { min-height: 57px; }
  .wanted-modal__category-strip { padding-bottom: 4px; }
  .wanted-modal__subcategory-chips { height: 35px; min-height: 35px; max-height: 35px; }
  .wanted-modal__description-section { padding-top: 7px; }
  .wanted-modal__form-actions { padding-top: 6px; }
}

/* Remove the inner scrollbar from the compact horizontal choice rail. */
.wanted-modal__subcategory-chips {
  box-sizing: border-box;
  padding-block: 3px 4px;
  scrollbar-width: none;
}
.wanted-modal__subcategory-chips::-webkit-scrollbar { display: none; }
.wanted-modal__subcategory { align-self: center; }
@media (max-width: 700px) {
  .wanted-modal__subcategory-chips { height: 38px; min-height: 38px; max-height: 38px; }
}
@media (max-width: 700px) and (max-height: 780px) {
  .wanted-modal__panel--create { padding-top: 6px; padding-bottom: 6px; }
  .wanted-modal__subcategory-chips { height: 35px; min-height: 35px; max-height: 35px; }
}


/* A button's platform-level minimum size must not crop inside the 1-row rail. */
.wanted-modal__subcategory-chips { padding-block: 2px 3px; }
.wanted-modal__subcategory-chips > .wanted-modal__subcategory {
  box-sizing: border-box;
  flex: 0 0 auto;
  height: 29px !important;
  min-height: 29px !important;
  max-height: 29px !important;
  padding: 4px 10px !important;
  line-height: 1.15;
}
@media (max-width: 700px) and (max-height: 780px) {
  .wanted-modal__panel--create { padding-top: 5px; padding-bottom: 5px; }
  .wanted-modal__panel--create:has(.wanted-modal__subcategory-chips:not([hidden])) .wanted-modal__description-section {
    padding-top: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wanted-modal__dialog { animation: none; }
  .wanted-prototype *, .wanted-prototype *::before, .wanted-prototype *::after { transition: none !important; }
}