/* Mahod Protection - design skin for the integrated app (claude-design H-C02, 2026-10-15)
   Load AFTER /styles.css. Works on the existing DOM of public/index.html + app.js (base hashes in
   work/claude/h-c02/BASE-public.sha256). Changes look only: no element is hidden that the journey uses,
   no layout mechanics of the mobile breakpoints are replaced. Fonts: /fonts/fonts.css (H-C01).
   Idea: the drafting desk. The historic permit stays on its own paper tone; everything Mahod adds is
   crisp ink on top. Openings are green, HVAC violet, missing data amber, conflicts red. */

:root {
  --navy: #143D5C;
  --blue: #176FA6;
  --green: #168663;
  --amber: #E4A13B;
  --violet: #6447A8;
  --paper: #F4F7FA;
  --line: #E1E8EE;
  --muted: #566C7E;
  --font: 'Assistant', 'Heebo', 'Segoe UI', Arial, sans-serif;
  --head: 'Heebo', 'Assistant', 'Segoe UI', Arial, sans-serif;
  --ink-950: #0B2438;
  --green-ink: #0F7352;
  --green-soft: #DDF2E9;
  --blue-soft: #E3EFF8;
  --amber-ink: #8A5A10;
  --amber-soft: #FCEFD9;
  --red: #B83A2E;
  --red-soft: #F8E1DD;
  --violet-soft: #ECE7F7;
  --permit: #F3E8DA;
  --pencil: #5C4D44;
  --float: 0 14px 32px -18px rgba(11, 36, 56, .45), 0 2px 6px rgba(11, 36, 56, .06);
  --ring: 0 0 0 3px #fff, 0 0 0 5px var(--blue);
}

/* ---------- type ---------- */
body { font: 15px/1.6 var(--font); color: var(--navy); background: var(--paper); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
h1, h2, h3, .item-title, .metric strong, .delivery-hero h2, .login-panel h1 { font-family: var(--head); }
h1 { font-weight: 800; letter-spacing: -.02em; }
h2, h3 { font-weight: 700; }
small { font-size: 12px; color: var(--muted); }
label { font-family: var(--font); font-weight: 600; }
button, input, select, textarea { font-family: var(--font); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; box-shadow: var(--ring); }
button { border-radius: 8px; border-color: #D3DEE7; font-weight: 600; }
.primary { font-family: var(--head); font-weight: 700; letter-spacing: .01em; border-radius: 9px; box-shadow: 0 1px 0 rgba(255, 255, 255, .15) inset, 0 6px 14px -8px rgba(20, 61, 92, .7); }
.primary:hover { background: var(--ink-950); border-color: var(--ink-950); }
input, select, textarea { border-color: #CBD7E1; border-radius: 8px; font-weight: 600; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); }
input::placeholder, textarea::placeholder { color: #8FA2B2; font-weight: 400; }

/* ---------- login: first impression ---------- */
#login.login { background: #fff; grid-template-columns: minmax(380px, 1fr) minmax(420px, 1.15fr); }
#login .login-panel { max-width: 440px; }
#login .login-panel > img { width: auto; height: 34px; margin-bottom: 56px; }
#login .eyebrow { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--amber-soft); color: var(--amber-ink); font-weight: 700; font-size: 12px; }
#login .login-panel h1 { font-size: 64px; line-height: 1; margin: 18px 0 14px; letter-spacing: -.035em; }
#login .login-panel p { font-size: 19px; line-height: 1.7; color: #36546B; }
#login .login-panel form { margin: 34px 0 26px; }
#login .login-panel input { padding: 13px 14px; font-size: 16px; letter-spacing: .2em; }
#login .login-panel .primary { padding: 14px 18px; font-size: 16px; }
#login .login-panel small { display: block; padding-top: 18px; border-top: 1px solid var(--line); }

#login .login-graphic {
  position: relative; background: #102F48;
  background-image:
    radial-gradient(1200px 600px at 85% 15%, rgba(23, 111, 166, .35), transparent 60%),
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: auto, 28px 28px, 28px 28px;
}
/* the four stages as a drawing being built: a plan sheet with walls, then field, review, dossier */
#login .plan-outline {
  transform: none; width: min(420px, 78%); height: auto; aspect-ratio: 4 / 4.6;
  border: 0; padding: 0; gap: 14px; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
}
#login .plan-outline::before {
  content: ""; position: absolute; inset: -34px; border: 1.5px dashed rgba(163, 209, 225, .45); border-radius: 4px;
}
#login .plan-outline::after {
  content: "איור תהליך · לא בקנה מידה"; position: absolute; inset-block-end: -62px; inset-inline-start: -34px;
  font: 600 13px/1 var(--head); color: rgba(220, 235, 245, .7); letter-spacing: .02em;
}
#login .plan-outline span {
  position: relative; border: 2.5px solid #E8F2F8; border-radius: 2px; color: #fff;
  font: 800 26px/1 var(--head); place-items: end start; padding: 16px; background: rgba(255, 255, 255, .03);
  animation: mp-sheet .7s cubic-bezier(.2, .7, .2, 1) both;
}
#login .plan-outline span::before { /* window marks on the walls */
  content: ""; position: absolute; inset-block-start: -5px; inset-inline-start: 22%; width: 34%; height: 8px; background: #3FC59A; border-radius: 1px;
}
#login .plan-outline span::after { /* step number */
  position: absolute; inset-block-start: 14px; inset-inline-end: 14px; font: 700 13px/1 var(--head); color: rgba(220, 235, 245, .65);
}
#login .plan-outline span:nth-child(1)::after { content: "01"; }
#login .plan-outline span:nth-child(2)::after { content: "02"; }
#login .plan-outline span:nth-child(3)::after { content: "03"; }
#login .plan-outline span:nth-child(4)::after { content: "04"; }
#login .plan-outline span:nth-child(2) { animation-delay: .12s; }
#login .plan-outline span:nth-child(2)::before { inset-inline-start: auto; inset-inline-end: -5px; inset-block-start: 30%; width: 8px; height: 30%; background: #A98BF0; }
#login .plan-outline span:nth-child(3) { animation-delay: .24s; border-bottom: 2.5px solid #E8F2F8; }
#login .plan-outline span:nth-child(3)::before { inset-block-start: auto; inset-block-end: -5px; background: #F2B654; }
#login .plan-outline span:nth-child(4) { animation-delay: .36s; background: #fff; color: var(--navy); }
#login .plan-outline span:nth-child(4)::after { color: #7F98AB; }
#login .plan-outline span:nth-child(4)::before { background: var(--green); }
@keyframes mp-sheet { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #login .plan-outline span { animation: none; } }

/* ---------- top bar + process steps ---------- */
#app .topbar { height: 66px; padding: 0 28px; }
#app .brand img { width: auto; height: 30px; }
#app .brand i { height: 26px; background: #D5E0E8; }
#app .brand strong { font: 800 19px/1 var(--head); letter-spacing: -.01em; }
#app .top-meta { gap: 14px; font-size: 13px; }
#app .draft-badge { background: var(--amber-soft); color: var(--amber-ink); border: 1px solid #F1D6A6; border-radius: 999px; padding: 4px 11px; font-weight: 700; }
#app #save-state { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 14px; border-radius: 999px; background: var(--green-soft); color: var(--green-ink); font-weight: 700; }
#app #save-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(22, 134, 99, .18); }
#app #save-state[data-state="saving"] { background: var(--blue-soft); color: #11507A; }
#app #save-state[data-state="saving"]::before { background: var(--blue); animation: mp-pulse 1s ease-in-out infinite; }
#app #save-state[data-state="local"], #app #save-state[data-state="error"] { background: var(--amber-soft); color: var(--amber-ink); }
#app #save-state[data-state="local"]::before, #app #save-state[data-state="error"]::before { background: var(--amber); box-shadow: none; }
@keyframes mp-pulse { 50% { opacity: .3; } }

#app .main-nav { counter-reset: step; height: 58px; gap: 6px; padding: 0 22px; }
#app .main-nav button {
  counter-increment: step; display: inline-flex; align-items: center; gap: 10px; padding: 0 14px;
  font: 700 15px/1 var(--head); color: #6A7F90; border-bottom-width: 3px;
}
#app .main-nav button::before {
  content: counter(step); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid #B9C9D5; font: 700 12px/1 var(--head); color: #6A7F90;
}
#app .main-nav button:hover { color: var(--navy); background: none; }
#app .main-nav button.active { color: var(--navy); border-bottom-color: var(--green); }
#app .main-nav button.active::before { background: var(--navy); border-color: var(--navy); color: #fff; }
#app .main-nav .version { font: 600 12px/1 var(--head); color: #6A7F90; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; }

/* ---------- project heading ---------- */
#app main { padding-top: 26px; }
#app .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; font: 600 13px/1 var(--font); color: #4F6578; margin-bottom: 14px; }
#app .breadcrumb span { margin: 0 6px; color: #A9B9C6; }
#app .project-heading h1 { font-size: 40px; line-height: 1.05; margin-bottom: 10px; }
#app .project-heading p { font-size: 14px; color: #4F6578; }
#app .project-state { padding: 12px 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
#app .project-state strong { font: 700 15px/1.2 var(--head); }
#app .notice { border-radius: 10px; border: 1px solid #F1D6A6; border-inline-start: 4px solid var(--amber); background: #FFF8EC; color: var(--amber-ink); font-size: 14px; font-weight: 600; }

/* data-driven ribbon slot (design/infographics.js renders into #mp-provenance) */
#mp-provenance { margin: -6px 0 22px; }

/* ---------- drawing desk ---------- */
#app .workspace { border-radius: 16px; border-color: #DCE5EC; box-shadow: 0 24px 50px -38px rgba(20, 61, 92, .55); }
#app .panel-title { padding: 16px 18px 14px; }
#app .panel-title h2 { font: 700 15px/1.2 var(--head); }
#app .panel-title > span { font: 600 12px/1 var(--head); color: #6A7F90; }
#app .hierarchy { background: linear-gradient(180deg, #F7FAFC, #F2F6F9); font-size: 14px; }
#app .hierarchy strong { font: 700 15px/1.3 var(--head); }
#app .hierarchy-line { font-size: 12px; border-inline-start: 0; border-right: 2px solid #9CC2DA; }
#app .object-tabs { gap: 4px; padding: 10px 12px; }
#app .object-tabs button { font-size: 13px; border-radius: 999px; padding: 6px 4px; color: #4F6578; }
#app .object-tabs .active { background: var(--navy); color: #fff; }
#app .object-group { font: 700 12px/1 var(--head); color: #6A7F90; padding: 14px 18px 6px; }
#app .object-row { padding: 10px 14px; gap: 12px; border-right-width: 3px; transition: background .12s; }
#app .object-row:hover { background: #F4F8FB; }
#app .object-row .object-symbol { width: 32px; height: 32px; border-radius: 9px; border: 0; background: var(--blue-soft); color: #11507A; font-size: 16px; }
#app .object-row[data-type="opening"] .object-symbol { background: var(--green-soft); color: var(--green-ink); }
#app .object-row[data-type="hvac"] .object-symbol { background: var(--violet-soft); color: var(--violet); }
#app .object-row strong { font: 700 14px/1.25 var(--head); }
#app .object-row small { font-size: 12px; }
#app .object-row .missing-pill { background: var(--amber-soft); color: var(--amber-ink); font: 700 11px/1 var(--head); padding: 5px 8px; border-radius: 999px; }
#app .object-row.active { background: #EAF3FA; border-right-color: var(--blue); }
#app .source-card { background: #FBF6EF; border-top: 1px solid #EBDCC9; }
#app .source-card strong { font: 700 13px/1.25 var(--head); color: var(--pencil); }
#app .source-card small { font-size: 11px; color: #7B6A5F; }
#app .source-icon { width: 30px; height: 30px; border-radius: 8px; background: var(--permit); color: var(--pencil); display: grid; place-items: center; font-size: 17px; }
#app .source-card .quiet { font-size: 12px; color: #6E4E2E; text-decoration: underline; text-underline-offset: 3px; }

#app .canvas-top { padding: 14px 18px 10px; }
#app .canvas-top h2 { font: 800 18px/1.2 var(--head); }
#app #frame-status { display: inline-flex; margin-top: 4px; padding: 3px 9px; border-radius: 999px; background: var(--amber-soft); color: var(--amber-ink); font: 700 12px/1.3 var(--head); }
#app .view-controls { padding: 3px; gap: 2px; background: #EEF3F7; border-radius: 10px; }
#app .view-controls button { border: 0; background: transparent; font: 700 14px/1 var(--head); min-width: 32px; height: 30px; border-radius: 8px; }
#app .view-controls button:hover { background: #fff; }

#app .drawing-toolbar { gap: 4px; padding: 0 12px 12px; }
#app .drawing-toolbar button {
  display: inline-flex; align-items: center; gap: 7px; font: 700 13px/1 var(--head);
  padding: 8px 11px; border: 1px solid #DCE5EC; border-radius: 9px; background: #fff; color: #2E4A60;
}
#app .drawing-toolbar button::before {
  content: ""; width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
#app .drawing-toolbar button:hover { border-color: #9DB6C8; }
#app .drawing-toolbar button.active { background: var(--navy); border-color: var(--navy); color: #fff; }
#app .drawing-toolbar [data-tool="select"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'><path d='M19 4L5 9.5l5.7 2.1L13 18z'/></svg>"); }
#app .drawing-toolbar [data-tool="window"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'><rect x='4' y='3.5' width='16' height='17' rx='1'/><path d='M12 3.5v17M4 12h16'/></svg>"); }
#app .drawing-toolbar [data-tool="hvac"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><rect x='2.5' y='5' width='19' height='9' rx='2'/><path d='M5.5 11h13M7 18l1-2.5M12 19.5v-3M17 18l-1-2.5'/></svg>"); }
#app .drawing-toolbar [data-tool="room"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'><path d='M4 4h10l6 6v10H4z'/></svg>"); }
#app .drawing-toolbar [data-tool="envelope"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linejoin='round'><path d='M3 6h9V3h9v15h-6v3H3z'/></svg>"); }
#app .drawing-toolbar [data-tool="calibrate"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><path d='M3 15.5L15.5 3 21 8.5 8.5 21z'/><path d='M7 11.5l2 2M10 8.5l2.5 2.5M13 5.5l2 2'/></svg>"); }
#app .drawing-toolbar #undo { margin-inline-start: auto; --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6L4 11l5 5'/><path d='M4 11h11a5 5 0 0 1 0 10h-3'/></svg>"); }

/* the permit keeps its own paper; Mahod's linework is ink on top */
#app .canvas-wrap { background: var(--permit); border-color: #E6D7C4; }
#plan rect[fill="url(#grid)"] { opacity: .55; }
#plan image { opacity: .78; filter: saturate(.85) contrast(1.04); }
#plan .room { fill: rgba(20, 61, 92, .07); stroke: var(--navy); stroke-width: 1.6; }
#plan .room:hover { fill: rgba(23, 111, 166, .14); }
#plan .room.selected { fill: rgba(23, 111, 166, .2); stroke: var(--blue); stroke-width: 2.8; }
#plan .opening { stroke: var(--green); stroke-width: 7; stroke-linecap: butt; }
#plan .opening:hover { stroke: #12A579; }
#plan .opening.selected { stroke: var(--green-ink); stroke-width: 10; }
#plan .label { font-family: var(--head); font-size: 12px; font-weight: 800; fill: var(--ink-950); stroke: rgba(255, 255, 255, .92); stroke-width: 4px; }
#plan .handle { fill: #fff; stroke: var(--blue); stroke-width: 2.4; r: 5.5px; }
#plan .handle:hover { fill: var(--blue); }
#plan .hvac { fill: var(--violet); stroke: #fff; stroke-width: 2; }

#app .canvas-message { inset-block-start: 14px; right: 14px; padding: 8px 12px; border-radius: 10px; border-color: #E2D3BF; background: rgba(255, 255, 255, .94); font: 600 13px/1.4 var(--font); color: #34516A; box-shadow: var(--float); }
#app .canvas-legend { right: 14px; bottom: 14px; padding: 8px 12px; gap: 14px; border-radius: 10px; font: 600 12px/1 var(--font); border-color: #E2D3BF; background: rgba(255, 255, 255, .94); box-shadow: var(--float); }
#app .canvas-legend label { font-size: 12px; font-weight: 600; }
#app .legend-line { width: 16px; height: 4px; border-radius: 2px; background: var(--navy); }
#app .legend-line.green { background: var(--green); }
#app .legend-line.violet { background: var(--violet); }
#app .canvas-bottom { font: 600 12px/1.3 var(--font); color: #6A5A50; background: #FBF6EF; }

#app .inspector .panel-title h2 { font-size: 15px; }
#app #inspector-content { padding: 20px 20px 22px; }
#app .item-title { font: 800 28px/1.1 var(--head); letter-spacing: -.015em; }
#app .item-subtitle { font-size: 13px; margin-top: 6px; }
#app .item-meta { font-size: 14px; padding: 11px 0; }
#app .item-meta span { color: #5E7387; }
#app .item-meta strong { font-weight: 700; }
#app .completion { padding: 14px; margin: 16px 0; border-radius: 12px; background: #F6F9FB; border: 1px solid var(--line); }
#app .completion-head { font-size: 13px; align-items: baseline; }
#app .completion-head strong { font: 800 20px/1 var(--head); direction: ltr; unicode-bidi: isolate; }
#app .completion-track { height: 8px; border-radius: 8px; background: #E3EBF1; }
#app .completion-track i { height: 8px; border-radius: 8px; background: linear-gradient(90deg, #1FA27A, var(--green)); }
#app .item-id { font-size: 11px; background: #F6F9FB; border: 1px dashed #D3DEE7; border-radius: 8px; }
#app .inspector-actions { gap: 8px; }
#app .inspector-actions button { font-size: 14px; padding: 11px 12px; }
#app #delete-entity { color: var(--red); }
#app .provenance-note { font-size: 12.5px; color: #6A5A50; background: #FBF6EF; border: 1px solid #EBDCC9; border-radius: 10px; padding: 10px 12px; }

#app .workflow-strip { gap: 10px; font: 700 13px/1 var(--head); color: #8A9CAB; }
#app .workflow-strip span { display: inline-flex; align-items: center; gap: 7px; }
#app .workflow-strip span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #B9C9D5; box-sizing: border-box; }
#app .workflow-strip .done { color: var(--green-ink); }
#app .workflow-strip .done::before { background: var(--green); border-color: var(--green); }
#app .workflow-strip .current { color: var(--navy); }
#app .workflow-strip .current::before { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(20, 61, 92, .15); }
#app .workflow-strip i { width: 28px; height: 2px; background: #D3DEE7; }
#app .text-button { font: 700 15px/1 var(--head); }

/* ---------- field survey ---------- */
#app .survey-items, #app .survey-form-panel, #app .conversation { border-radius: 14px; border-color: #DCE5EC; }
#app .survey-form-panel { padding: 26px 28px; }
#app .survey-form-panel .section-head h2, #app #survey-title { font: 800 32px/1.1 var(--head); letter-spacing: -.02em; }
#app .eyebrow { font: 600 13px/1.3 var(--font); color: #5E7387; }
#app #survey-context { font: 700 12px/1 var(--head); color: #4F6578; padding: 5px 10px; border-radius: 999px; background: #EEF3F7; }
#app .field-grid { gap: 14px; }
#app .field-row { padding: 12px 14px 10px; border: 1px solid var(--line); border-radius: 12px; background: #FBFCFD; }
#app .field-row label { font: 700 14px/1.2 var(--head); margin-bottom: 8px; color: #2E4A60; }
#app .field-row input, #app .field-row select { padding: 11px 12px; font: 700 16px/1.2 var(--head); background: #fff; }
#app .field-row small { font-size: 12px; margin-top: 7px; color: #6A7F90; }
#app .measurement { grid-template-columns: 1fr 82px; }
#app .form-actions .primary { padding: 13px 22px; font-size: 15px; }
#app #draft-status { font-weight: 700; color: var(--amber-ink); }
#app .photo-section h3 { font: 700 17px/1.2 var(--head); }
#app .upload-button { display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; border: 1.5px dashed #8FB3CB; border-radius: 12px; font: 700 15px/1 var(--head); background: #F5FAFD; }
#app .upload-button::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><path d='M3 8.5A1.5 1.5 0 0 1 4.5 7h2.8L9 4.5h6L16.7 7h2.8A1.5 1.5 0 0 1 21 8.5v10a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 18.5z'/><circle cx='12' cy='13' r='3.8'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><path d='M3 8.5A1.5 1.5 0 0 1 4.5 7h2.8L9 4.5h6L16.7 7h2.8A1.5 1.5 0 0 1 21 8.5v10a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 18.5z'/><circle cx='12' cy='13' r='3.8'/></svg>") center / contain no-repeat; }
#app .photo-section img { width: 104px; height: 84px; border-radius: 10px; }

#app .conversation { background: linear-gradient(180deg, #F0F6FA, #EAF2F7); border-color: #D4E3EE; }
#app .assistant-mark { width: 44px; height: 44px; font: 800 22px/1 var(--head); background: var(--navy); box-shadow: 0 0 0 5px rgba(20, 61, 92, .1); }
#app .conversation h2 { font: 800 24px/1.15 var(--head); }
#app .conversation > p { font-size: 14px; color: #4F6578; }
#app .bubble { font-size: 14px; line-height: 1.55; border-radius: 14px 14px 4px 14px; border-color: #D4E3EE; box-shadow: 0 6px 16px -14px rgba(20, 61, 92, .6); }
#app #utterance { font: 600 15px/1.5 var(--font); border-radius: 12px; }
#app .chat-actions { gap: 8px; }
#app .chat-actions button { font-size: 14px; padding: 11px 14px; }
#app #mic { display: inline-flex; align-items: center; gap: 8px; background: #fff; border-color: #CBD7E1; }
#app #mic::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><rect x='9' y='2.5' width='6' height='12' rx='3'/><path d='M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><rect x='9' y='2.5' width='6' height='12' rx='3'/><path d='M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21'/></svg>") center / contain no-repeat; }
#app #voice-state { font-size: 12.5px; }
#app .proposal { border: 1.5px dashed var(--blue); border-radius: 14px; background: #fff; padding: 16px; position: relative; }
#app .proposal::before { content: "הצעה לעדכון · טרם נשמרה"; display: inline-block; margin-bottom: 10px; padding: 3px 9px; border-radius: 999px; background: var(--blue-soft); color: #11507A; font: 700 12px/1.3 var(--head); }
#app .proposal p { font-size: 14px; }
#app .proposal ul { font-size: 14px; padding-right: 0; list-style: none; }
#app .proposal li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
#app .proposal li strong { font: 800 16px/1.2 var(--head); color: var(--blue); }
#app .proposal button { font-size: 14px; padding: 10px 14px; margin: 10px 0 0 6px; }

/* ---------- review desk ---------- */
#app .section-head h2 { font: 800 34px/1.1 var(--head); letter-spacing: -.02em; }
#app .metrics { gap: 16px; }
#app .metric { position: relative; padding: 20px 22px 18px; border-radius: 14px; border-color: #DCE5EC; overflow: hidden; }
#app .metric strong { font: 800 44px/1 var(--head); letter-spacing: -.02em; margin-bottom: 8px; }
#app .metric span { font: 600 14px/1.3 var(--font); color: #4F6578; }
#app .metric .bar { height: 6px; border-radius: 6px; background: #E6EDF2; margin-top: 16px; }
#app .metric .bar i { height: 6px; border-radius: 6px; background: var(--green); }
#app .metric:nth-child(3) .bar i { background: var(--violet); }
#app .metric:nth-child(4) .bar i { background: linear-gradient(90deg, var(--amber), #1FA27A); }
#app .table-wrap { border-radius: 14px; border-color: #DCE5EC; }
#app th { font: 700 12px/1.2 var(--head); color: #4F6578; background: #F6F9FB; position: sticky; top: 0; }
#app td { font-size: 14px; padding: 13px 15px; }
#app tbody tr:hover td { background: #F4F8FB; }
#app td strong { font: 700 14px/1.2 var(--head); }
#app td button { font-size: 13px; padding: 6px 12px; border-radius: 999px; color: #11507A; border-color: #BCD3E4; }
#app .review-notes { border-radius: 14px; background: #FFF8EC; border: 1px solid #F1D6A6; }
#app .review-notes h3 { font-size: 16px; color: var(--amber-ink); }
#app .check-note { position: relative; font-size: 14px; padding: 10px 26px 10px 0; border-top-color: #F1DEBB; color: #5E4A26; }
#app .check-note::before { content: ""; position: absolute; right: 2px; top: 17px; width: 9px; height: 9px; background: var(--amber); transform: rotate(45deg); border-radius: 1px; }
#app .history-list { border-radius: 14px; border-color: #DCE5EC; }
#app .history-row { font-size: 14px; padding: 12px 18px; }
#app .history-row strong { font: 700 13px/1 var(--head); padding: 5px 10px; border-radius: 999px; background: #EEF3F7; color: var(--navy); }

/* ---------- delivery ---------- */
#app .delivery-hero { border-radius: 18px; border-color: #DCE5EC; padding: 48px 56px; background: #fff; background-image: radial-gradient(700px 300px at 0% 100%, rgba(23, 111, 166, .07), transparent 70%); }
#app .delivery-hero h2 { font-size: 48px; letter-spacing: -.03em; }
#app .delivery-hero p { font-size: 16px; color: #4F6578; }
#app .dossier-visual { width: 210px; height: 290px; border-radius: 4px; border-color: #D3DEE7; transform: rotate(-4deg); padding: 22px 20px; box-shadow: 12px 14px 0 #E8EFF4, 0 20px 40px -20px rgba(20, 61, 92, .45); }
#app .dossier-visual > span { font: 800 20px/1 var(--head); color: var(--green); }
#app .dossier-visual strong { font: 800 22px/1.1 var(--head); }
#app .paper-plan { border-color: var(--navy); width: 150px; background:
  linear-gradient(90deg, transparent 47%, var(--navy) 47%, var(--navy) 49%, transparent 49%),
  linear-gradient(0deg, transparent 52%, var(--navy) 52%, var(--navy) 54%, transparent 54%),
  linear-gradient(90deg, transparent 20%, var(--green) 20%, var(--green) 40%, transparent 40%) top / 100% 4px no-repeat, #FBF6EF; }
#app .dossier-visual small { color: var(--amber-ink); font-weight: 700; }
#app .export-card { border-radius: 14px; border-color: #DCE5EC; padding: 20px 24px; }
#app .export-card h3 { font: 800 20px/1.2 var(--head); }
#app .export-card a { display: inline-flex; align-items: center; gap: 8px; border-radius: 10px; padding: 10px 14px; font: 700 13px/1 var(--head); color: var(--navy); background: #F6F9FB; }
#app .export-card a::before { content: ""; width: 10px; height: 12px; border: 1.5px solid currentColor; border-radius: 2px; }
#app .export-card a:hover { border-color: #9DB6C8; background: #fff; }
#app .export-card .warning { color: var(--amber-ink); font-weight: 600; }

/* ---------- dialogs, toast, footer ---------- */
#modal { border-radius: 18px; border-color: #C9D7E2; box-shadow: 0 40px 80px -30px rgba(11, 36, 56, .55); }
#modal h2 { font: 800 26px/1.15 var(--head); }
#modal p { font-size: 15px; color: #4F6578; }
#modal .modal-form label { font: 700 14px/1.2 var(--head); }
#toast { border-radius: 12px; font: 700 14px/1.4 var(--font); padding: 13px 20px; }
#app .app-footer { font-size: 12px; }

/* ---------- phone: bigger targets on the field device ---------- */
@media (max-width: 640px) {
  #app .main-nav { padding: 0 4px; gap: 0; }
  #app .main-nav button { gap: 6px; padding: 0 6px; font-size: 13px; }
  #app .main-nav button::before { width: 20px; height: 20px; font-size: 11px; }
  #app .project-heading h1 { font-size: 30px; }
  #app .drawing-toolbar button { font-size: 12px; padding: 9px 9px; }
  #app .field-row input, #app .field-row select { min-height: 48px; }
  #app .chat-actions button, #app .form-actions .primary, #app .upload-button { min-height: 48px; }
  #app .survey-form-panel .section-head h2, #app #survey-title { font-size: 28px; }
  #login .login-panel h1 { font-size: 52px; }
  #app .brand img { height: 22px; }
  #app .brand strong { white-space: nowrap; font-size: 16px; }
  #app #save-state { white-space: nowrap; padding: 4px 10px; font-size: 12px; }
  #app .field-grid { grid-template-columns: 1fr; }
  #app .measurement { grid-template-columns: 1fr 96px; }
  #app .canvas-legend { font-size: 11px; gap: 8px; padding: 6px 8px; bottom: 8px; right: 8px; }
  #app .canvas-message { font-size: 12px; }
}

/* ===================== infographics (design/infographics.js) ===================== */
.mp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mp-empty { padding: 18px; border: 1px dashed #C9D6E0; border-radius: 12px; color: #4F6578; font-size: 14px; background: #fff; }

/* 1. ribbon: six counted stages, connected; state colours the dot and the connector */
.mp-ribbon { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); background: #fff; border: 1px solid #DCE5EC; border-radius: 16px; overflow: hidden; }
.mp-ribbon__step { position: relative; display: grid; gap: 4px; align-content: start; padding: 16px 18px 15px; border-inline-start: 1px solid #EEF2F5; }
.mp-ribbon__step:first-child { border-inline-start: 0; }
.mp-ribbon__step::before { /* connector along the top edge */
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 4px; background: #E3EBF1;
}
.mp-ribbon__step[data-state="done"]::before { background: var(--green, #168663); }
.mp-ribbon__step[data-state="partial"]::before { background: linear-gradient(90deg, #E3EBF1 0 30%, var(--blue, #176FA6) 30%); }
.mp-ribbon__step[data-state="gap"]::before { background: var(--amber, #E4A13B); }
.mp-ribbon__step[data-state="stale"]::before { background: var(--red, #B83A2E); }
.mp-ribbon__dot { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 800 11px/1 var(--head, 'Heebo'); color: #fff; background: #9AAEBE; }
.mp-ribbon__step[data-state="done"] .mp-ribbon__dot { background: var(--green, #168663); }
.mp-ribbon__step[data-state="partial"] .mp-ribbon__dot { background: var(--blue, #176FA6); }
.mp-ribbon__step[data-state="gap"] .mp-ribbon__dot { background: var(--amber, #E4A13B); color: #3B2A08; }
.mp-ribbon__step[data-state="stale"] .mp-ribbon__dot { background: var(--red, #B83A2E); }
.mp-ribbon__title { font: 700 13px/1.2 var(--head, 'Heebo'); color: #4F6578; margin-top: 4px; }
.mp-ribbon__value { font: 800 26px/1.05 var(--head, 'Heebo'); color: var(--navy, #143D5C); letter-spacing: -.02em; white-space: nowrap; }
.mp-ribbon__value small { font: 600 13px/1 var(--font, 'Assistant'); color: #5E7387; letter-spacing: 0; }
.mp-ribbon__bar { display: block; height: 5px; border-radius: 5px; background: #E3EBF1; overflow: hidden; }
.mp-ribbon__bar i { display: block; height: 100%; border-radius: 5px; background: var(--green, #168663); }
.mp-ribbon__note { font-size: 12.5px; line-height: 1.4; color: #5E7387; }
.mp-ribbon__step[data-state="gap"] .mp-ribbon__note { color: var(--amber-ink, #8A5A10); font-weight: 600; }
.mp-ribbon__step[data-state="stale"] .mp-ribbon__note { color: var(--red, #B83A2E); font-weight: 600; }
@media (max-width: 1100px) { .mp-ribbon { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mp-ribbon__step:nth-child(4) { border-inline-start: 0; } .mp-ribbon__step:nth-child(n+4) { border-top: 1px solid #EEF2F5; } }
/* phone: one swipeable row so the plan stays near the top of the screen */
@media (max-width: 640px) {
  .mp-ribbon { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .mp-ribbon::-webkit-scrollbar { display: none; }
  .mp-ribbon__step { flex: 0 0 132px; scroll-snap-align: start; padding: 12px 12px 10px; border-top: 0 !important; border-inline-start: 1px solid #EEF2F5 !important; }
  .mp-ribbon__step:first-child { border-inline-start: 0 !important; }
  .mp-ribbon__value { font-size: 21px; }
  .mp-ribbon__note { display: none; }
}

/* review: two infographic panels side by side */
.mp-infos { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; margin: 0 0 26px; }
.mp-infos > section { background: #fff; border: 1px solid #DCE5EC; border-radius: 14px; padding: 18px 20px; }
.mp-infos h3 { font: 800 17px/1.2 var(--head, 'Heebo'); margin: 0 0 4px; }
@media (max-width: 900px) { .mp-infos { grid-template-columns: 1fr; } }

/* 2. identity map */
.mp-idmap { margin: 0; }
.mp-idmap figcaption, .mp-hvac figcaption { font-size: 14px; color: #4F6578; margin-bottom: 8px; }
.mp-idmap figcaption b, .mp-hvac figcaption b { font: 800 18px/1 var(--head, 'Heebo'); color: var(--navy, #143D5C); }
.mp-idmap figcaption b.is-gap { color: var(--amber-ink, #8A5A10); }
.mp-idmap svg { display: block; width: 100%; height: auto; }
.mp-idmap__head { font: 700 12px var(--head, 'Heebo'); fill: #6A7F90; }
.mp-idmap__link { fill: none; stroke: var(--green, #168663); stroke-width: 2; opacity: .55; }
.mp-idmap__link.is-loose { stroke: var(--amber, #E4A13B); stroke-dasharray: 5 4; opacity: .9; }
.mp-idmap__opening rect { fill: #fff; stroke: #CFE6DC; }
.mp-idmap__opening rect.no { fill: var(--green-ink, #0F7352); stroke: none; }
.mp-idmap__opening text.no { font: 800 13px var(--head, 'Heebo'); fill: #fff; }
.mp-idmap__opening text.room { font: 600 12.5px var(--font, 'Assistant'); fill: #2E4A60; }
.mp-idmap__group rect { fill: #F6F9FB; stroke: #D3DEE7; }
.mp-idmap__group text.qty { font: 800 16px var(--head, 'Heebo'); fill: var(--navy, #143D5C); }
.mp-idmap__group text.label { font: 600 12.5px var(--font, 'Assistant'); fill: #2E4A60; }
.mp-idmap__group.is-loose rect { fill: var(--amber-soft, #FCEFD9); stroke: var(--amber, #E4A13B); stroke-dasharray: 5 4; }
.mp-idmap__rule { font-size: 13px; color: #5E7387; margin: 8px 0 0; }

/* 3. HVAC systems */
.mp-hvac { margin: 0; }
.mp-hvac__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mp-hvac__system { border: 1px solid #DDD5F1; border-radius: 12px; padding: 12px; background: #FBFAFE; }
.mp-hvac__unit { display: flex; align-items: center; gap: 10px; }
.mp-hvac__unit b { font: 800 15px/1.2 var(--head, 'Heebo'); display: block; }
.mp-hvac__unit small { font-size: 12.5px; }
.mp-hvac__glyph { width: 34px; height: 34px; border-radius: 9px; background: var(--violet, #6447A8); flex: none; position: relative; }
.mp-hvac__glyph::after { content: ""; position: absolute; inset: 9px 6px; border: 2px solid #fff; border-radius: 3px; border-top-width: 5px; }
.mp-hvac__count { margin-inline-start: auto; font: 800 14px/1 var(--head, 'Heebo'); color: var(--violet, #6447A8); background: var(--violet-soft, #ECE7F7); padding: 6px 9px; border-radius: 999px; }
.mp-hvac__rooms { list-style: none; margin: 10px 0 0; padding: 0 44px 0 0; display: flex; flex-wrap: wrap; gap: 6px; position: relative; }
.mp-hvac__rooms::before { content: ""; position: absolute; right: 16px; top: -10px; bottom: 14px; border-right: 2px dashed #B9A8E6; }
.mp-hvac__rooms li { display: grid; padding: 6px 10px; border-radius: 10px; background: #fff; border: 1px solid #E2DAF5; font: 700 13px/1.25 var(--head, 'Heebo'); }
.mp-hvac__rooms li small { font: 600 11.5px/1.3 var(--font, 'Assistant'); color: #6A7F90; }
.mp-hvac__rooms li[data-status="faulty"] small { color: var(--red, #B83A2E); }
.mp-hvac__rooms li[data-status="working"] small { color: var(--green-ink, #0F7352); }
.mp-hvac__rest { font-size: 13px; color: #5E7387; margin: 10px 0 0; }

/* 4. ring */
.mp-ring .track { fill: none; stroke: #E3EBF1; stroke-width: 7; }
.mp-ring .fill { fill: none; stroke: var(--green, #168663); stroke-width: 7; stroke-linecap: round; }
.mp-ring text { font: 800 13px var(--head, 'Heebo'); fill: var(--navy, #143D5C); }
/* Integration fix: preserve local save status within a 390px RTL viewport. */
@media(max-width:640px){#app .topbar{padding-inline:12px}#app .brand img{max-width:145px;height:auto}}
.mp-infos>section{min-width:0}.mp-idmap__key{padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px 16px;margin:8px 0;font-size:13px}.mp-idmap__key b{color:var(--green-ink)}
@media(max-width:640px){.mp-idmap{overflow-x:auto}.mp-idmap>svg{min-width:640px}.mp-idmap::before{content:'גללו את התרשים לצדדים כדי לקרוא את השיוכים';display:block;font-size:12px;color:var(--muted);margin:7px 0}.mp-idmap__key,.mp-idmap__rule,.mp-idmap figcaption{position:sticky;right:0;max-width:100%}}

/* Hosted navigation: allow the help/logout controls to occupy real layout space. */
#app .topbar{height:auto;min-height:66px;padding-block:10px;gap:12px}
@media(max-width:640px){#app .topbar{flex-direction:column;align-items:stretch;gap:8px}#app .brand{align-self:flex-start}#app .top-meta{width:100%;justify-content:space-between;gap:8px;font-size:12px}#app .top-meta #save-state{white-space:nowrap}#app #logout{padding:5px 8px}}