/* ENISHI areas: a place to meet, and a separate choice to work online. */
.area-editor {
  min-width: 0;
  padding: 17px 18px 16px;
  border: 1px solid #e8d0db;
  border-radius: 12px;
  background: linear-gradient(150deg, #fffbfc, #fff8fa);
}
.area-editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; color: #6b4656; font-size: 12px; font-weight: 500; line-height: 1.8; }
.area-editor-heading > span:first-child { min-width: 0; }
.area-selection-count { flex-shrink: 0; padding: 2px 8px; border: 1px solid #e5cbd6; border-radius: 20px; background: #f9eaf0; color: #8b3d56; font-size: 10px; font-weight: 400; line-height: 1.8; white-space: nowrap; }
.area-help { margin: 3px 0 7px; color: #8a6e7c; font-size: 10px; line-height: 1.9; font-weight: 400; overflow-wrap: anywhere; }
.area-special-options { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-bottom: 5px; }
.area-check { display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 33px; margin: 0; padding: 5px 7px; border: 1px solid transparent; border-radius: 6px; color: #725663; background: transparent; font-size: 11px; font-weight: 400; line-height: 1.6; cursor: pointer; transition: background .18s, border-color .18s; }
.area-check input, .area-online-choice > input, .area-search-online > input { flex: 0 0 14px; width: 14px; height: 14px; padding: 0; margin: 0; accent-color: var(--green, #8b3d56); cursor: pointer; }
.area-check:has(input:checked) { border-color: #e2c0cf; background: #faeaf1; color: #7d3550; }
.area-check:hover { background: #faeff4; }
.area-check.is-special { min-width: 108px; min-height: 36px; padding: 7px 11px; border-color: #e5cdd8; border-radius: 8px; background: #fffdfc; }
.area-check.is-special:has(input:checked) { border-color: #c895aa; background: #f8e6ee; }
.area-prefecture-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 9px 11px; min-width: 0; }
.area-group { min-width: 0; border: 1px solid #e8d5de; border-radius: 9px; background: #fffdfd; overflow: hidden; }
.area-group > summary { display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 42px; padding: 10px 12px; color: #73515f; font-size: 11px; font-weight: 500; line-height: 1.7; list-style: none; cursor: pointer; user-select: none; transition: background .18s; }
.area-group > summary::-webkit-details-marker { display: none; }
.area-group > summary::marker { content: ''; }
.area-group > summary::after { content: ''; flex: 0 0 6px; width: 6px; height: 6px; margin: -3px 1px 0 1px; border-right: 1.5px solid #a17c8d; border-bottom: 1.5px solid #a17c8d; transform: rotate(45deg); }
.area-group > summary > span:first-child { flex: 1; min-width: 0; }
.area-group > summary:hover { background: #fbf2f6; }
.area-group > summary:focus-visible { position: relative; outline: 2px solid var(--gold, #b08a50); outline-offset: -3px; border-radius: 8px; }
.area-group[open] > summary { border-bottom: 1px solid #efdee6; background: #fbf0f5; }
.area-group[open] > summary::after { margin-top: 3px; transform: rotate(225deg); }
.area-group-count { display: inline-block; flex-shrink: 0; min-width: 25px; padding: 1px 5px; border-radius: 4px; background: #f8efdf; color: #91703f; font-size: 9px; font-weight: 400; line-height: 1.7; text-align: center; white-space: nowrap; }
.area-prefecture-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; min-width: 0; padding: 7px 6px 8px; }
.area-selected-summary { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; max-height: 132px; margin-top: 7px; padding-top: 12px; border-top: 1px solid #ecdbe3; overflow-y: auto; overscroll-behavior: contain; color: #967d89; font-size: 10px; line-height: 1.8; scrollbar-width: thin; scrollbar-color: #ddbfce transparent; }
.area-selected-summary:empty { display: none; }
.area-selection-chip { display: inline-flex; align-items: center; max-width: 100%; padding: 3px 8px; border: 1px solid #e5c6d3; border-radius: 5px; background: #f9eaf0; color: #85516a; font-size: 10px; font-weight: 400; line-height: 1.65; white-space: nowrap; }
.area-online-choice { display: flex; align-items: flex-start; gap: 9px; min-width: 0; margin-top: 7px; padding-top: 14px; border-top: 1px solid #ecdbe3; cursor: pointer; }
.area-online-choice > input { margin-top: 4px; }
.area-online-choice > span { min-width: 0; }
.area-online-choice strong { display: block; color: #765062; font-size: 11px; font-weight: 500; line-height: 1.85; }
.area-editor .area-online-choice small { display: block; margin-top: 3px; color: #967b89; font-size: 10px; font-weight: 400; line-height: 1.85; }

/* Area search is visible above the results at every viewport width. */
.area-search-panel { display: block; min-width: 0; margin: 0 0 23px; padding: 21px 23px 17px; border: 1px solid #e5cbd7; border-radius: 15px; background: linear-gradient(125deg, #fffdfd 0%, #fff7fa 73%, #fcf6ed 100%); box-shadow: 0 4px 20px #8b3d5603; }
.area-search-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-width: 0; }
.area-search-heading > div { min-width: 0; }
.area-search-kicker { display: block; margin-bottom: 3px; color: #9b7848; font-family: Arial, sans-serif; font-size: 8px; font-weight: 600; line-height: 1.8; letter-spacing: .16em; }
.area-search-heading h2 { color: #684353; font-size: 16px; font-weight: 500; line-height: 1.7; letter-spacing: .025em; }
.area-search-heading > .text-link { flex-shrink: 0; padding: 5px 0 5px 5px; color: #926b7d; font-size: 10px; }
.area-search-heading > .text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.area-search-groups { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0; margin: 17px 0 16px; }
.area-filter-chip { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; min-height: 33px; padding: 6px 12px; border: 1px solid #dec0cd; border-radius: 20px; background: #fffdfc; color: #865c70; font-size: 11px; font-weight: 400; line-height: 1.7; white-space: nowrap; transition: background .18s, border-color .18s, color .18s; }
.area-filter-chip:hover { border-color: #b98098; background: #fbecf2; color: #8b3d56; }
.area-filter-chip[aria-pressed="true"] { border-color: var(--green, #8b3d56); background: var(--green, #8b3d56); color: #fff9fb; }
.area-filter-chip[aria-pressed="true"]:hover { border-color: var(--dark, #6f2d43); background: var(--dark, #6f2d43); }
.area-search-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 13px; min-width: 0; }
.area-search-select-label { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: #8b6c7b; font-size: 10px; font-weight: 400; line-height: 1.8; }
.area-search-select { display: block; width: 100%; max-width: 100%; min-width: 0; min-height: 41px; padding: 9px 32px 9px 12px; border: 1px solid #dfc4d0; border-radius: 8px; background-color: #fffdfc; color: #795768; font-size: 12px; line-height: 1.75; transition: border-color .18s, box-shadow .18s; }
.area-search-select:focus { border-color: #b2778f; outline: none; box-shadow: 0 0 0 3px #b2778f16; }
.area-search-online { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 41px; padding: 9px 12px; border: 1px solid #e3cbd6; border-radius: 8px; background: #fffdfc; color: #805a6c; font-size: 11px; font-weight: 400; line-height: 1.75; white-space: nowrap; cursor: pointer; transition: background .18s, border-color .18s; }
.area-search-online:has(input:checked) { border-color: #cb9ab0; background: #f9e8ef; color: #813d58; }
.area-search-online:hover { background: #fbf0f5; }
.area-search-rule { margin-top: 14px; padding-top: 11px; border-top: 1px solid #efdee5; color: #9b818e; font-size: 9px; font-weight: 400; line-height: 1.9; overflow-wrap: anywhere; }

/* The 47 base-location choices stay inside a compact, optional disclosure. */
.base-region-filter { min-width: 0; margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--line, #ecdce2); }
.base-region-filter > summary { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-width: 0; padding: 10px 30px 10px 11px; border: 1px solid #e5cad6; border-radius: 8px; background: #fcf0f5; color: #795367; font-size: 11px; font-weight: 500; line-height: 1.75; list-style: none; cursor: pointer; }
.base-region-filter > summary::-webkit-details-marker { display: none; }
.base-region-filter > summary::marker { content: ''; }
.base-region-filter > summary::after { content: ''; position: absolute; right: 12px; top: 19px; width: 6px; height: 6px; border-right: 1.5px solid #a17c8d; border-bottom: 1.5px solid #a17c8d; transform: rotate(45deg); }
.base-region-filter > summary > span { display: block; color: #a27e4b; font-size: 9px; font-weight: 400; line-height: 1.75; }
.base-region-filter > summary:hover { background: #fae9f1; }
.base-region-filter > summary:focus-visible { outline: 2px solid var(--gold, #b08a50); outline-offset: 3px; }
.base-region-filter[open] > summary::after { top: 22px; transform: rotate(225deg); }
.base-region-options.filter-group { display: block; width: 100%; min-width: 0; max-height: 260px; padding: 8px 8px 6px; margin: 8px 0 0; border: 1px solid #ebd8e1; border-radius: 8px; background: #fffafd; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #ddbfce transparent; }
.base-region-options > legend.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.base-region-options .check-label { min-height: 30px; gap: 8px; margin: 2px 0; padding: 3px 3px; border-radius: 5px; color: #805e71; font-size: 11px; line-height: 1.8; }
.base-region-options .check-label:hover { background: #f8eaf1; }
.base-region-options .check-label input { flex: 0 0 14px; width: 14px; height: 14px; margin: 0; accent-color: var(--green, #8b3d56); }

/* Compact cards and the full profile share the same geographic vocabulary. */
.area-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; min-width: 0; color: #866b78; font-size: 10px; font-weight: 400; line-height: 1.75; }
.area-summary.is-compact { margin: 0 0 12px; }
.area-service-label { flex-shrink: 0; margin-right: 1px; color: #9c818f; font-size: 9px; font-weight: 400; line-height: 1.75; }
.area-summary-chip { display: inline-flex; align-items: center; max-width: 100%; padding: 2px 6px; border: 1px solid #ecd6e0; border-radius: 4px; background: #fcf2f6; color: #856075; font-size: 9px; font-weight: 400; line-height: 1.65; white-space: nowrap; }
.area-online-status { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 6px; border: 1px solid #e6d3b1; border-radius: 4px; background: #fbf4e8; color: #94703d; font-size: 9px; font-weight: 400; line-height: 1.65; white-space: nowrap; }
.area-online-status::before { content: ''; flex: 0 0 4px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.area-online-status.is-online { border-color: #e4cfab; background: #f9f0df; color: #8c6833; }
.area-online-status.is-offline { border-color: #e8dce2; background: #fdf8fa; color: #9b8590; }
.area-profile-summary { min-width: 0; margin: 0; }
.area-profile-summary > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: start; gap: 15px; min-width: 0; padding: 14px 0; border-bottom: 1px solid #efe1e7; }
.area-profile-summary > div:first-child { padding-top: 0; }
.area-profile-summary > div:last-child { border-bottom: 0; padding-bottom: 0; }
.area-profile-summary dt { margin: 0; color: #947b88; font-size: 11px; font-weight: 400; line-height: 1.9; }
.area-profile-summary dd { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0; margin: 0; color: #765566; font-size: 12px; font-weight: 400; line-height: 1.9; overflow-wrap: anywhere; }
.area-profile-summary .area-summary-chip, .area-profile-summary .area-online-status { padding: 3px 8px; font-size: 10px; }
.area-fallback-note { display: block; flex-basis: 100%; margin-top: 1px; color: #a38c97; font-size: 10px; line-height: 1.8; }

@media (max-width: 980px) {
  .area-prefecture-options { grid-template-columns: minmax(0, 1fr); }
  .area-editor { padding: 16px; }
  .area-group > summary { padding-left: 11px; padding-right: 11px; }
  .area-search-panel { padding: 20px 21px 17px; }
  .area-profile-summary > div { grid-template-columns: 97px minmax(0, 1fr); gap: 13px; }
}
@media (max-width: 620px) {
  .area-editor { padding: 15px 13px; border-radius: 11px; }
  .area-editor-heading { gap: 9px; font-size: 12px; }
  .area-selection-count { padding: 2px 7px; font-size: 9px; }
  .area-help { margin-top: 3px; font-size: 10px; }
  .area-special-options { gap: 8px; }
  .area-check.is-special { flex: 1; min-width: 0; min-height: 39px; font-size: 11px; }
  .area-prefecture-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .area-group { border-radius: 8px; }
  .area-group > summary { min-height: 43px; padding: 10px 8px; gap: 5px; font-size: 11px; }
  .area-group > summary::after { flex-basis: 5px; width: 5px; height: 5px; margin-right: 0; }
  .area-group-count { min-width: 22px; padding: 1px 4px; font-size: 8px; }
  .area-prefecture-options { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 6px 4px 7px; }
  .area-check { gap: 6px; min-height: 37px; padding: 7px 6px; font-size: 11px; }
  .area-check input, .area-online-choice > input, .area-search-online > input { flex-basis: 15px; width: 15px; height: 15px; }
  .area-selected-summary { max-height: 124px; gap: 5px; padding-top: 11px; }
  .area-selection-chip { padding: 3px 7px; font-size: 10px; }
  .area-online-choice { gap: 8px; margin-top: 6px; padding-top: 13px; }
  .area-online-choice strong { font-size: 11px; }
  .area-editor .area-online-choice small { font-size: 10px; }
  .area-search-panel { display: block; padding: 19px 17px 16px; margin-bottom: 21px; border-radius: 13px; }
  .area-search-heading { align-items: flex-start; gap: 10px; }
  .area-search-kicker { font-size: 7px; letter-spacing: .13em; }
  .area-search-heading h2 { font-size: 15px; letter-spacing: .01em; }
  .area-search-heading > .text-link { margin-top: 17px; padding-left: 0; font-size: 9px; }
  .area-search-groups { gap: 7px 6px; margin-top: 15px; margin-bottom: 16px; }
  .area-filter-chip { min-height: 34px; padding: 6px 11px; font-size: 11px; }
  .area-search-controls { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .area-search-select-label { gap: 6px; font-size: 10px; }
  .area-search-select { min-height: 44px; padding: 9px 32px 9px 11px; font-size: 16px; }
  .area-search-online { justify-self: start; min-height: 41px; padding: 9px 12px; font-size: 11px; }
  .area-search-rule { margin-top: 13px; padding-top: 11px; font-size: 9px; }
  .area-summary.is-compact { gap: 5px; margin-bottom: 12px; }
  .area-service-label { font-size: 9px; }
  .area-summary-chip, .area-online-status { font-size: 9px; }
  .area-profile-summary > div { grid-template-columns: 88px minmax(0, 1fr); gap: 11px; padding: 14px 0; }
  .area-profile-summary dt { font-size: 10px; line-height: 2; }
  .area-profile-summary dd { gap: 6px; font-size: 11px; }
  .area-profile-summary .area-summary-chip, .area-profile-summary .area-online-status { padding: 3px 7px; font-size: 10px; }
  .area-fallback-note { font-size: 9px; }
}
@media (max-width: 360px) {
  .area-editor { padding-left: 11px; padding-right: 11px; }
  .area-group > summary { gap: 4px; padding-left: 7px; padding-right: 7px; font-size: 10px; }
  .area-group-count { min-width: 21px; padding-left: 3px; padding-right: 3px; }
  .area-check { padding-left: 5px; padding-right: 4px; font-size: 10px; }
  .area-search-panel { padding-left: 14px; padding-right: 14px; }
  .area-search-heading { gap: 8px; }
  .area-search-heading h2 { font-size: 14px; }
  .area-search-heading > .text-link { font-size: 8px; }
  .area-filter-chip { padding-left: 10px; padding-right: 10px; font-size: 10px; }
  .area-profile-summary > div { grid-template-columns: 79px minmax(0, 1fr); gap: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .area-check, .area-group > summary, .area-filter-chip, .area-search-select, .area-search-online { transition: none; }
}
@media(max-width:620px){
  .top-actions .auth-account-link{font-size:0;gap:0;width:26px;min-width:26px}
  .top-actions .auth-account-link .icon{width:17px;height:17px}
  .top-actions .demo-badge{white-space:nowrap;flex-shrink:0}
  .page-title-row:has(.filter-toggle){display:grid;gap:12px}
  .page-title-row .filter-toggle{white-space:nowrap;justify-self:start}
}