/* Report 157, look 3 "Plan drawing" (report 153 idea 3), 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 quote page as a technical drawing sheet: navy ground everywhere (page, panel, map frames, chat, fields), pale
   blue rules, mono type in the labels and tools, square corners, one orange accent (the active tool, the cut line,
   Continue), a dimmed aerial, a north badge, and every wall of the selected building labelled with its length
   (maplook_plan.js). Mockup: F:\tmp\juno_workers\map153\mockups\idea3_plan.html. Tokens only (lint gate): the mockup's
   orange accent is stood in for by --mnm-line-orange-2, its pale rules by --mnm-line-blue-pale (an exact match). */

body.maplook-plan {
  --plan-sheet: var(--mnm-navy);
  --plan-sheet-b: var(--mnm-navy-b);
  --plan-line: var(--mnm-line-blue-pale);
  --plan-rule: var(--mnm-line-white);           /* faint rules inside the sheet */
  --plan-ink: var(--mnm-brand-ink);
  --plan-accent: var(--mnm-line-orange-2);
  --plan-mono: var(--mnm-font-mono);
  --plan-chip: var(--mnm-bg-slate-dark-8);

  /* the skin contract (HOOK2 section 1) */
  --mnm-q-page-bg: var(--plan-sheet);
  --mnm-q-panel-bg: var(--plan-sheet);
  --mnm-q-panel-ink: var(--plan-ink);
  --mnm-q-panel-muted: var(--plan-line);
  --mnm-q-panel-line: var(--plan-line);
  --mnm-q-panel-shadow: none;
  --mnm-q-pane-bg: var(--plan-sheet-b);
  --mnm-q-pane-line: var(--plan-line);
  --mnm-q-field-bg: var(--plan-sheet-b);
  --mnm-q-field-ink: var(--plan-ink);
  --mnm-q-summary-bg: var(--plan-sheet-b);
  --mnm-q-chat-bg: var(--plan-sheet-b);
  --mnm-q-chat-ink: var(--plan-ink);
  --mnm-q-chat-line: var(--plan-line);
  --mnm-q-chat-head-bg: var(--plan-sheet);
  --mnm-q-chat-head-ink: var(--plan-line);
  --mnm-q-chat-shadow: none;
  --mnm-q-accent: var(--plan-accent);
  --mnm-q-accent-ink: var(--plan-sheet);
  --mnm-q-panel-radius: 0;

  /* the map's own colours (quote.js reads them when the map is built): pale selection, orange cut and trace */
  --mnm-map-pick: var(--mnm-line-blue-pale);
  --mnm-map-cut: var(--mnm-line-orange-2);
  --mnm-map-trace: var(--mnm-line-orange-2);
  --mnm-map-outline: var(--mnm-line-blue-pale);
}

/* ---- sheet type: mono labels, square corners ---- */
body.maplook-plan .mnm-q-panel .card-header, body.maplook-plan .mnm-q-panel .form-label,
body.maplook-plan .mnm-prop-head, body.maplook-plan .mnm-confirm-view-head, body.maplook-plan .mnm-prop-chat-head,
body.maplook-plan #s2MapLiveNums, body.maplook-plan .mnm-q-contact-summary {
  font-family: var(--plan-mono); text-transform: uppercase; letter-spacing: .06em;
}
body.maplook-plan .mnm-q-panel .card-header { color: var(--plan-line); }
body.maplook-plan .mnm-q-panel .form-control { border-radius: 0; }
body.maplook-plan .mnm-q-panel .form-control::placeholder { color: var(--mnm-muted-2-ondark); }
body.maplook-plan .mnm-q-panel .sms-consent, body.maplook-plan .mnm-q-panel .sms-consent a { color: var(--mnm-muted-2-ondark); }
body.maplook-plan .mnm-q-contact-summary { border-radius: 0; color: var(--plan-ink); }
body.maplook-plan #contactEditBtn { background: transparent; color: var(--plan-line); border-color: var(--plan-line); border-radius: 0; }
body.maplook-plan .btn-next { background: var(--plan-accent); color: var(--plan-sheet); border-radius: 0; font-family: var(--plan-mono);
  text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
body.maplook-plan .btn-next:hover { background: var(--mnm-line-orange-light); }
body.maplook-plan #s1err { color: var(--mnm-accent-on-dark) !important; }

/* ---- the map card: a drawing frame with a ruled inner margin ---- */
body.maplook-plan .mnm-prop-card { border-radius: 0; border: 1px solid var(--plan-line); }
body.maplook-plan .mnm-prop-head { background: var(--plan-sheet); border-color: var(--plan-line); }
body.maplook-plan #propTitle { color: var(--plan-ink); font-weight: 400; }
body.maplook-plan #propTitle i { color: var(--plan-accent); }
body.maplook-plan #propSub { color: var(--plan-line); text-transform: none; letter-spacing: 0; }
body.maplook-plan .mnm-prop-hint { background: var(--plan-chip); color: var(--plan-line); border-color: var(--plan-line); }
body.maplook-plan .mnm-prop-hint i { color: var(--plan-accent); }
body.maplook-plan #s2 .mnm-confirm-view { border-radius: 0; }
body.maplook-plan #s2 .mnm-confirm-view-head { background: var(--plan-sheet); color: var(--plan-line); border-color: var(--plan-line); }
body.maplook-plan #s2 .mnm-confirm-view-head i { color: var(--plan-accent); }
body.maplook-plan #s2 .mnm-confirm-view-sub { color: var(--mnm-muted-2-ondark); text-transform: none; letter-spacing: 0; }
body.maplook-plan #s2 .mnm-confirm-view-unavail { background: var(--plan-sheet-b); color: var(--plan-line); }
body.maplook-plan #aerialConfirmView .mnm-confirm-view-body::after {
  content: ''; position: absolute; inset: 6px; border: 1px solid var(--plan-line); pointer-events: none; z-index: 2;
}
/* the dimmed ground: the aerial's tiles only (the drawing, labels and handles stay bright) */
body.maplook-plan #aerialPickDiv .gm-style img { filter: grayscale(.75) brightness(.7) contrast(1.15); }
body.maplook-plan #svDiv { filter: grayscale(.4) contrast(1.05); }

/* the selection text, the numbers and the send bar: the title block */
body.maplook-plan #s2 .mnm-pick-foot, body.maplook-plan .mnm-s2-live-nums, body.maplook-plan .mnm-s2-sendbar,
body.maplook-plan #s2ShapeList { background: var(--plan-sheet); color: var(--plan-line); border-color: var(--plan-line); }
body.maplook-plan #s2 .mnm-pick-foot strong { color: var(--plan-ink); }
body.maplook-plan #s2 .mnm-pick-foot a { color: var(--plan-accent); }
body.maplook-plan #s2MapLiveNums { color: var(--plan-ink); font-size: var(--mnm-fs-md); }
body.maplook-plan .mnm-s2-status { color: var(--plan-line); font-family: var(--plan-mono); }
body.maplook-plan .mnm-shape-row { background: transparent; border-bottom: 1px solid var(--plan-rule); border-radius: 0; font-family: var(--plan-mono); }
body.maplook-plan .mnm-shape-num, body.maplook-plan .mnm-shape-row-nums strong { color: var(--plan-accent); }
body.maplook-plan .mnm-shape-label { color: var(--plan-ink); font-family: var(--plan-mono); }
body.maplook-plan .mnm-shape-label:hover, body.maplook-plan .mnm-shape-label:focus { background: var(--plan-sheet-b); border-color: var(--plan-line); }
body.maplook-plan .mnm-shape-row-nums, body.maplook-plan .mnm-shape-width { color: var(--plan-line); }
body.maplook-plan .mnm-shape-width input { background: var(--plan-sheet-b); border-color: var(--plan-line); color: var(--plan-ink); }
body.maplook-plan .mnm-sel-change { background: transparent; color: var(--plan-line); border-color: var(--plan-line); border-radius: 0;
  font-family: var(--plan-mono); text-transform: uppercase; letter-spacing: .06em; }

/* ---- tools: square mono tabs joined in one strip, the active one orange ---- */
body.maplook-plan .mnm-s2-toolbar { background: var(--plan-sheet); border-color: var(--plan-line); gap: 0; }
body.maplook-plan .mnm-s2-toolbar .mnm-map-toolbtn {
  background: transparent; border: 1px solid var(--plan-line); margin-left: -1px; color: var(--plan-ink); border-radius: 0;
  font-family: var(--plan-mono); text-transform: uppercase; letter-spacing: .06em; min-height: 38px; padding: 0 12px;
}
body.maplook-plan .mnm-s2-toolbar .mnm-map-toolbtn.active,
body.maplook-plan .mnm-s2-toolbar .mnm-map-toolbtn[aria-pressed="true"] { background: var(--plan-accent); color: var(--plan-sheet); border-color: var(--plan-accent); }
body.maplook-plan .mnm-s2-toolbar .mnm-map-toolbtn-go:not(:disabled) { background: var(--mnm-success-5); color: var(--plan-sheet); border-color: var(--mnm-success-5); }
body.maplook-plan .mnm-s2-toolbar .mnm-map-more { margin-left: auto; }

/* ---- the chat: the drawing's notes column ---- */
body.maplook-plan #s2 .mnm-q-chat { border-radius: 0; }
body.maplook-plan #s2 .mnm-q-chat .mnm-prop-chat-head i { color: var(--plan-accent); }
body.maplook-plan #s2 .mnm-q-chat #chatEditMapBtn { background: transparent; color: var(--plan-line); border-color: var(--plan-line); border-radius: 0; }
body.maplook-plan .chat-area { background: var(--plan-sheet); border-color: var(--plan-line); }
body.maplook-plan .chat-assistant span { background: var(--plan-sheet-b); color: var(--plan-ink); border-color: var(--plan-line); border-radius: 0; }
body.maplook-plan .chat-user span { background: var(--plan-accent); color: var(--plan-sheet); border-radius: 0; }
body.maplook-plan .photo-strip, body.maplook-plan .chat-input-row { background: var(--plan-sheet); border-color: var(--plan-line); }
body.maplook-plan .photo-add-hint, body.maplook-plan .photo-add-btn { color: var(--plan-line); border-color: var(--plan-line); }
body.maplook-plan .chat-input-row .form-control { background: var(--plan-sheet-b); color: var(--plan-ink); border-color: var(--plan-line); border-radius: 0; }
body.maplook-plan #sendBtn { background: var(--plan-accent); color: var(--plan-sheet); border: 0; border-radius: 0; }
body.maplook-plan .btn-back, body.maplook-plan .btn-estimate { background: transparent; color: var(--plan-line); border: 1px solid var(--plan-line);
  border-radius: 0; font-family: var(--plan-mono); text-transform: uppercase; letter-spacing: .05em; }
body.maplook-plan #s2ScopePill { background: var(--plan-sheet-b) !important; color: var(--plan-line) !important; border-color: var(--plan-line) !important; }

/* ---- the step bar on the sheet ---- */
body.maplook-plan .step-bar { background: var(--plan-sheet); border-color: var(--plan-line); }
body.maplook-plan .step-label { color: var(--plan-line); font-family: var(--plan-mono); text-transform: uppercase; letter-spacing: .05em; }
body.maplook-plan .step.active .step-label { color: var(--plan-accent); }
body.maplook-plan .step.active .step-num { background: var(--plan-accent); color: var(--plan-sheet); }
body.maplook-plan .step-line { background: var(--plan-rule); }
body.maplook-plan #startOverBtn { color: var(--plan-line); }
body.maplook-plan #resumeByEmailBox { color: var(--plan-line) !important; }
body.maplook-plan #resumeByEmailBox .resume-link { color: var(--plan-accent); }

/* ---- the north badge and the wall lengths (maplook_plan.js) ---- */
body.maplook-plan .plan-north {
  position: absolute; right: 14px; top: 14px; z-index: 3; font-family: var(--plan-mono); font-size: var(--mnm-fs-xs);
  text-align: center; color: var(--plan-ink); background: var(--plan-chip); border: 1px solid var(--plan-line);
  padding: 3px 9px; pointer-events: none; text-transform: uppercase; letter-spacing: .06em;
}
body.maplook-plan .plan-north b { display: block; font-size: var(--mnm-fs-lg); line-height: 1; font-weight: 400; }
body.maplook-plan .plan-dim {
  position: absolute; left: 0; top: 0; background: var(--plan-chip); color: var(--plan-line); border: 1px solid var(--plan-line);
  font-family: var(--plan-mono); font-size: var(--mnm-fs-xs); line-height: 1.5; padding: 1px 6px; white-space: nowrap;
  pointer-events: none; z-index: 3; display: none;
}
body.maplook-plan .plan-dim.is-live { color: var(--plan-accent); border-color: var(--plan-accent); }

@media (max-width: 560px) {
  body.maplook-plan .mnm-s2-toolbar .mnm-map-toolbtn { min-height: 44px; }
  body.maplook-plan .plan-north { padding: 2px 7px; }
  body.maplook-plan .plan-dim { font-size: var(--mnm-fs-9px); padding: 0 4px; }
  body.maplook-plan #s2 .mnm-q-chat { border-left: none; border-right: none; }
  body.maplook-plan .step-label { font-family: inherit; letter-spacing: 0; text-transform: none; }   /* the phone's narrow step bar */
}