/* M19 Visual System v3.14 — shared visual roles, restrained motion and RTL.
 * Derived design choices (not verbatim reproduction) from Material 3, W3C WCAG 2.2,
 * Apple HIG Motion, NN/g heuristics. Offline, no third-party scripts or fonts.
 */
:root {
 --m19-primary:#096b70;
 --m19-primary-pressed:#07565b;
 --m19-primary-soft:#e7f4f0;
 --m19-ink:#163b4b;
 --m19-ink-muted:#506874;
 --m19-outline:#b7cdd1;
 --m19-divider:#dbe6e7;
 --m19-surface:#ffffff;
 --m19-surface-alt:#f5f9f9;
 --m19-canvas:#f0f5f6;
 --m19-success:#12634e;
 --m19-success-soft:#eaf5ef;
 --m19-warn:#85501e;
 --m19-warn-soft:#fff4e7;
 --m19-error:#9b3340;
 --m19-error-soft:#fff4f2;
 --m19-focus:#087c8a;
 --m19-radius-xs:9px;
 --m19-radius-sm:12px;
 --m19-radius-card:18px;
 --m19-radius-dialog:22px;
 --m19-ease-standard:cubic-bezier(.2,0,0,1);
 --m19-ease-exit:cubic-bezier(.4,0,1,1);
 --m19-duration-short:120ms;
 --m19-duration-standard:210ms;
 --m19-duration-enter:240ms;
 --m19-shadow-card:0 7px 28px rgba(20,57,75,.055);
 --m19-shadow-dialog:0 20px 65px rgba(9,37,51,.23);
 --ink:var(--m19-ink);
 --ink2:var(--m19-ink-muted);
 --brand:var(--m19-primary);
 --navy:#123c51;
 --bg:var(--m19-canvas);
 --line:var(--m19-divider);
 --surface:var(--m19-surface);
 --accent:var(--m19-primary-soft);
}
html { scroll-behavior: smooth; }
body {
 font-family:"Noto Sans Arabic","Vazirmatn",Tahoma,system-ui,sans-serif;
 color:var(--m19-ink);
 background:var(--m19-canvas);
 line-height:1.8;
 -webkit-font-smoothing:antialiased;
 text-rendering:optimizeLegibility;
}
button,select,input,textarea { font-family:inherit; }
button { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
button:disabled { opacity:.58;cursor:not-allowed; }
a,button,select,summary,input { scroll-margin-block:14px; }
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,textarea:focus-visible {
 outline:3px solid var(--m19-focus);outline-offset:3px;
}
button .m19-icon, a .m19-icon,.mode-icon .m19-icon {
 display:inline-block;width:19px;height:19px;stroke:currentColor;stroke-width:1.9;
 flex:0 0 auto;vertical-align:middle;pointer-events:none;
}
button.m19-iconized {display:inline-flex;align-items:center;justify-content:center;gap:8px}
.mode-choice .m19-icon {width:25px;height:25px}
button[data-pdf].m19-iconized .m19-icon,.quick-actions .m19-icon {width:17px;height:17px}
.appbar {
 background:linear-gradient(105deg,#123c51 0%,#102e43 100%);
 box-shadow:0 2px 10px rgba(9,37,51,.08);
}
.appbar .version {color:#e8f4f3;border-color:#688c99;background:rgba(255,255,255,.045)}
.appbar-actions .restart-app {
 background:#f3faf9!important;
 border-color:#d3e6e3!important;
 color:#123c51!important;
}
.appbar .appbrand strong {font-weight:800;letter-spacing:-.1px}
.entry-gate,.quick-wizard,.pane {
 border:1px solid var(--m19-divider);border-radius:var(--m19-radius-card);
 background:var(--m19-surface);box-shadow:var(--m19-shadow-card);
}
.start-config {background:var(--m19-surface-alt);border-radius:var(--m19-radius-sm);padding:12px 13px}
.start-project {background:var(--m19-surface)!important}
.quick-kicker {color:var(--m19-primary);font-size:12px;font-weight:780;letter-spacing:.05px}
.entry-gate h2,.quick-wizard h2,.sectiontitle h2 {color:var(--m19-ink);letter-spacing:-.15px}
.quick-wizard h3 {color:var(--m19-ink);font-weight:800}
.mode-choice {
 border:1px solid var(--m19-outline);
 border-radius:var(--m19-radius-card);background:white;
 box-shadow:0 3px 12px rgba(24,69,80,.035);
 transition:border-color var(--m19-duration-short) var(--m19-ease-standard),background var(--m19-duration-short) var(--m19-ease-standard),transform var(--m19-duration-short) var(--m19-ease-standard);
}
.mode-choice.quick-primary {border-color:#79bbae;background:var(--m19-primary-soft)}
.mode-choice .mode-icon {background:#d9efea;color:#075f62}
.mode-choice:not(.quick-primary) .mode-icon {background:#e8f0f4;color:#245565}
.mode-choice:active {transform:scale(.992)}
.mode-choice:focus-visible {outline:3px solid var(--m19-focus)}
.primary,.secondary,.quick-advanced,.quick-detail,.finish-layer-button,.resume-button {
 border-radius:var(--m19-radius-sm);
 transition:background-color var(--m19-duration-short) var(--m19-ease-standard),border-color var(--m19-duration-short) var(--m19-ease-standard),box-shadow var(--m19-duration-short) var(--m19-ease-standard),transform var(--m19-duration-short) var(--m19-ease-standard);
}
.primary,.quick-primary:not(.mode-choice) {background:var(--m19-primary);color:white}
.primary:hover {background:var(--m19-primary-pressed)}
.secondary {border:1px solid var(--m19-outline);background:#fff;color:var(--m19-primary)}
.quick-detail {border-color:#8fbdb5;color:#165e59;background:var(--m19-primary-soft)}
.quick-actions button,.wizard-actions button {font-weight:800;min-height:50px}
button:not(:disabled):active {transform:scale(.986)}
.quick-progress {gap:7px;margin:12px 0}
.quick-progress i {height:7px;border-radius:999px;background:#dde8e9;transition:background-color var(--m19-duration-standard) var(--m19-ease-standard)}
.quick-progress i.active {background:var(--m19-primary)}
.quick-head {margin-bottom:18px}
#quickCounter {display:inline-block;font-size:12px;color:var(--m19-ink-muted);font-variant-numeric:tabular-nums}
.quick-choices button,.quick-slope-choices button,.quick-ins-kind label {
 border:1.5px solid var(--m19-outline);border-radius:var(--m19-radius-sm);
 background:white;color:var(--m19-ink);
 transition:border-color var(--m19-duration-short),background-color var(--m19-duration-short),box-shadow var(--m19-duration-short),transform var(--m19-duration-short);
}
.quick-choices button.selected,.quick-slope-choices button.selected,.quick-ins-kind label:has(input:checked) {
 background:var(--m19-primary-soft);border-color:var(--m19-primary);
 box-shadow:inset 0 0 0 1px var(--m19-primary);
}
.quick-choices button:focus-visible,.quick-slope-choices button:focus-visible {outline:3px solid var(--m19-focus)}
.quick-ins-kind label {cursor:pointer;min-height:98px;gap:7px}
.quick-ins-kind label:has(input:checked) span {color:#075a52;font-weight:800}
.quick-ins-kind input {accent-color:var(--m19-primary)}
.field label,.quick-wizard .field label {color:var(--m19-ink);font-weight:750}
.field input,.field select,.field textarea,#qCityPick {
 background:var(--m19-surface);border:1.5px solid var(--m19-outline);
 color:var(--m19-ink);border-radius:var(--m19-radius-sm);
 min-height:49px;
}
.field input:focus,.field select:focus,.field textarea:focus {border-color:var(--m19-primary);outline-offset:2px}
.quick-wizard select,.field select {font-size:15px;line-height:1.7}
.quick-wizard option {direction:rtl;unicode-bidi:plaintext}
.field-guidance {color:var(--m19-ink-muted)}
.quick-summary,.v4-context,.quick-assumptions,.v4-rmin-preview {border-radius:var(--m19-radius-sm)}
.quick-summary {background:#eff8f5;border:1px solid #cce2dc}
.roof-status.confirmed {color:var(--m19-success)}
.roof-status.confirmed::before {content:"";display:inline-block;width:7px;height:7px;background:var(--m19-success);border-radius:50%;margin-inline-end:4px}
.quick-error,.inlineerror {background:var(--m19-error-soft)!important;color:var(--m19-error)!important;border:1px solid #edc8c9;border-radius:var(--m19-radius-sm);padding:11px 13px;line-height:1.75}
.detail-info.warn,.rounding-warning,.confirm-missing {background:var(--m19-warn-soft);color:var(--m19-warn)}
/* Fixed surface and a properly sized, centered modal: avoid giant close glyphs. */
.modal {
 border:1px solid #d9e4e5;border-radius:var(--m19-radius-dialog);
 background:white;box-shadow:var(--m19-shadow-dialog);
 width:min(calc(100vw - 26px),620px);max-width:min(calc(100vw - 26px),620px);
 max-height:min(calc(100dvh - 28px),850px);
 padding:0 17px 17px;overflow-y:auto;
 overscroll-behavior:contain;
}
.modal::backdrop {background:rgba(13,38,51,.56)}
.modal-head {position:sticky;top:0;z-index:3;min-height:67px;align-items:center;
 background:var(--m19-surface);padding:10px 0;margin-bottom:12px;border-bottom:1px solid var(--m19-divider)}
.modal-head h2 {font-size:clamp(16px,4.5vw,20px);line-height:1.6;font-weight:800;overflow-wrap:anywhere}
.modal-head .iconbtn {
 width:44px;min-width:44px;height:44px;min-height:44px;padding:0;
 background:#eaf3f5;color:var(--m19-ink);
 font-size:23px;line-height:1;border-radius:50%;display:grid;place-items:center;
}
.modal-head .iconbtn .m19-icon {width:20px;height:20px}
.modal .field{margin-bottom:15px}
.modal .field label{font-size:14px;line-height:1.75}
.modal .field input,.modal .field select{min-height:50px;padding-block:9px;font-size:16px}
.modal-actions {position:sticky;bottom:-17px;background:white;padding-block:12px 16px;z-index:2;border-top:1px solid var(--m19-divider)}
.modal-actions button {min-height:48px}
.modal-head .iconbtn:hover {background:#dcebed}
.design-card {background:#f8fbfb;border-color:var(--m19-divider);border-radius:var(--m19-radius-card)}
.design-card.design-featured {background:#eaf7f1;border-color:#8fc4b1}
.design-card .design-number {color:var(--m19-success)}
.design-card .design-insulation-name {color:var(--m19-ink);font-weight:800}
.design-card .report-type button {border-color:var(--m19-outline);color:var(--m19-ink);font-size:12px}
.design-card .report-type button.selected {background:#d8f0e8;border-color:var(--m19-primary);color:#075e55}
.design-actions button {border-color:#a5c5c5;color:#145469}
.design-actions button:first-child {background:var(--m19-primary);border-color:var(--m19-primary);color:white}
.design-links a {border-color:var(--m19-outline);color:#135665}
.result-safety {background:#f5f8f8;border-inline-start:3px solid var(--m19-primary);padding:10px 12px;border-radius:var(--m19-radius-xs)}
/* Motion conveys entry, selection and completion. No looping, drifting or shimmer. */
@keyframes m19-enter {from{opacity:.35;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes m19-sheet-in {from{opacity:.65;transform:translateY(12px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes m19-sheet-out {from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(7px) scale(.988)}}
@keyframes m19-soft-in {from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:no-preference) {
 .entry-gate:not([hidden]),.quick-wizard [data-quick-step]:not([hidden]),.pane:not([hidden]) {animation:m19-enter var(--m19-duration-enter) var(--m19-ease-standard) both}
 .modal[open]:not(.is-closing) {animation:m19-sheet-in var(--m19-duration-enter) var(--m19-ease-standard) both}
 .modal.is-closing {animation:m19-sheet-out var(--m19-duration-short) var(--m19-ease-exit) forwards}
 .modal[open]::backdrop {animation:m19-soft-in 150ms ease-out both}
 .quick-error:not([hidden]),.inlineerror:not([hidden]),#result:not([hidden]) {animation:m19-soft-in var(--m19-duration-standard) ease-out both}
 details[open] > :not(summary){animation:m19-soft-in 180ms ease-out both}
}
@media (hover:hover) and (pointer:fine) {
 .mode-choice:hover {border-color:var(--m19-primary);background:#f0f9f6;box-shadow:0 6px 19px rgba(20,80,78,.10)}
 .quick-choices button:hover,.quick-slope-choices button:hover {border-color:var(--m19-primary)}
}
@media (prefers-reduced-motion:reduce) {
 *,*::before,*::after {animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media (max-width:480px) {
 .wrap {padding-inline:12px}
 .entry-gate,.quick-wizard {margin:12px 0 16px;padding:15px}
 .quick-wizard h3 {font-size:17px}
 .mode-choice {min-height:91px;padding:13px;gap:10px}
 .mode-choice b {font-size:16px}
 .mode-choice small {font-size:12px}
 .mode-icon {width:42px;height:42px}
 .modal {width:calc(100vw - 20px);max-width:calc(100vw - 20px)!important;padding-inline:14px}
 .design-actions button {min-height:46px}
}
@media print {
 .modal,.m19-icon, .quick-progress {animation:none!important}
 .print-document,.print-document * {transform:none!important;box-shadow:none!important}
}

/* V3.15 comparison: identical row geometry ensures precise thickness baseline. */
.design-compare{align-items:stretch}
.design-card{display:grid!important;grid-template-columns:minmax(0,1fr);grid-template-rows:28px 43px 36px 85px minmax(52px,auto) minmax(35px,auto) 67px auto;gap:5px;align-content:start;min-width:0;overflow:hidden}
.design-card>small:first-child{grid-row:1;align-self:center;font-size:12px}
.design-card>.compare-grade-label{grid-row:2;display:none!important}
.design-card>select{grid-row:2;min-height:43px;font-size:clamp(12px,3.3vw,15px);align-self:center}
.design-card:not(.design-featured)::before{content:"";grid-row:2}
.design-card>.design-lambda{grid-row:3;align-self:center;text-align:center;direction:ltr;unicode-bidi:isolate;white-space:normal}
.design-card>.design-number{grid-row:4;order:unset!important;align-self:center;justify-self:center;display:flex;align-items:baseline;justify-content:center;font-variant-numeric:tabular-nums;min-height:unset!important;margin:0;font-size:clamp(30px,8vw,52px)}
.design-card>.design-number span{font-size:clamp(12px,3vw,17px)}
.design-card>.design-insulation-name{grid-row:5;order:unset!important;align-self:start;min-height:0;line-height:1.45;display:block;overflow-wrap:normal;word-break:normal;hyphens:none}
.design-card>.rounding-warning{grid-row:6;order:unset!important}
.design-card>.design-savings{grid-row:6;align-self:start;text-align:center;display:block;font-size:clamp(10px,2.6vw,13px);line-height:1.4;font-weight:700;color:#12634e}
.design-card>.report-type{grid-row:7;order:unset!important;margin:0;align-self:stretch}
.design-card>.design-actions{grid-row:8;order:unset!important;align-self:end;margin-top:0;padding-top:5px}
.report-type button{white-space:nowrap;overflow:hidden;min-width:0;font-size:clamp(11px,2.8vw,14px)!important;line-height:1.35!important;word-break:normal!important}
.design-actions button{display:flex;justify-content:center;align-items:center;gap:5px;min-height:48px;padding:7px 4px;font-size:clamp(11px,2.8vw,14px)!important;word-break:keep-all;overflow-wrap:normal}
.design-actions button .m19-icon{flex-shrink:0}
.design-card:not(.design-featured) .design-number{color:var(--m19-ink)}
.design-card.design-featured .design-number{color:var(--m19-success)}
.field select#qFinish,.field select#qInside{font-size:clamp(13px,3.7vw,16px);text-overflow:ellipsis;padding-inline:10px 29px;max-width:100%;line-height:1.6}
@media(max-width:370px){.design-compare{gap:5px}.design-card{padding:8px 5px;grid-template-rows:27px 40px 36px 70px minmax(70px,auto) minmax(45px,auto) 62px auto}.design-card>.design-number{font-size:clamp(27px,8vw,40px)}}

/* V3.16: resilient comparison and mixed-script UI, avoiding fixed row heights.
   Intentional page overflow is allowed; avoid horizontal clipping and forced scroll jumps. */
:where(.wrap,.pane,.quick-wizard,.design-compare,.design-card,.field){min-inline-size:0}
.design-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:clamp(6px,2vw,12px)}
.design-card{display:flex!important;flex-direction:column;align-items:stretch;grid-template-rows:none!important;gap:7px;min-inline-size:0;overflow-wrap:normal;word-break:normal}
.design-card>*{grid-row:auto!important;min-inline-size:0;order:initial!important}
.design-card::before{display:none!important}
.design-card>.compare-grade-label{display:block!important;min-height:0;line-height:1.4}
.design-card>.design-number{min-height:56px!important;margin:2px 0!important;flex:0 0 auto;align-self:center;white-space:nowrap;font-size:clamp(27px,7.4vw,46px)!important}
.design-card>.design-insulation-name{min-height:3.1em!important;line-height:1.5;overflow-wrap:break-word;text-align:center}
.design-card>.design-lambda{direction:ltr;unicode-bidi:isolate;display:block;white-space:normal;line-height:1.4;min-height:3em;text-align:center}
.design-card>.report-type{margin-top:auto}
.design-card>.design-actions{margin-top:0!important;padding-top:6px}
.design-card>.design-actions button{white-space:normal;overflow-wrap:break-word;min-height:48px}
.design-card>.report-type button{min-height:48px;white-space:normal;overflow:visible}
.design-number,.design-lambda,[data-m19-ltr],bdi[dir="ltr"]{direction:ltr;unicode-bidi:isolate}
.m19-ltr{display:inline-block;direction:ltr;unicode-bidi:isolate;white-space:nowrap}
#recap strong,.layer-meta,.quick-summary li span{overflow-wrap:break-word;unicode-bidi:plaintext}
:where(.pane,.quick-wizard,.entry-gate) :is(button,select,input){max-inline-size:100%}
:where(.quick-actions,.wizard-actions){padding-bottom:env(safe-area-inset-bottom,0px)}
:where(.quick-error,.errorbar,.inlineerror):not([hidden]){scroll-margin-block-start:88px}
@media(max-width:380px){
 .design-compare{gap:6px}
 .design-card{padding:9px 6px}
 .design-card>.design-number{font-size:clamp(25px,7.5vw,33px)!important}
 .design-card>.design-insulation-name{font-size:12px}
}
@media(min-width:600px){.design-card{padding:16px}.design-card>.design-number{font-size:44px!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}

/* V3.16 refinement: stable numerical baseline and content-driven rows.
   Two-column layout remains compact without clipping 320px widths. */
.design-card>small:first-child{order:0}
.design-card>.compare-grade-label{order:1;height:19px;min-height:19px;line-height:19px}
.design-card>select{order:2;height:43px;min-height:43px}
.design-card:not(.design-featured)::before{
 content:"";display:block!important;order:1;flex:0 0 69px;
}
.design-card>.design-number{order:3!important}
.design-card>.design-insulation-name{order:4!important}
.design-card>.design-lambda{order:5!important}
.design-card>.rounding-warning{order:6!important}
.design-card>.design-savings{order:7!important}
.design-card>.report-type{order:8!important}
.design-card>.design-actions{order:9!important}

/* Back arrow: a single icon, flipped to the correct RTL previous-step direction. */
#quickBack .m19-icon,#prev .m19-icon{transform:scaleX(-1)}


/* V3.17 adaptive browser layout: content-first breakpoints, mobile WebView parity.
   Breakpoints are based on available content space, not device or UA sniffing. */
:root{--adaptive-max:1320px;--adaptive-gutter:clamp(12px,2.4vw,36px)}
html{min-inline-size:0}
body{min-inline-size:0}
.wrap{inline-size:min(100%,var(--adaptive-max));max-inline-size:var(--adaptive-max);margin-inline:auto;padding-inline:var(--adaptive-gutter)}
.appbar{padding-inline:max(var(--adaptive-gutter),calc((100vw - var(--adaptive-max))/2 + var(--adaptive-gutter)))!important}
:where(.wrap,.quick-wizard,.pane,.entry-gate,.grid2,.design-compare,.design-card,.field){min-inline-size:0}
:where(img,svg,video,canvas){max-inline-size:100%}
:where(.quick-wizard,.pane,.entry-gate,.design-compare){container-type:inline-size}
:where(.field,.design-card,.mode-choice){overflow-wrap:break-word}
:where(input,select,textarea){min-inline-size:0;max-inline-size:100%}
@media (min-width:700px){
 .wrap{padding-block:clamp(22px,3vw,42px)}
 .intro{padding:clamp(24px,3vw,42px)}
 .intro h1{font-size:clamp(24px,2.2vw,36px);line-height:1.45}
 .entry-gate,.quick-wizard,.pane{padding:clamp(22px,2.4vw,38px)}
 .grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
 .appbar{min-height:72px}
 .design-compare{gap:clamp(14px,1.6vw,28px)}
 .design-card{padding:clamp(18px,2vw,28px)}
}
@media (min-width:1100px){
 .wrap{max-inline-size:1320px}
 .quick-wizard,.pane{max-inline-size:100%}
 .quick-wizard .quick-actions,.wizard-actions{gap:16px}
 .design-compare{grid-template-columns:repeat(2,minmax(0,1fr));max-inline-size:1080px;margin-inline:auto}
 .design-card>.design-number{font-size:clamp(42px,3.8vw,56px)!important}
 .modal{inline-size:min(740px,calc(100vw - 80px));max-inline-size:740px!important}
}
@container (min-width:800px){
 .design-compare{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:699px){
 .wrap{max-inline-size:100%;padding-inline:clamp(10px,3vw,18px)}
 .entry-gate,.quick-wizard,.pane{padding:clamp(12px,3vw,20px)}
 .design-compare{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:350px){
 .design-compare{grid-template-columns:minmax(0,1fr)}
}
@media (pointer:coarse){
 :where(.quick-actions,.wizard-actions,.report-type,.design-actions) button{min-block-size:48px}
}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}
}
@media print{
 .wrap{max-inline-size:none;padding:0}
 .appbar,.wizard-actions,.quick-actions,.entry-gate{display:none!important}
}