/* Report 155, look 2 Map first: scoped to body.maplook-mapfirst.
   The idea (report 153 mockup idea2, "map first"): the map fills the step; a floating card holds the number/text
   and the answers; tools sit on a right-hand rail; Street View is a corner picture that enlarges on click.
   Mockup: F:\tmp\juno_workers\map153\mockups\idea2_map_first.html (open straight from disk, idea2_map_first.html).

   Built against F:\tmp\juno_workers\map155\HOOK.md's stable ids (report 155's one-step "Your property" step),
   which had not landed as real markup in the worktree yet at build time -- only the hook commit itself (the
   body.maplook-<name> class + every look's css/js include). Every rule below is written to HOOK.md's ids/classes
   and is defensive by construction (each just restyles/repositions an element the hook promises exists; if a
   selector does not match anything the rule simply never applies). Recheck against the real page once it lands.

   What this reuses rather than rebuilding:
     - `#s2Toolbar.mnm-s2-toolbar` (already a real, working tool bar with data-tool buttons and a `title` on each
       -- the mockup's rail, restyled into a vertical rail with icon-only buttons; the browser's native title
       tooltip stands in for the mockup's custom hover label) instead of a second, parallel toolbar;
     - the existing pick-map / Street View pair (`#mapConfirm` > `.mnm-confirm-views` > `#svView` / `#aerialConfirmView`)
       and the selection text (`#aerialPickFoot` / `#aerialPickText`, with its own "These are two buildings" / "Cut
       here" / "Undo" / "Cancel" links already rendered by quote.js) instead of new controls.
   maplook_mapfirst.js gathers the head/hint/selection-text/live-numbers/shape-list/send-bar into one floating
   card (.mfl-panel) and turns Street View into a corner picture-in-picture (.mfl-pip); everything else here is
   pure CSS repositioning of real ids from HOOK.md. */

body.maplook-mapfirst {
  --mfl-panel-w: 340px;      /* the floating card, on a computer */
  --mfl-rail-btn: 44px;      /* rail button size */
  --mfl-pip-w: 200px;        /* Street View picture-in-picture, folded */
  --mfl-sheet-peek: 64px;    /* how much of the phone's folded card still shows */
}

/* ---- The map card is the stage: full-bleed, everything else floats over it ---- */
body.maplook-mapfirst #s2MapBody.mnm-prop-card {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  height: clamp(420px, calc(100svh - 220px), 1000px);
  border-radius: var(--mnm-radius-container);
}
body.maplook-mapfirst #s2MapBody.mnm-prop-card > #mapConfirm.mnm-confirm-wrap {
  position: absolute; inset: 0; margin: 0; width: auto; display: block;
}
body.maplook-mapfirst #s2MapBody.mnm-prop-card .mnm-confirm-views { position: relative; height: 100%; display: block; }
body.maplook-mapfirst #s2MapBody.mnm-prop-card #aerialConfirmView.mnm-confirm-view {
  position: absolute; inset: 0; width: auto; height: auto; border: 0; border-radius: 0;
}
body.maplook-mapfirst #s2MapBody.mnm-prop-card #aerialConfirmView > .mnm-confirm-view-head { display: none; }
body.maplook-mapfirst #s2MapBody.mnm-prop-card #aerialConfirmView .mnm-confirm-view-body,
body.maplook-mapfirst #s2MapBody.mnm-prop-card #aerialConfirmView .mnm-confirm-view-media,
body.maplook-mapfirst #s2MapBody.mnm-prop-card #aerialConfirmView .mnm-pick-map { height: 100%; width: 100%; }
/* maplook_mapfirst.js moves the head/hint/live-numbers/shape-list/send-bar into one .mfl-panel (see below) as
   soon as it runs (a plain, non-deferred script at the end of the body, so before first paint in practice);
   nothing here needs to hide them meanwhile. */

/* ---- Street View: a corner picture-in-picture over the map, enlarges on click ---- */
body.maplook-mapfirst #s2MapBody.mnm-prop-card #svView.mnm-confirm-view {
  position: absolute; left: 16px; bottom: 16px; top: auto; right: auto; width: var(--mfl-pip-w);
  z-index: 3; box-shadow: var(--mnm-shadow-lg); border: 3px solid var(--mnm-surface); cursor: pointer;
  transition: width .15s ease;
}
body.maplook-mapfirst #s2MapBody.mnm-prop-card #svView.mnm-confirm-view .mnm-confirm-view-body,
body.maplook-mapfirst #s2MapBody.mnm-prop-card #svView.mnm-confirm-view .mnm-confirm-view-media { height: 120px; }
body.maplook-mapfirst #s2MapBody.mnm-prop-card #svView.mnm-confirm-view > .mnm-confirm-view-head {
  position: absolute; z-index: 2; top: 6px; left: 6px; right: auto; width: auto;
  background: var(--mnm-bg-white-8); border-radius: var(--mnm-radius-pill); padding: 2px 9px 2px 8px;
  border: 0; font-size: var(--mnm-fs-xs); gap: 4px;
}
body.maplook-mapfirst #s2MapBody.mnm-prop-card #svView.mnm-confirm-view > .mnm-confirm-view-head .mnm-confirm-view-sub { display: none; }
body.maplook-mapfirst #s2MapBody.mnm-prop-card #svView.mnm-confirm-view > .mnm-confirm-view-foot { padding: 4px 8px; gap: 4px; }
body.maplook-mapfirst #s2MapBody.mnm-prop-card #svView.mnm-confirm-view > .mnm-confirm-view-foot .mnm-confirm-view-btn {
  padding: 3px 8px; font-size: var(--mnm-fs-xs);
}
body.maplook-mapfirst #s2MapBody.mnm-prop-card #svView.mfl-pip-big { width: min(560px, calc(100% - 32px)); cursor: zoom-out; }
/* report 157: the structure sizes Street View by --mnm-q-sv-h (the picture fills its box: no white filler) */
body.maplook-mapfirst #s2MapBody.mnm-prop-card #svView.mnm-confirm-view { --mnm-q-sv-h: 120px; }
body.maplook-mapfirst #s2MapBody.mnm-prop-card #svView.mfl-pip-big { --mnm-q-sv-h: 320px; }
body.maplook-mapfirst #s2MapBody.mnm-prop-card #svView.mfl-pip-big .mnm-confirm-view-body,
body.maplook-mapfirst #s2MapBody.mnm-prop-card #svView.mfl-pip-big .mnm-confirm-view-media { height: 320px; }

/* ---- The toolbar becomes a rail on the map's right edge (icon-only; the button's own title = the hover label) ---- */
body.maplook-mapfirst #s2MapBody.mnm-prop-card #s2Toolbar.mnm-s2-toolbar {
  position: absolute; right: 16px; top: 50%; bottom: auto; left: auto; transform: translateY(-50%);
  z-index: 4; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 6px; width: auto; max-width: none;
  background: var(--mnm-bg-white-8); padding: 6px; border-radius: var(--mnm-radius-container);
  box-shadow: var(--mnm-shadow-lg); border: 0;
}
body.maplook-mapfirst #s2Toolbar.mnm-s2-toolbar .mnm-map-toolbtn {
  width: var(--mfl-rail-btn); height: var(--mfl-rail-btn); min-height: 0; padding: 0; font-size: 0;
  display: flex; align-items: center; justify-content: center;
}
body.maplook-mapfirst #s2Toolbar.mnm-s2-toolbar .mnm-map-toolbtn i { font-size: var(--mnm-fs-lg); margin: 0; }
body.maplook-mapfirst #s2Toolbar.mnm-s2-toolbar .mnm-s2-expand-label { display: none; }

/* ---- The floating card: head + hint + selection text/cut links + live numbers + shape list + send bar ---- */
body.maplook-mapfirst #s2MapBody.mnm-prop-card .mfl-panel {
  position: absolute; left: 16px; top: 16px; right: auto; bottom: auto;
  width: var(--mfl-panel-w); max-width: calc(100% - 32px); max-height: calc(100% - 32px); overflow: auto;
  z-index: 4; display: flex; flex-wrap: nowrap; flex-direction: column; align-items: stretch; gap: 10px;
  background: var(--mnm-bg-white-8); border: 0; border-radius: var(--mnm-radius-container);
  box-shadow: var(--mnm-shadow-lg); padding: 14px; font-size: var(--mnm-fs-sm); color: var(--mnm-muted-3);
  min-height: 0;
}
body.maplook-mapfirst .mfl-panel .mnm-prop-head { padding: 0; background: none; border: 0; }
body.maplook-mapfirst .mfl-panel #propTitle { font-weight: 800; font-size: var(--mnm-fs-lg); color: var(--mnm-ink); }
body.maplook-mapfirst .mfl-panel #propSub { color: var(--mnm-muted); }
body.maplook-mapfirst .mfl-panel #aerialPickText { line-height: 1.5; }
body.maplook-mapfirst .mfl-panel #aerialPickText strong { color: var(--mnm-ink); }
body.maplook-mapfirst .mfl-panel .mnm-s2-sendbar { display: flex; flex-wrap: wrap; gap: 6px; }
body.maplook-mapfirst .mfl-panel #aerialPickText a {
  display: inline-block; margin: 6px 6px 0 0; padding: 0 12px; min-height: 34px; line-height: 34px;
  border: 1px solid var(--mnm-line); border-radius: var(--mnm-radius-pill); background: var(--mnm-surface);
  color: var(--mnm-ink); text-decoration: none; font-weight: 600; font-size: var(--mnm-fs-sm);
}
body.maplook-mapfirst .mfl-panel .mnm-pick-exists { margin-top: 4px; }
body.maplook-mapfirst .mfl-panel #propContinueBtn,
body.maplook-mapfirst .mfl-panel #s2MapSendBtn { width: 100%; justify-content: center; margin-top: 2px; }

/* ---- Phone: the card stops being one overlaid stage. A floating panel over the FULL card can cover a
   building lower on the map (report 155's own per-look browser test, 390: a corner drag landed on the panel,
   not the handle -- elementFromPoint confirmed it, see this look's CHECKPOINT.md). Below 560px the map keeps
   a fixed, generous block of its own (still the biggest thing on the screen, still "map first"); the card is
   Street View PIP + rail; the panel follows it in NORMAL FLOW instead of floating on top, so nothing on the
   map can ever be covered by it. The fold/grab handle no longer has anything to do (nothing to uncover). ---- */
@media (max-width: 560px) {
  body.maplook-mapfirst #s2MapBody.mnm-prop-card { height: auto; min-height: 0; overflow: visible; }
  body.maplook-mapfirst #s2MapBody.mnm-prop-card > #mapConfirm.mnm-confirm-wrap {
    position: static; inset: auto; height: 56vh; min-height: 320px; margin-bottom: 10px; overflow: hidden;
  }
  body.maplook-mapfirst #s2MapBody.mnm-prop-card .mfl-panel {
    position: static; left: auto; top: auto; right: auto; bottom: auto; width: auto; max-width: none;
    max-height: none; overflow: visible; border: 1.5px solid var(--mnm-line);
  }
  body.maplook-mapfirst .mfl-grab { display: none; }
  body.maplook-mapfirst #s2MapBody.mnm-prop-card #svView.mnm-confirm-view { left: 12px; right: auto; top: 12px; bottom: auto; width: 108px; }
  body.maplook-mapfirst #s2MapBody.mnm-prop-card #svView.mnm-confirm-view .mnm-confirm-view-body,
  body.maplook-mapfirst #s2MapBody.mnm-prop-card #svView.mnm-confirm-view .mnm-confirm-view-media { height: 72px; }
  body.maplook-mapfirst #s2MapBody.mnm-prop-card #svView.mfl-pip-big { width: calc(100% - 24px); }
  body.maplook-mapfirst #s2MapBody.mnm-prop-card #s2Toolbar.mnm-s2-toolbar {
    top: 12px; right: 12px; bottom: auto; transform: none; flex-direction: row; flex-wrap: wrap; width: min(200px, calc(100% - 24px));
  }
}

/* ==== Report 157: Map first as a SKIN on the one-page structure (contract: F:\tmp\juno_workers\onepage\HOOK2.md) ====
   The idea stays (report 153 idea 2): the map is the stage, a glass card holds the words and Continue, the tools are a
   rail on the map's right edge, Street View a corner picture that enlarges on a click. What changed for the column
   layout: the stage fills the map column to the screen's height; the card sits top-left, narrower, and tells the map
   how much of it it covers (--mnm-q-map-inset-left, read by quote.js) so the address and every selected building are
   centred in the clear part; the picture sits bottom-right (the mockup's corner); the rail shows only Polygon, Line
   and More tools (the rest open under More); the active tool and Continue are the site's blue, as in the mockup. */
body.maplook-mapfirst {
  --mfl-panel-w: 300px;
  --mfl-on: var(--mnm-brand-fill);
  --mnm-q-page-bg: var(--mnm-bg-2);
  --mnm-q-panel-bg: var(--mnm-surface);
  --mnm-q-panel-ink: var(--mnm-ink);
  --mnm-q-panel-muted: var(--mnm-muted);
  --mnm-q-panel-line: var(--mnm-line);
  --mnm-q-panel-shadow: var(--mnm-shadow-md);
  --mnm-q-pane-bg: var(--mnm-surface);
  --mnm-q-pane-line: var(--mnm-line);
  --mnm-q-field-bg: var(--mnm-surface);
  --mnm-q-field-ink: var(--mnm-ink);
  --mnm-q-summary-bg: var(--mnm-bg);
  --mnm-q-chat-bg: var(--mnm-surface);
  --mnm-q-chat-ink: var(--mnm-ink);
  --mnm-q-chat-line: var(--mnm-line);
  --mnm-q-chat-head-bg: var(--mnm-surface);
  --mnm-q-chat-head-ink: var(--mnm-ink);
  --mnm-q-chat-shadow: var(--mnm-shadow-lg);
  --mnm-q-accent: var(--mnm-brand-fill);
  --mnm-q-accent-ink: var(--mnm-brand-ink);
}
@media (min-width: 561px) {
  body.maplook-mapfirst #s2MapBody.mnm-prop-card { height: clamp(460px, calc(100svh - var(--mnm-q-bars, 120px) - 40px), 1000px); border: 0; }
  body.maplook-mapfirst #aerialPickDiv { --mnm-q-map-inset-left: calc(var(--mfl-panel-w) + 16px); --mnm-q-map-inset-right: 72px; }
  body.maplook-mapfirst #s2MapBody.mnm-prop-card .mfl-panel { gap: 8px; padding: 12px 14px; }
  body.maplook-mapfirst .mfl-panel #propSub { display: none; }
  body.maplook-mapfirst .mfl-panel #s2MapLiveNums { font-size: var(--mnm-fs-lg); font-weight: 800; color: var(--mnm-ink); padding: 0; background: none; border: 0; }
  body.maplook-mapfirst .mfl-panel .mnm-pick-foot, body.maplook-mapfirst .mfl-panel .mnm-s2-sendbar { padding: 0; background: none; border: 0; }
  /* the picture in the mockup's corner (bottom-right), 5:3; enlarged on a click */
  body.maplook-mapfirst .mnm-q-panel #s2 #mapConfirm.is-big #svView.mnm-confirm-view { left: auto; right: 16px; bottom: 16px; width: 220px; --mnm-q-sv-h: 132px; }
  body.maplook-mapfirst .mnm-q-panel #s2 #mapConfirm.is-big #svView.mfl-pip-big { width: min(560px, calc(100% - var(--mfl-panel-w) - 48px)); --mnm-q-sv-h: 336px; }
  body.maplook-mapfirst .mfl-grab { display: none; }
  /* the rail: never taller than the stage */
  body.maplook-mapfirst #s2MapBody.mnm-prop-card #s2Toolbar.mnm-s2-toolbar { max-height: calc(100% - 200px); overflow-y: auto; }
}
/* the rail shows only what is needed (Joseph 19:5x): Polygon, Line, More tools; Finish only while drawing */
body.maplook-mapfirst #s2Toolbar.mnm-s2-toolbar:not(.more-open) .mnm-map-toolbtn:not([data-tool="polygon"]):not([data-tool="line"]):not([data-tool="more"]):not([data-tool="finish"]),
body.maplook-mapfirst #s2Toolbar.mnm-s2-toolbar .mnm-map-toolbtn[data-tool="finish"]:disabled,
body.maplook-mapfirst #s2Toolbar.mnm-s2-toolbar .mnm-map-toolbtn.is-off { display: none; }
body.maplook-mapfirst #s2Toolbar.mnm-s2-toolbar .mnm-map-toolbtn { background: transparent; border: 0; color: var(--mnm-ink); }
body.maplook-mapfirst #s2Toolbar.mnm-s2-toolbar .mnm-map-toolbtn.active,
body.maplook-mapfirst #s2Toolbar.mnm-s2-toolbar .mnm-map-toolbtn[aria-pressed="true"] { background: var(--mfl-on); color: var(--mnm-brand-ink); }
body.maplook-mapfirst #s2Toolbar.mnm-s2-toolbar .mnm-map-toolbtn-go:not(:disabled) { background: var(--mnm-success-5); color: var(--mnm-brand-ink); }
body.maplook-mapfirst #s2Toolbar.mnm-s2-toolbar .mnm-map-more { margin-left: 0; }
/* the card's words and Continue, in the mockup's type */
body.maplook-mapfirst .mfl-panel #propTitle { font-size: var(--mnm-fs-xl); }
body.maplook-mapfirst .mfl-panel #propTitle i { color: var(--mfl-on); }
body.maplook-mapfirst .mfl-panel #propContinueBtn { background: var(--mfl-on); color: var(--mnm-brand-ink); border-radius: var(--mnm-radius-control); }
body.maplook-mapfirst .mfl-panel .mnm-sel-change { width: 100%; justify-content: center; border-radius: var(--mnm-radius-pill); }
body.maplook-mapfirst .mfl-panel .mnm-prop-hint { border-radius: var(--mnm-radius-control); }
body.maplook-mapfirst .btn-next { background: var(--mfl-on); }
body.maplook-mapfirst #s2 .mnm-q-chat .mnm-prop-chat-head i, body.maplook-mapfirst .mnm-q-contact-summary i { color: var(--mfl-on); }
body.maplook-mapfirst .chat-user span { background: var(--mfl-on); }
@media (max-width: 560px) {
  body.maplook-mapfirst .mnm-q-panel #s2 #mapConfirm.is-big #svView.mnm-confirm-view { width: 108px; --mnm-q-sv-h: 72px; }
  body.maplook-mapfirst .mnm-q-panel #s2 #mapConfirm.is-big #svView.mfl-pip-big { width: calc(100% - 24px); --mnm-q-sv-h: 200px; }
  body.maplook-mapfirst #s2MapBody.mnm-prop-card { border: 0; }
  /* the phone rail: as wide as the tools it shows (Polygon, Line, More), not a fixed 200 px box */
  body.maplook-mapfirst #s2MapBody.mnm-prop-card #s2Toolbar.mnm-s2-toolbar { width: auto; max-width: calc(100% - 140px); }
  body.maplook-mapfirst #s2Toolbar.mnm-s2-toolbar .mnm-map-toolbtn { width: 44px; height: 44px; }
}

/* Joseph 2026-09-30 (~13:20): Map first ships; "compact the chat window like you did earlier, but for this one. try to stick
   to 35% of the phone real estate this time." The open sheet is at most 35% of the screen; inside, the photo hint and the
   sheet's own Back button go (the contact summary above the map has Edit), so the messages keep the room. */
@media (max-width: 899px) {
  body.maplook-mapfirst { --mnm-q-sheet-h: min(35svh, 35vh); }
  body.maplook-mapfirst #s2 .mnm-q-chat { max-height: 35vh; }
  body.maplook-mapfirst #s2 .mnm-q-chat .photo-add-hint,
  body.maplook-mapfirst #s2 .mnm-q-chat .btn-back { display: none; }
  body.maplook-mapfirst #s2 .mnm-q-chat .mt-2 { margin: 0 !important; }
  body.maplook-mapfirst #s2 .mnm-q-chat .mnm-q-chat-talk { margin-bottom: 0; }
  body.maplook-mapfirst #s2 .mnm-q-chat .chat-msg img { max-height: 64px; }
}