/* Report 157, look 4 "Brick and paper" (report 153 idea 4), rebuilt as a SKIN on the one-page structure
   (templates/quote.html + static/css/quote_onepage.css; the contract: F:\tmp\juno_workers\onepage\HOOK2.md).
   The site's own brick carries the page: the one panel is warm paper with a brick rule, dashed paper rules between its
   parts, a clean white map card on it, brick outlined buttons (filled when active or primary), a numbered step pill in
   the map head (maplook_brick.js), the chat as a paper column. Mockup: F:\tmp\juno_workers\map153\mockups\idea4_brick.html.
   Tokens only (lint gate). */

body.maplook-brick {
  --brick: var(--mnm-accent);
  --brick-paper: var(--mnm-accent-soft);
  --brick-paper-2: var(--mnm-accent-soft-2);
  --brick-rule: var(--mnm-accent-line);

  /* the skin contract (HOOK2 section 1) */
  --mnm-q-page-bg: var(--mnm-bg);
  --mnm-q-panel-bg: var(--brick-paper);
  --mnm-q-panel-ink: var(--mnm-ink);
  --mnm-q-panel-muted: var(--mnm-muted);
  --mnm-q-panel-line: var(--brick-rule);
  --mnm-q-panel-shadow: none;
  --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-surface);
  --mnm-q-chat-bg: var(--brick-paper);
  --mnm-q-chat-ink: var(--mnm-ink);
  --mnm-q-chat-line: var(--brick-rule);
  --mnm-q-chat-head-bg: var(--brick-paper-2);
  --mnm-q-chat-head-ink: var(--mnm-ink);
  --mnm-q-chat-shadow: var(--mnm-shadow-md);
  --mnm-q-accent: var(--brick);
  --mnm-q-accent-ink: var(--mnm-brand-ink);
}

/* ---- the panel: paper, its parts divided by dashed rules ---- */
body.maplook-brick .mnm-q-panel .card-header { color: var(--brick); font-weight: 800; border-bottom: 1px dashed var(--brick-rule); }
body.maplook-brick .mnm-q-panel .form-control { border-color: var(--brick-rule); }
body.maplook-brick .mnm-q-panel .form-control:focus { border-color: var(--brick); }
body.maplook-brick .mnm-q-contact-summary i { color: var(--brick); }
body.maplook-brick #contactEditBtn, body.maplook-brick .mnm-sel-change, body.maplook-brick .btn-back {
  border: 1.5px solid var(--brick); background: var(--mnm-surface); color: var(--brick); font-weight: 600; border-radius: var(--mnm-radius-control);
}
body.maplook-brick .btn-next { background: var(--brick); color: var(--mnm-brand-ink); font-weight: 700; }
body.maplook-brick .btn-next:hover { background: var(--mnm-brand-2-fill); }

/* ---- the map card: white, on the paper ---- */
body.maplook-brick .mnm-prop-card { border: 1px solid var(--mnm-line); border-radius: var(--mnm-radius-container); box-shadow: var(--mnm-shadow-md); }
body.maplook-brick .mnm-prop-head { background: var(--mnm-surface); border-bottom: 1px dashed var(--brick-rule); padding: 12px 16px; }
body.maplook-brick #propTitle { color: var(--mnm-ink); font-weight: 800; font-size: var(--mnm-fs-lg); }
body.maplook-brick #propTitle i { color: var(--brick); }
body.maplook-brick #propSub { color: var(--mnm-muted); }
body.maplook-brick .mnm-prop-hint { background: var(--brick-paper); color: var(--mnm-ink); border-color: var(--brick-rule); }
body.maplook-brick .mnm-prop-hint i { color: var(--brick); }
body.maplook-brick .mnm-s2-toolbar { background: var(--mnm-surface); border-bottom: 1px dashed var(--brick-rule); }
body.maplook-brick .mnm-s2-toolbar .mnm-map-toolbtn { border: 1.5px solid var(--brick); background: var(--mnm-surface); color: var(--brick);
  font-weight: 600; border-radius: var(--mnm-radius-control); min-height: 34px; padding: 0 12px; }
body.maplook-brick .mnm-s2-toolbar .mnm-map-toolbtn.active,
body.maplook-brick .mnm-s2-toolbar .mnm-map-toolbtn[aria-pressed="true"] { background: var(--brick); color: var(--mnm-brand-ink); }
body.maplook-brick .mnm-s2-toolbar .mnm-map-toolbtn-go:not(:disabled) { background: var(--mnm-success-5); color: var(--mnm-brand-ink); border-color: var(--mnm-success-5); }

/* the two views: white frames, the caption a paper pill with the brick word */
body.maplook-brick #s2 .mnm-confirm-view { border: 1px solid var(--mnm-line); border-radius: var(--mnm-radius-control); }
body.maplook-brick #s2 .mnm-confirm-view-head { background: var(--mnm-surface); border-bottom: 1px dashed var(--brick-rule); color: var(--mnm-ink); }
body.maplook-brick #s2 .mnm-confirm-view-head i { color: var(--brick); }
body.maplook-brick #s2 .mnm-confirm-view-head strong { background: var(--brick-paper); color: var(--brick); border: 1px solid var(--brick-rule);
  border-radius: var(--mnm-radius-pill); padding: 1px 9px; font-size: var(--mnm-fs-xs); }
body.maplook-brick #s2 .mnm-pick-foot { background: var(--mnm-surface); border-top: 1px dashed var(--brick-rule); font-size: var(--mnm-fs-sm); }
body.maplook-brick #s2 .mnm-pick-foot a { color: var(--brick); }
/* the number that matters: the mockup's big brick number */
body.maplook-brick #s2MapLiveNums { background: var(--mnm-surface); color: var(--brick); font-weight: 800; font-size: var(--mnm-fs-lg);
  border-top: 1px dashed var(--brick-rule); }
body.maplook-brick .mnm-s2-sendbar { background: var(--mnm-surface); border-top: none; }
body.maplook-brick #s2ShapeList { background: var(--mnm-surface); }

/* ---- the chat: a paper column ---- */
body.maplook-brick #s2 .mnm-q-chat .mnm-prop-chat-head { font-weight: 800; border-bottom: 1px dashed var(--brick-rule); }
body.maplook-brick #s2 .mnm-q-chat .mnm-prop-chat-head i { color: var(--brick); }
body.maplook-brick #s2 .mnm-q-chat #chatEditMapBtn { border: 1.5px solid var(--brick); background: var(--mnm-surface); color: var(--brick); }
body.maplook-brick .chat-area { background: var(--mnm-surface); border-color: var(--brick-rule); }
body.maplook-brick .chat-user span { background: var(--brick); color: var(--mnm-brand-ink); }
body.maplook-brick .chat-assistant span { background: var(--brick-paper); border-color: var(--brick-rule); }
body.maplook-brick .photo-strip { background: var(--brick-paper-2); border-color: var(--brick-rule); }
body.maplook-brick .chat-input-row { border-color: var(--brick-rule); }
body.maplook-brick #sendBtn { background: var(--brick); border-color: var(--brick); }
body.maplook-brick .btn-estimate { border-color: var(--brick); }

/* ---- the numbered step pill in the map head (maplook_brick.js; the mockup's numbered steps) ---- */
body.maplook-brick .maplook-brick-steppill { display: inline-flex; align-items: center; gap: 6px; font-size: var(--mnm-fs-xs); margin-left: auto; }
body.maplook-brick .maplook-brick-steppill .n { width: 22px; height: 22px; border-radius: var(--mnm-radius-full); display: grid; place-items: center;
  font-weight: 800; font-size: var(--mnm-fs-xs); border: 2px solid var(--brick); color: var(--brick); background: var(--mnm-surface); }
body.maplook-brick .maplook-brick-steppill .n.done { background: var(--brick); color: var(--mnm-brand-ink); }
body.maplook-brick .maplook-brick-steppill .lbl { color: var(--mnm-ink); font-weight: 600; }
body.maplook-brick .maplook-brick-pulse { animation: maplook-brick-pulse-kf 420ms ease-out; }
@keyframes maplook-brick-pulse-kf {
  0% { box-shadow: 0 0 0 0 var(--brick-rule); }
  100% { box-shadow: 0 0 0 8px transparent; }
}

/* ---- the step bar in brick ---- */
body.maplook-brick .step.active .step-num { background: var(--brick); }
body.maplook-brick .step.active .step-label { color: var(--brick); }

@media (max-width: 560px) {
  body.maplook-brick .mnm-s2-toolbar .mnm-map-toolbtn { min-height: 44px; }
  body.maplook-brick .mnm-q-panel .mnm-prop-card { border-radius: 0; border-left: none; border-right: none; box-shadow: none; }
  body.maplook-brick .maplook-brick-steppill { margin-left: 0; }
}