/* Wall.me V4 approval scale. Readable content with compact task controls.
   Calibrated against the preserved Mobile Shell and Founder feedback. Values are CSS px / logical iOS points.
   One type scale at 375, 390 and 430px. The map keeps its own zoomable labels. */
:root {
  --wm-font-system: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --wm-font-rounded: ui-rounded, var(--wm-font-system);
  --wm-text-title: 18px;
  --wm-text-resource: 17px;
  --wm-text-action: 14px;
  --wm-text-body: 14px;
  --wm-text-secondary: 13px;
  --wm-text-caption: 12px;
  --wm-text-plan-key: 11px;
  --wm-page-inset: 16px;
  --wm-card-radius: 20px;
  --wm-control-height: 34px;
  --wm-primary-height: 44px;
}
.miniapp,.bottom-sheet,#toast {
  font-family: var(--wm-font-system);
  font-size: var(--wm-text-body);
  line-height: 1.5;
  letter-spacing: normal;
}
.miniapp { background: #f6f7f9; padding-top:calc(12px + env(safe-area-inset-top,0px)); }
.miniapp .intro { padding:0 var(--wm-page-inset) 12px; }
.miniapp .task-heading { min-height:40px; gap:12px; }
.miniapp .task-heading h1 { font-size:var(--wm-text-title); line-height:24px; font-weight:650; letter-spacing:-.3px; }
.miniapp .task-heading>.text-button { height:44px; width:44px; min-width:44px; border-radius:12px; background:white; border:1px solid var(--line); }
.miniapp .task-heading .icon { height:21px; width:21px; }
.miniapp .search-controls { margin:0 var(--wm-page-inset); border-radius:14px; }
.miniapp .date-trigger { min-height:54px; padding:9px 10px; gap:7px; }
.miniapp .date-trigger>.date-copy { display:flex; flex-direction:column; gap:2px; min-width:0; }
.miniapp .date-trigger .date-value { font-size:13px; line-height:18px; font-weight:500; white-space:nowrap; }
.miniapp .date-trigger small { font-size:11px; line-height:14px; margin:0; font-weight:400; white-space:nowrap; }
.miniapp .date-trigger>.icon:first-child { width:16px; height:16px; }
.miniapp .date-trigger>.icon:last-child { width:12px; height:12px; }
/* A 34px visible chip inside a 44px hit area keeps the rail light and usable. */
.miniapp .filter-row { padding:6px 0 0 var(--wm-page-inset); gap:6px; }
.miniapp .filter-trigger { min-height:44px; height:44px; min-width:36px; border:0; background:transparent; isolation:isolate; }
.miniapp .filter-trigger::before { content:''; position:absolute; inset:5px 0; background:#fff; border:1px solid var(--line); border-radius:10px; z-index:-1; }
.miniapp .filter-trigger.active::before { border-color:#9ab8e9; background:var(--brand-soft); }
.miniapp .filter-trigger>.icon { width:17px; height:17px; }
.miniapp .chips { padding:0 16px 0 0; gap:6px; }
.miniapp .chip { position:relative; isolation:isolate; min-height:44px; border:0; background:transparent; font-size:12px; line-height:18px; padding:5px 11px; font-weight:500; }
.miniapp .chip::before { content:''; position:absolute; inset:5px 0; border:1px solid var(--line); border-radius:18px; background:#fff; z-index:-1; }
.miniapp .chip.active::before { color:var(--brand); background:var(--brand-soft); border-color:#9cb9ef; }
.miniapp .chip .icon { width:14px; height:14px; }
.miniapp .floor-toolbar { min-height:48px; padding:0 var(--wm-page-inset); gap:8px; }
.miniapp .floor-trigger { font-size:15px; line-height:20px; }
.miniapp .floor-trigger strong { font-weight:600; }
.miniapp .available-count { font-size:var(--wm-text-caption); line-height:18px; padding:3px 7px; }
.miniapp .view-switch { background:#e9edf2; border-radius:10px; }
.miniapp .icon-button { width:34px; min-height:32px; }
.miniapp .icon-button .icon { height:18px; width:18px; }
.miniapp .map-viewport,
.miniapp:has(.team-line) .map-viewport,
.miniapp:has(.quota-line) .map-viewport {
  height:var(--booking-map-height,350px);
  min-height:350px;
  max-height:480px;
  margin:0 12px;
  background:radial-gradient(ellipse at 50% 60%,#fafbfc,#f0f3f6);
}
.miniapp .map-tool { height:42px; width:42px; }
.miniapp .map-tool .icon { width:19px; height:19px; }
.miniapp .legend { min-height:40px; padding:0 var(--wm-page-inset); gap:12px; font-size:var(--wm-text-plan-key); line-height:16px; }
.miniapp .legend-button { width:38px; height:40px; }
.miniapp .legend-button .icon { width:17px; height:17px; }
.miniapp .selection-card { margin:0 var(--wm-page-inset) 4px; border-radius:var(--wm-card-radius); padding:16px; box-shadow:0 3px 12px #243d5206; }
.miniapp .card-top { gap:10px; align-items:center; }
.miniapp .card-top .resource-symbol { height:42px; width:42px; border-radius:12px; }
.miniapp .resource-symbol .icon { width:23px; height:23px; }
.miniapp .card-title { flex:1; }
.miniapp .card-title h2 { font-size:var(--wm-text-resource); line-height:23px; font-weight:650; letter-spacing:-.25px; }
.miniapp .card-title h2 span { font-size:var(--wm-text-secondary); font-weight:400; letter-spacing:normal; }
.miniapp .card-title p { font-size:var(--wm-text-secondary); line-height:18px; margin-top:3px; }
.miniapp .card-top .status { max-width:115px; flex-shrink:0; }
.miniapp .status,.bottom-sheet .status { font-size:var(--wm-text-caption); line-height:17px; font-weight:550; padding:3px 7px; gap:5px; }
.miniapp .amenities { font-size:var(--wm-text-caption); line-height:18px; margin-top:14px; gap:8px 12px; }
.miniapp .amenities .icon { width:15px; height:15px; }
.miniapp .card-actions { gap:8px; margin-top:14px; grid-template-columns:minmax(0,1fr) minmax(0,1.45fr); }
.miniapp .primary,.miniapp .secondary,
.bottom-sheet .primary,.bottom-sheet .secondary {
  min-height:var(--wm-primary-height);
  padding:10px 12px;
  border-radius:11px;
  font-size:var(--wm-text-action);
  line-height:20px;
  font-weight:600;
  white-space:normal;
}
.miniapp .card-actions .primary,.miniapp .card-actions .secondary { white-space:nowrap; }
.miniapp .secondary,.bottom-sheet .secondary { font-weight:500; }
.miniapp .text-button,.bottom-sheet .text-button { font-size:var(--wm-text-secondary); line-height:19px; font-weight:550; }
.miniapp .card-actions button { min-width:0; }
.miniapp .quiet h2 { font-size:var(--wm-text-title); line-height:24px; }
.miniapp .quiet p { font-size:var(--wm-text-body); line-height:21px; }
.miniapp .quiet .secondary { font-size:var(--wm-text-body); }
.miniapp .availability-note { font-size:var(--wm-text-secondary); line-height:19px; }
.miniapp .team-line { margin:0 var(--wm-page-inset) 12px; min-height:44px; gap:10px; }
.miniapp .team-line strong { font-size:var(--wm-text-secondary); line-height:19px; font-weight:600; }
.miniapp .team-line small { font-size:var(--wm-text-caption); line-height:17px; }
.miniapp .team-line .text-button { font-size:var(--wm-text-caption); }
.miniapp .avatars b { width:30px; height:30px; font-size:9px; }
.miniapp .quota-line { margin:0 var(--wm-page-inset) 12px; padding:12px; border-radius:12px; background:#fff; }
.miniapp .quota-line>div:first-child { font-size:var(--wm-text-secondary); line-height:19px; }
.miniapp .quota-line strong { font-size:var(--wm-text-secondary); }
.miniapp .quota-line .icon { width:17px; height:17px; }
.miniapp .quota-line small { font-size:var(--wm-text-caption); line-height:17px; display:block; }
.miniapp .local-footer { font-size:10px; line-height:14px; padding:10px 16px 2px; }
.miniapp .resource-list { margin:0 var(--wm-page-inset); max-height:480px; gap:10px; }
.miniapp .list-resource { padding:14px; min-height:104px; gap:12px; border-radius:18px; }
.miniapp .list-resource strong { font-size:var(--wm-text-action); line-height:22px; font-weight:600; }
.miniapp .list-resource small { font-size:var(--wm-text-secondary); line-height:19px; }
.miniapp .banner { margin:8px var(--wm-page-inset) 4px; padding:12px; gap:8px; }
.miniapp .banner strong { font-size:var(--wm-text-secondary); line-height:19px; }
.miniapp .banner p { font-size:var(--wm-text-caption); line-height:18px; }
.miniapp .banner .text-button { font-size:var(--wm-text-caption); white-space:normal; min-height:44px; }
.miniapp .empty-panel { padding:28px 24px; min-height:360px; }
.miniapp .empty-panel h2 { font-size:var(--wm-text-title); line-height:25px; }
.miniapp .empty-panel p { font-size:var(--wm-text-body); line-height:21px; }
.miniapp .empty-panel .primary { font-size:var(--wm-text-body); }
.miniapp .full-message { padding:20px; left:24px; right:24px; }
.miniapp .full-message strong { font-size:var(--wm-text-resource); line-height:23px; }
.miniapp .full-message p { font-size:var(--wm-text-secondary); line-height:19px; }
.miniapp .full-message .primary { font-size:var(--wm-text-body); }
.miniapp .loading-frame strong { font-size:var(--wm-text-action); }
.miniapp .loading-frame p { font-size:var(--wm-text-secondary); line-height:19px; }
/* Local task sheets use the same type roles and insets as the mini-app body. */
.bottom-sheet { border-radius:24px 24px 0 0; }
.bottom-sheet .sheet-heading { padding:8px var(--wm-page-inset) 10px; }
.bottom-sheet .sheet-heading h2 { font-size:var(--wm-text-title); line-height:25px; font-weight:650; letter-spacing:-.25px; }
.bottom-sheet .sheet-heading .text-button { font-size:var(--wm-text-body); }
.bottom-sheet .sheet-body { padding:8px var(--wm-page-inset) 20px; }
.bottom-sheet .sheet-actions { padding:12px var(--wm-page-inset) 16px; gap:8px; }
.bottom-sheet .sheet-actions>.primary,.bottom-sheet .sheet-actions>.secondary { font-size:var(--wm-text-action); min-width:0; }
.bottom-sheet .sheet-actions>.primary:not(.full) { flex:1.35; }
.bottom-sheet .sheet-actions>.secondary:not(.full) { flex:.85; }
.bottom-sheet .sheet-actions>.primary,.bottom-sheet .sheet-actions>.secondary { white-space:nowrap; }
.bottom-sheet .sheet-actions>.text-button { font-size:var(--wm-text-body); min-height:40px; }
.bottom-sheet .sheet-body>.muted { font-size:var(--wm-text-secondary); line-height:20px; }
.bottom-sheet .sheet-body h3 { font-size:var(--wm-text-action); line-height:23px; letter-spacing:-.15px; }
.bottom-sheet .chip { font-size:13px; line-height:18px; min-height:36px; padding:7px 11px; font-weight:500; }
.bottom-sheet .day { min-height:72px; gap:4px; }
.bottom-sheet .day span { font-size:var(--wm-text-caption); }
.bottom-sheet .day strong { font-size:20px; }
.bottom-sheet .info-card { font-size:var(--wm-text-secondary); line-height:20px; padding:14px; }
.bottom-sheet .info-card p { line-height:20px; }
.bottom-sheet .time-fields label { font-size:var(--wm-text-body); line-height:20px; }
.bottom-sheet .time-fields select { font-size:16px; font-weight:500; min-height:46px; height:46px; }
.bottom-sheet .slot { font-size:var(--wm-text-body); min-height:44px; }
.bottom-sheet .filter-option { min-height:68px; }
.bottom-sheet .filter-option span { font-size:var(--wm-text-body); line-height:21px; }
.bottom-sheet .filter-option small { font-size:var(--wm-text-caption); line-height:17px; }
.bottom-sheet .floor-option { min-height:86px; padding:14px 12px; }
.bottom-sheet .floor-option strong { font-size:var(--wm-text-action); line-height:22px; }
.bottom-sheet .floor-option small { font-size:var(--wm-text-caption); line-height:17px; max-width:175px; }
.bottom-sheet .floor-option>span:last-child { font-size:var(--wm-text-caption); }
.bottom-sheet .detail-info>p { font-size:var(--wm-text-body); line-height:22px; }
.bottom-sheet .detail-facts { font-size:var(--wm-text-secondary); line-height:19px; }
.bottom-sheet .feature-grid { font-size:var(--wm-text-secondary); line-height:19px; }
.bottom-sheet .timeline-slot { min-height:64px; font-size:11px; }
.bottom-sheet .timeline-slot small { font-size:var(--wm-text-caption); }
.bottom-sheet .booking-summary h3 { font-size:22px; line-height:29px; }
.bottom-sheet .booking-summary p { font-size:var(--wm-text-secondary); line-height:19px; }
.bottom-sheet .summary-rows span,.bottom-sheet .summary-rows strong { font-size:var(--wm-text-body); line-height:21px; }
.bottom-sheet .field-label { font-size:var(--wm-text-body); line-height:21px; }
.bottom-sheet .text-input { font-size:var(--wm-text-action); min-height:48px; }
.bottom-sheet .input-hint { font-size:var(--wm-text-caption); line-height:18px; }
.bottom-sheet .policy-note { font-size:var(--wm-text-secondary); line-height:20px; }
.bottom-sheet .field-error { font-size:var(--wm-text-secondary); line-height:20px; }
.bottom-sheet .receipt-caption { font-size:var(--wm-text-caption); line-height:18px; }
.bottom-sheet .receipt h3 { font-size:22px; line-height:29px; font-weight:650; }
.bottom-sheet .receipt>p:not(.muted):not(.receipt-caption) { font-size:var(--wm-text-body); line-height:21px; }
.bottom-sheet .receipt-ticket span,.bottom-sheet .receipt-ticket small { font-size:var(--wm-text-secondary); line-height:20px; }
.bottom-sheet .receipt-ticket strong { font-size:var(--wm-text-title); line-height:25px; }
.bottom-sheet .receipt>.muted { font-size:var(--wm-text-secondary); line-height:20px; }
.bottom-sheet .own-booking h3 { font-size:var(--wm-text-action); line-height:23px; }
.bottom-sheet .own-booking p { font-size:var(--wm-text-secondary); line-height:20px; }
.bottom-sheet .own-booking small { font-size:var(--wm-text-caption); line-height:18px; }
.bottom-sheet .own-actions .text-button { font-size:var(--wm-text-caption); }
.bottom-sheet .sheet-empty h3 { font-size:var(--wm-text-title); line-height:25px; }
.bottom-sheet .sheet-empty p { font-size:var(--wm-text-body); line-height:21px; }
.bottom-sheet .cancel-body>p { font-size:var(--wm-text-body); line-height:21px; }
.bottom-sheet .cancel-body>.muted { font-size:var(--wm-text-secondary); line-height:20px; }
.bottom-sheet .problem-copy { font-size:var(--wm-text-body); line-height:22px; }
.bottom-sheet .alternative-list strong { font-size:var(--wm-text-action); line-height:22px; }
.bottom-sheet .alternative-list small { font-size:var(--wm-text-caption); line-height:18px; }
.bottom-sheet .legend-details>p { font-size:var(--wm-text-secondary); line-height:20px; gap:12px; }
#toast { font-size:var(--wm-text-secondary); line-height:20px; }
@media(max-width:380px) {
  .miniapp .date-trigger { gap:6px; padding-inline:10px; }
  .miniapp .card-top .status { padding-inline:6px; }
  .miniapp .card-title h2 span { display:block; }
  .miniapp .card-title h2 { line-height:22px; }

  .bottom-sheet .own-actions { gap:3px; }
  .bottom-sheet .own-actions .text-button { padding-inline:3px; }
}
@media(min-width:600px) { .bottom-sheet { border-radius:24px; } }
/* Tight plan viewBox + full-width stage. Tools occupy a bottom strip. */
.miniapp .task-heading h1,.miniapp .card-title h2,.bottom-sheet .sheet-heading h2 { font-weight:600; }
.miniapp .map-viewport,
.miniapp:has(.team-line) .map-viewport,
.miniapp:has(.quota-line) .map-viewport { min-height:350px; }
.miniapp .map-transform { inset:30px 8px 50px; }
.miniapp .map-transform>.map-world {
  width:min(100%,calc((var(--booking-map-height,350px) - 82px) * var(--plan-ratio)));
  left:50%;
  top:50%;
  height:auto;
  transform:translate(-50%,-50%);
}
@media(max-width:400px) {
  .miniapp .quota-line small { display:none; }
  .miniapp .quota-line { padding-block:10px; }
}
/* Preserve intended semibold/bold hierarchy on systems with only regular
   fallback fonts. iOS uses the native system font's real weight variants. */
.miniapp,.bottom-sheet,#toast { font-synthesis:weight; }


/* Hover is feedback for pointer devices; touch uses the existing pressed state. */
@media(hover:hover) and (pointer:fine) {
  .miniapp .chip:hover::before,.miniapp .filter-trigger:hover::before { background:#f0f4f8; border-color:#b8c7d4; }
}

/* Native system type. Apple resolves -apple-system / ui-rounded itself. */
.miniapp .task-heading h1,.bottom-sheet .sheet-heading h2,
.bottom-sheet .receipt h3 { font-family:var(--wm-font-rounded); }
.miniapp .zone-text,.miniapp .small-map-text,
.bottom-sheet .zone-text,.bottom-sheet .small-map-text { font-family:var(--wm-font-system); }
.miniapp .map-world,.bottom-sheet .map-world { aspect-ratio:var(--plan-aspect,536/432); }
.miniapp .map-tools { flex-direction:row; right:10px; bottom:9px; border-radius:11px; }
.miniapp .map-tool { width:40px; height:38px; }
.miniapp .map-tool+button { border-top:0; border-left:1px solid var(--line); }
.miniapp .map-scale { bottom:13px; }
.miniapp .neighborhood-pill { left:10px; bottom:11px; padding:6px 8px; font-size:8px; line-height:16px; }
.miniapp .avatars { align-items:center; }
.miniapp .avatars b { display:flex; align-items:center; justify-content:center; flex:0 0 30px; padding:0; font:600 10px/1 var(--wm-font-system); }
.miniapp .avatars b>span,.miniapp .marker-label { display:block; line-height:1; }
.miniapp .desk-dot { display:flex; align-items:center; justify-content:center; line-height:1; padding:0; font-family:var(--wm-font-system); font-weight:600; }
.miniapp .room-target,.miniapp .parking-pin { font-family:var(--wm-font-system); }
.miniapp .you-marker { line-height:1.2; }
.miniapp .room-shape.selected,.bottom-sheet .room-shape.selected { fill:var(--brand-soft); stroke:var(--brand); stroke-width:2; }
.miniapp .parking-shape.selected,.bottom-sheet .parking-shape.selected { stroke:var(--brand); stroke-width:2; }
.bottom-sheet .detail-plan { height:auto; aspect-ratio:536/432; background:var(--canvas); }
.bottom-sheet .detail-plan .map-world { position:relative; top:0; left:0; width:100%; height:auto; transform:none; }
.bottom-sheet .detail-plan:has(.parking-shape) { aspect-ratio:536/416; }
.bottom-sheet .floor-number { display:flex; align-items:center; justify-content:center; line-height:1; }
.bottom-sheet .day strong { line-height:1.2; font-weight:600; }

/* The same picker owns presets, discrete slots, ranges and exact entry. */
.time-selection { display:grid; gap:3px; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:var(--canvas); }
.time-selection>span { font-size:12px; color:var(--muted); }
.time-selection>strong { font-size:20px; line-height:26px; font-weight:600; font-variant-numeric:tabular-nums; }
.time-selection>small { font-size:12px; color:var(--muted); }
.time-modes { display:flex; margin:16px 0; padding:3px; gap:4px; border-radius:11px; background:var(--canvas); }
.time-modes button { flex:1; min-height:36px; border-radius:8px; font-size:13px; font-weight:500; color:var(--muted); }
.time-modes .is-active { background:white; color:var(--ink); box-shadow:0 1px 4px #0000000d; }
.bottom-sheet .time-label { margin:14px 0 8px; font-size:13px; }
.time-duration { display:flex; gap:6px; }
.time-duration button { flex:1; min-height:36px; border:1px solid var(--line); border-radius:10px; font-size:12px; white-space:nowrap; }
.time-duration .is-active { border-color:var(--brand); color:var(--brand); background:var(--brand-soft); }
.time-grid-heading { display:flex; justify-content:space-between; align-items:center; margin:20px 0 10px; gap:8px; }
.bottom-sheet .time-grid-heading h3 { font-size:14px; margin:0; }
.time-grid-heading>span { color:var(--muted); font-size:11px; }
.time-periods { display:flex; gap:4px; border-bottom:1px solid var(--line); }
.time-periods button { min-height:36px; padding:4px 12px; font-size:12px; color:var(--muted); border-bottom:2px solid transparent; }
.time-periods .is-active { border-color:var(--brand); color:var(--brand); font-weight:600; }
.time-instruction { font-size:11px; line-height:16px; color:var(--muted); margin:10px 0; min-height:32px; }
.time-block-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.time-block { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; min-height:44px; gap:1px; border:1px solid var(--line); border-radius:10px; font-size:13px; line-height:18px; font-variant-numeric:tabular-nums; background:#fff; }
.time-block small { font-size:9px; line-height:13px; color:var(--muted); }
.time-block.is-selected { background:var(--brand); border-color:var(--brand); color:white; }
.time-block.is-selected small { color:#fff; }
.time-block.is-unavailable { color:var(--sap-color-text-disabled); background:repeating-linear-gradient(135deg,var(--canvas),var(--canvas) 4px,#e8e8ee 4px,#e8e8ee 5px); text-decoration:line-through; opacity:.65; }
.time-preset-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.time-preset { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; min-height:68px; gap:4px; border:1px solid var(--line); padding:10px 12px; border-radius:12px; text-align:left; }
.time-preset strong { font-size:13px; line-height:18px; font-weight:500; }
.time-preset span { font-size:11px; line-height:16px; color:var(--muted); }
.time-preset.is-selected { border-color:var(--brand); background:var(--brand-soft); }
.time-preset.is-selected strong { color:var(--brand); }
.time-more { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:12px; }
.time-more>span { font-size:10px; color:var(--muted); max-width:115px; text-align:right; }
.time-exact { border-top:1px solid var(--line); margin-top:6px; }
.time-exact summary { cursor:pointer; font-size:13px; font-weight:500; min-height:44px; padding:12px 0; color:var(--brand); }
.time-exact .time-fields { margin-top:4px; }
.time-exact .text-input { width:100%; padding:8px 12px; font-size:16px; }
.time-added { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.time-added-range { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:34px; padding:6px 10px; border-radius:9px; background:var(--brand-soft); color:var(--brand); font-size:11px; }
.time-added-range>span { font-size:16px; }
.receipt-windows { display:grid; gap:8px; margin:14px 0; padding:14px; background:var(--canvas); border-radius:12px; font-size:13px; }
.receipt-windows small { color:var(--muted); line-height:18px; }
@media(hover:hover) and (pointer:fine) {
 .time-block:not(:disabled):not(.is-selected):hover,.time-preset:not(:disabled):hover { border-color:var(--brand); background:var(--brand-soft); }
 .time-duration button:hover,.time-modes button:hover,.time-periods button:hover { color:var(--brand); }
}

/* Detail thumbnails retain the selected point; the illustration is inert. */
.bottom-sheet .detail-plan .map-target.selected { display:flex; }
.bottom-sheet .desk-dot { display:flex; align-items:center; justify-content:center; line-height:1; font-family:var(--wm-font-system); }
.bottom-sheet .marker-label { display:block; line-height:1; }