/* POPUP_MATERIAL_2026Q4 : the popups that stay after the Drawing toolbar trim, in the approved mobile material (mockups CalcForm,
   CalcPhone, CalcSuite, AnnotForm): a white sheet (dark #1c1d21), ink #101114, Inter, radius 12-22, hairlines, a 40 px tinted icon
   tile, 13 px / 600 labels ABOVE 42 px fields with the unit inside, results on the soft surface, a red-tint secondary and the red
   primary. Each tool keeps its colours: the forms' red tile and red brand buttons, the launcher's sections (Powertrain orange,
   Mechanical red, Fluid / Thermal sky), the green / amber / red result status. Touch (html.tye-ts): bottom sheets, 48 px fields, 52 px pill buttons.
   Scope: .calcf-* (cad_phase10/11/13/14/15 _modal), .csuite-* (the calculator launcher), .tye-popup.pm-annot (the Annotate
   prompt, marked by popups_material.js), .cad-save-modal.pm-save (fix_edit's File > Save dialog in the house prompt's look),
   #toast .pm-dot, the binary-DWG house alert (data-dlg-src). On touch the sheets keep their buttons above the on-screen keyboard
   (--ts-kbh, touch_shell.js), as the house sheets do.
   cad_draw.css / voice_ui.css style these with (0,2,1) selectors and some !important: these rules start with :root body
   (0,2,2+), and !important only where an inline style or an !important rule forces it. The last static sheet. */

/* ---------------- tokens ---------------- */
.calcf-card, .csuite-modal, .tye-popup.pm-annot, body > .calcf-overlay, body > .pm-calc, body > div:has(> .calcf-card), .csuite-overlay, .cad-save-modal.pm-save {
  --pm-sheet: #ffffff; --pm-ink: #101114; --pm-ink2: #3b3f46; --pm-ink3: #636a76;
  --pm-line: rgba(17, 20, 28, .10); --pm-fline: rgba(17, 20, 28, .16); --pm-field: #f6f7f9; --pm-soft: #f4f5f7;
  --pm-press: rgba(17, 20, 28, .06); --pm-scrim: rgba(10, 12, 16, .32);
  --pm-shadow: 0 24px 64px rgba(17, 20, 28, .22), 0 2px 8px rgba(17, 20, 28, .08);
  --pm-red: #e8341f; --pm-red-hover: #d42d19; --pm-red-ink: #c42a1a; --pm-red-tint: rgba(232, 52, 31, .10); --pm-red-tint2: rgba(232, 52, 31, .16);
  --pm-focus: #e5322a; --pm-ring: rgba(229, 50, 42, .16);
  --pm-acc: #e8341f; --pm-tint: rgba(232, 52, 31, .10);
  --pm-ok: #15803d; --pm-warn: #b45309; --pm-bad: #dc2626; --pm-good2: #4d7c0f;
  --pm-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23636a76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --pm-font: Inter, 'Noto Sans Thai', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pm-mono: ui-monospace, 'SF Mono', Consolas, monospace;
}
html[data-theme="dark"] :is(.calcf-card, .csuite-modal, .tye-popup.pm-annot, body > .calcf-overlay, body > .pm-calc, body > div:has(> .calcf-card), .csuite-overlay, .cad-save-modal.pm-save) {
  --pm-sheet: #1c1d21; --pm-ink: #f2f3f5; --pm-ink2: #c9cdd4; --pm-ink3: #9aa1ad;
  --pm-line: rgba(255, 255, 255, .10); --pm-fline: rgba(255, 255, 255, .16); --pm-field: rgba(255, 255, 255, .05); --pm-soft: #25272c;
  --pm-press: rgba(255, 255, 255, .08); --pm-scrim: rgba(0, 0, 0, .55);
  --pm-shadow: 0 24px 64px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .4);
  --pm-red-ink: #ff8a80; --pm-red-tint: rgba(255, 77, 66, .14); --pm-red-tint2: rgba(255, 77, 66, .22);
  --pm-focus: #f04b3f; --pm-ring: rgba(240, 75, 63, .24);
  --pm-acc: #ff4d42; --pm-tint: rgba(255, 77, 66, .14);
  --pm-ok: #4ade80; --pm-warn: #fbbf24; --pm-bad: #f87171; --pm-good2: #a3e635;
  --pm-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa1ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
/* the launcher's section colours (CalcSuite); a form's own tile stays the brand red of today's forms (CalcForm) */
.csuite-sec[data-cat="pt"] { --pm-acc: #ea580c; --pm-tint: rgba(249, 115, 22, .12); }
.csuite-sec[data-cat="ft"] { --pm-acc: #0284c7; --pm-tint: rgba(14, 165, 233, .12); }
.csuite-sec[data-cat="me"] { --pm-acc: #e8341f; --pm-tint: rgba(232, 52, 31, .10); }
html[data-theme="dark"] .csuite-sec[data-cat="pt"] { --pm-acc: #fb923c; --pm-tint: rgba(249, 115, 22, .18); }
html[data-theme="dark"] .csuite-sec[data-cat="ft"] { --pm-acc: #38bdf8; --pm-tint: rgba(14, 165, 233, .18); }
html[data-theme="dark"] .csuite-sec[data-cat="me"] { --pm-acc: #ff4d42; --pm-tint: rgba(255, 77, 66, .14); }

/* =====================================================================================================================
   Calculator / document form (CalcForm, CalcPhone)
   ===================================================================================================================== */
/* the scrim: cad_phase13/14/15 build it with an inline style (rgba(0,0,0,.7), z 9999, padding 20px); p10/p11 have a light !important.
   z 100000 as cad_phase10/11's .calcf-overlay (cad_draw.css): above the Pro Tools dock (99999), which covered the X and the right
   edge of the 13/14/15 sheets on a tablet; below the house dialogs and the toast's ceiling */
:root body > :is(.calcf-overlay, .pm-calc, div:has(> .calcf-card)) {
  z-index: 100000 !important;
  background: var(--pm-scrim) !important; padding: 20px !important; align-items: center !important; justify-content: center !important;
  font-family: var(--pm-font) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  overscroll-behavior: contain;
}
:root body .calcf-card {
  display: flex; flex-direction: column; box-sizing: border-box; width: min(560px, 100%); max-width: none; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px);
  overflow: hidden; margin: 0; padding: 0; background: var(--pm-sheet); color: var(--pm-ink); border: 1px solid var(--pm-line); border-radius: 18px;
  box-shadow: var(--pm-shadow); font-family: var(--pm-font); font-size: 14px; line-height: 1.45; text-align: left; -webkit-font-smoothing: antialiased;
}
:root body .calcf-card *, :root body .calcf-card *::before, :root body .calcf-card *::after { box-sizing: border-box; }
:root body .calcf-card:focus, :root body .csuite-modal:focus { outline: none; }   /* (the sheet itself holds the focus on open: no ring) */
/* the document tools (a Print button: Tolerance stack-up, DFM, QC plan, Inspection, ISO reference) carry wide tables */
:root body .calcf-card:has(.calcf-actions > [id$="-print"]) { width: min(680px, 100%); max-width: none !important; }

/* header: tinted icon tile, title + its line, a 40 px close */
:root body .calcf-card .calcf-hdr {
  position: static; flex: none; display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 12px 12px 16px;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
}
:root body .calcf-card .calcf-title {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; margin: 0; padding: 0;
  font: 600 17px/1.25 var(--pm-font); letter-spacing: -.01em; color: var(--pm-ink); text-transform: none;
}
:root body .calcf-card .calcf-title-ic {
  flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--pm-tint); color: var(--pm-acc); box-shadow: none; border: 0;
}
:root body .calcf-card .calcf-title-ic i { font-size: 20px; line-height: 1; color: inherit; }
:root body .calcf-card .pm-tt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
:root body .calcf-card .pm-tt b { font: 600 17px/1.25 var(--pm-font); color: var(--pm-ink); overflow-wrap: anywhere; }
:root body .calcf-card .pm-sub { font: 400 13px/1.3 var(--pm-font); color: var(--pm-ink3); letter-spacing: 0; }
:root body .calcf-card .calcf-x {
  flex: none; width: 40px; height: 40px; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 12px;
  display: grid; place-items: center; background: transparent; color: var(--pm-ink2); cursor: pointer; box-shadow: none;
  transition: background-color .15s ease, color .15s ease;
}
:root body .calcf-card .calcf-x i { font-size: 20px; line-height: 1; }
:root body .calcf-card .calcf-x:focus-visible { outline: 2px solid var(--pm-focus); outline-offset: 1px; }

/* body: the fields, then the result, then the footer (sticky); one scroll */
:root body .calcf-card .calcf-body {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 0; padding: 0 16px;
  overflow-y: auto; overscroll-behavior: contain; background: transparent;
  scroll-padding-bottom: 84px;   /* (a field focused by Tab stops above the sticky footer, not under it) */
}
:root body .calcf-card .calcf-form {
  order: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; margin: 0; padding: 0 0 14px;
}
:root body .calcf-card .calcf-form > :not(.calcf-field) { grid-column: 1 / -1; }
:root body .calcf-card .calcf-form > :not(.calcf-field)[style] { color: var(--pm-ink3) !important; font-size: 13px !important; line-height: 1.5; margin: 0 !important; }
:root body .calcf-card .calcf-form code {
  padding: 1px 5px; border-radius: 5px; background: var(--pm-soft); border: 1px solid var(--pm-line); font: 12px var(--pm-mono); color: var(--pm-ink2);
}

/* a field: the label above, then one box holding the input and its unit (the box is the field's ::after, so a unit of any
   length sits beside the number instead of over it) */
:root body .calcf-card .calcf-field {
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 42px;
  column-gap: 0; row-gap: 6px; align-items: center; min-width: 0; margin: 0;
}
:root body .calcf-card .calcf-field::after {
  content: ''; grid-column: 1 / -1; grid-row: 2; align-self: stretch; z-index: 0; border: 1px solid var(--pm-fline); border-radius: 10px;
  background: var(--pm-field); transition: border-color .15s ease, box-shadow .15s ease; pointer-events: none;
}
:root body .calcf-card .calcf-field:has(> .calcf-in:focus)::after { border-color: var(--pm-focus); box-shadow: 0 0 0 3px var(--pm-ring); }
:root body .calcf-card .calcf-lbl {
  grid-column: 1 / -1; grid-row: 1; align-self: end; margin: 0; padding: 0; font: 600 13px/1.3 var(--pm-font); color: var(--pm-ink2);
  text-transform: none; letter-spacing: 0; overflow-wrap: anywhere;
}
:root body .calcf-card .calcf-in {
  grid-column: 1; grid-row: 2; position: relative; z-index: 1; width: calc(100% - 1px); height: 40px; min-height: 0; margin: 0 0 0 1px; padding: 0 0 0 11px;
  border: 0; border-radius: 9px; background: transparent; color: var(--pm-ink); box-shadow: none; outline: none;
  font: 400 15px/1.2 var(--pm-font); font-variant-numeric: tabular-nums; letter-spacing: 0; -moz-appearance: textfield;
}
:root body .calcf-card .calcf-in-num { font-family: var(--pm-font); }
:root body .calcf-card .calcf-in::-webkit-inner-spin-button, :root body .calcf-card .calcf-in::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
:root body .calcf-card .calcf-in::placeholder { color: var(--pm-ink3); opacity: 1; }
:root body .calcf-card .calcf-field:has(> .calcf-unit:empty) > .calcf-in { grid-column: 1 / -1; padding-right: 11px; margin: 0 1px; width: calc(100% - 2px); }
:root body .calcf-card select.calcf-in {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 36px !important;
  background: var(--pm-chev) no-repeat right 12px center / 16px 16px; color: var(--pm-ink);
}
:root body .calcf-card select.calcf-in option { color: #101114; background: #ffffff; }
html[data-theme="dark"] body .calcf-card select.calcf-in option { color: #f2f3f5; background: #1c1d21; }
:root body .calcf-card .calcf-unit {
  grid-column: 2; grid-row: 2; position: relative; z-index: 1; padding: 0 12px 0 8px; font: 400 13px/1 var(--pm-font); color: var(--pm-ink3);
  white-space: nowrap; pointer-events: none;
}
:root body .calcf-card .calcf-unit:empty { display: none; }
/* a wide field (a choice, a text, a list typed one per line) takes the whole row */
:root body .calcf-card :is(.calcf-field-wide, .calcf-field:has(> select), .calcf-field:has(> input[type="text"])) { grid-column: 1 / -1; }
/* an odd last number field of a run takes the whole row (CalcForm's 'Heat input'; popups_material.js marks it) */
:root body .calcf-card .calcf-form > .calcf-field.pm-span { grid-column: 1 / -1; }
:root body .calcf-card .calcf-field.calcf-field-wide { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
:root body .calcf-card .calcf-field.calcf-field-wide::after { content: none; }
:root body .calcf-card .calcf-ta {
  grid-column: 1; grid-row: 2; height: auto; min-height: 96px; margin: 0; padding: 10px 12px; resize: vertical;
  border: 1px solid var(--pm-fline); border-radius: 10px; background: var(--pm-field);
  font: 400 13px/1.55 var(--pm-mono); font-variant-numeric: normal;
}
:root body .calcf-card .calcf-ta:focus { border-color: var(--pm-focus); box-shadow: 0 0 0 3px var(--pm-ring); }

/* the result: the soft surface, one row per value */
:root body .calcf-card .calcf-result { order: 2; margin: 0 0 14px; padding: 0; font-family: var(--pm-font); color: var(--pm-ink); }
:root body .calcf-card .calcf-result:empty { display: none; }
:root body .calcf-card .calcf-rtable {
  display: block; width: 100%; margin: 0; border: 0; border-radius: 14px; overflow: hidden; background: var(--pm-soft); font-size: 14px;
}
/* one row per value: the name left, the value and its unit right (CalcForm) */
:root body .calcf-card .calcf-rtable > tbody { display: block; }
:root body .calcf-card .calcf-rtable tr {
  display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px; border-top: 1px solid var(--pm-line);
}
:root body .calcf-card .calcf-rtable tr:first-child { border-top: 0; }
:root body .calcf-card .calcf-rtable td { display: block; height: auto; margin: 0; padding: 0; border: 0; background: transparent; }
:root body .calcf-card .calcf-rt-name { flex: 1 1 auto; min-width: 0; color: var(--pm-ink); font-weight: 400; overflow-wrap: anywhere; }
:root body .calcf-card .calcf-rt-val { flex: none; text-align: right; white-space: nowrap; font: 600 14px var(--pm-font); font-variant-numeric: tabular-nums; color: var(--pm-ink); }
:root body .calcf-card .calcf-rt-note { flex: 0 1 auto; max-width: 48%; font-size: 13px; line-height: 1.35; color: var(--pm-ink3); text-align: left; }
:root body .calcf-card .calcf-rt-note:empty { display: none; }
:root body .calcf-card .calcf-status {
  margin: 10px 0 0; padding: 10px 12px 10px 14px; border: 0; border-left: 4px solid var(--pm-ink3); border-radius: 12px;
  background: var(--pm-soft); font: 500 14px/1.45 var(--pm-font); color: var(--pm-ink);
}
/* the status colour the calculator gave (light hues tuned for a dark card) at AA on the sheet: OK green, marginal amber, fail red */
:root body .calcf-card .calcf-status:is([style*="#3ddc84" i], [style*="#6fe09a" i], [style*="#5abb7a" i], [style*="#2a7" i], [style*="#22c55e" i]) { border-left-color: var(--pm-ok) !important; }
:root body .calcf-card .calcf-status:is([style*="#aacc44" i]) { border-left-color: var(--pm-good2) !important; }
:root body .calcf-card .calcf-status:is([style*="#ffb030" i], [style*="#ffe066" i], [style*="#ffc107" i], [style*="#f5b731" i], [style*="#d80" i]) { border-left-color: var(--pm-warn) !important; }
:root body .calcf-card .calcf-status:is([style*="#ff7777" i], [style*="#ff4444" i], [style*="#dc3545" i], [style*="#ef4444" i], [style*="#c33" i]) { border-left-color: var(--pm-bad) !important; }
:root body .calcf-card .calcf-status:is([style*="#88ddff" i], [style*="#88ccff" i], [style*="#7eb8f7" i]) { border-left-color: var(--pm-acc) !important; }
:root body .calcf-card .calcf-err {
  margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--pm-red-tint); color: var(--pm-red-ink); font: 500 13px/1.45 var(--pm-font);
}
/* (the document tools' own result HTML keeps its inline layout; only its type and the sheet's ink. A table wider than the sheet -
   QC plan, inspection - scrolls sideways by itself on a phone instead of dragging the whole form) */
:root body .calcf-card .calcf-result > :not(.calcf-rtable):not(.calcf-status):not(.calcf-err) { font-family: var(--pm-font); }
@media (max-width: 599px) {
  :root body .calcf-card .calcf-result table:not(.calcf-rtable) { display: block; max-width: 100%; overflow-x: auto; }
}

/* footer: the red-tint secondary (Insert into drawing / Print) left of the red primary; sticky at the foot of the scroll */
:root body .calcf-card .calcf-actions {
  order: 3; position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px;
  margin: auto -16px 0; padding: 12px 16px 16px; border: 0; border-top: 1px solid var(--pm-line); background: var(--pm-sheet);
}
:root body .calcf-card :is(.calcf-calc, .calcf-insert) {
  height: 44px; min-height: 0; margin: 0; padding: 0 18px; border: 0; border-radius: 14px; align-items: center; justify-content: center; gap: 0;
  font: 600 15px/1 var(--pm-font); letter-spacing: 0; text-transform: none; white-space: nowrap; cursor: pointer; box-shadow: none;
  transition: background-color .15s ease, transform .1s ease;
}
:root body .calcf-card :is(.calcf-calc, .calcf-insert) > i { display: none; }
:root body .calcf-card .calcf-calc { order: 2; display: inline-flex; min-width: 150px; background: var(--pm-red); color: #ffffff; }
:root body .calcf-card .calcf-insert { order: 1; display: inline-flex; background: var(--pm-red-tint); color: var(--pm-red-ink); }
:root body .calcf-card :is(.calcf-calc, .calcf-insert):active { transform: scale(.98); }
:root body .calcf-card :is(.calcf-calc, .calcf-insert):focus-visible { outline: 2px solid var(--pm-focus); outline-offset: 2px; }
@media (hover: hover) {
  :root body .calcf-card .calcf-x:hover { background: var(--pm-press); color: var(--pm-ink); }
  :root body .calcf-card .calcf-calc:hover { background: var(--pm-red-hover); }
  :root body .calcf-card .calcf-insert:hover { background: var(--pm-red-tint2); }
}

/* =====================================================================================================================
   Calculator launcher (CalcSuite): sections in their colours, icon chips, rows on the soft surface
   ===================================================================================================================== */
:root body .csuite-overlay { background: var(--pm-scrim); padding: 20px; font-family: var(--pm-font); -webkit-backdrop-filter: none; backdrop-filter: none; }
:root body .csuite-modal {
  box-sizing: border-box; width: min(560px, 100%); max-width: none; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px);
  background: var(--pm-sheet); color: var(--pm-ink); border: 1px solid var(--pm-line); border-radius: 18px; box-shadow: var(--pm-shadow);
  font-family: var(--pm-font); overscroll-behavior: contain; -webkit-font-smoothing: antialiased;
}
:root body .csuite-modal *, :root body .csuite-modal *::before, :root body .csuite-modal *::after { box-sizing: border-box; }
:root body .csuite-modal .csuite-hdr {
  display: flex; align-items: center; gap: 12px; padding: 14px 12px 8px 16px; background: var(--pm-sheet); border: 0; border-radius: 18px 18px 0 0;
}
:root body .csuite-modal .csuite-title {
  flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px;
  align-items: center; margin: 0; font: 600 17px/1.25 var(--pm-font); letter-spacing: -.01em; color: var(--pm-ink);
}
:root body .csuite-modal .csuite-title-ic {
  grid-column: 1; grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 12px; background: var(--pm-red-tint); color: var(--pm-acc); box-shadow: none;
}
:root body .csuite-modal .csuite-title-ic i { font-size: 20px; }
:root body .csuite-modal .csuite-title-sub {
  grid-column: 2; grid-row: 2; justify-self: start; padding: 0; border-radius: 0; background: none; font: 400 13px/1.3 var(--pm-font); letter-spacing: 0; color: var(--pm-ink3);
}
:root body .csuite-modal .csuite-x {
  flex: none; width: 40px; height: 40px; border: 0; border-radius: 12px; background: transparent; color: var(--pm-ink2); transition: background-color .15s ease;
}
:root body .csuite-modal .csuite-x i { font-size: 20px; }
:root body .csuite-modal .csuite-body { padding: 0 16px 16px; }
:root body .csuite-modal .csuite-sec-h {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 4px 6px;
  font: 600 11.5px/1 var(--pm-font); letter-spacing: .07em; text-transform: uppercase; color: var(--pm-acc);
}
:root body .csuite-modal .csuite-sec:first-child .csuite-sec-h { padding-top: 6px; }
:root body .csuite-modal .csuite-sec-h::before { content: none; display: none; }
:root body .csuite-modal .csuite-count {
  margin-left: auto; padding: 3px 7px; border-radius: 999px; background: var(--pm-tint); color: var(--pm-acc); font: 600 11px/1 var(--pm-font); letter-spacing: 0;
}
:root body .csuite-modal .csuite-grid { display: flex; flex-direction: column; gap: 0; background: var(--pm-soft); border-radius: 14px; overflow: hidden; }
/* (min-height !important: cad_responsive.css sets "button, .btn { min-height: 40px !important }" at <= 480 px) */
:root body .csuite-modal .csuite-item {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px !important; margin: 0; padding: 8px 12px; border: 0; border-top: 1px solid var(--pm-line);
  border-radius: 0; background: transparent; color: var(--pm-ink); font-family: var(--pm-font); text-align: left; cursor: pointer; transition: background-color .15s ease;
}
:root body .csuite-modal .csuite-grid > .csuite-item:first-child { border-top: 0; }
:root body .csuite-modal .csuite-ic { flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--pm-tint); color: var(--pm-acc); transform: none; }
:root body .csuite-modal .csuite-ic i { font-size: 18px; }
:root body .csuite-modal .csuite-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
:root body .csuite-modal .csuite-n { font: 600 15px/1.3 var(--pm-font); color: var(--pm-ink); white-space: normal; overflow-wrap: anywhere; }
:root body .csuite-modal .csuite-s { font: 400 13px/1.3 var(--pm-font); color: var(--pm-ink3); white-space: normal; }
:root body .csuite-modal .csuite-item:focus-visible { outline: 2px solid var(--pm-focus); outline-offset: -2px; }
:root body .csuite-modal .csuite-foot { display: none; }
@media (hover: hover) {
  :root body .csuite-modal .csuite-x:hover { background: var(--pm-press); color: var(--pm-ink); }
  :root body .csuite-modal .csuite-item:hover { background: var(--pm-press); border-color: var(--pm-line); }
  :root body .csuite-modal .csuite-item:hover .csuite-ic { background: var(--pm-tint); transform: none; }
}

/* =====================================================================================================================
   Annotate prompt (AnnotForm): the house dialog's look - title, note, 2-column fields with units, Cancel + red Place
   ===================================================================================================================== */
:root body .tye-popup.pm-annot {
  align-items: center; justify-content: center; padding: 20px; background: var(--pm-scrim) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; font-family: var(--pm-font);
}
:root body .tye-popup.pm-annot .tye-popup-card {
  width: 100%; max-width: 440px; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); padding: 0;
  background: var(--pm-sheet) !important; color: var(--pm-ink); border: 1px solid var(--pm-line) !important; border-radius: 18px !important;
  box-shadow: var(--pm-shadow) !important; font-family: var(--pm-font); -webkit-font-smoothing: antialiased;
}
:root body .tye-popup.pm-annot .tye-popup-card *, :root body .tye-popup.pm-annot .tye-popup-card *::before, :root body .tye-popup.pm-annot .tye-popup-card *::after { box-sizing: border-box; }
:root body .tye-popup.pm-annot .tye-popup-head { display: block; padding: 24px 24px 0; border: 0; }
:root body .tye-popup.pm-annot .tye-popup-head h3 {
  display: block; margin: 0 0 6px; font: 650 19px/1.3 var(--pm-font); letter-spacing: -.012em; color: var(--pm-ink); text-transform: none;
}
/* (no note under the title - a prompt off the ISO sheet: the fields keep AnnotForm's 18 px below the title) */
:root body .tye-popup.pm-annot .tye-popup-card.pm-nomsg .tye-popup-head h3 { margin-bottom: 18px; }
:root body .tye-popup.pm-annot .tye-popup-close { display: none; }
:root body .tye-popup.pm-annot .tye-popup-body {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; padding: 0 24px 4px; overflow-y: auto; overscroll-behavior: contain;
}
:root body .tye-popup.pm-annot .tye-popup-body > :not(.tye-popup-field) { grid-column: 1 / -1; }
:root body .tye-popup.pm-annot .tye-popup-body > .pm-msg { margin: 0 0 6px; font-size: 14px !important; line-height: 1.55 !important; color: var(--pm-ink3) !important; }
:root body .tye-popup.pm-annot .tye-popup-body > [role="alert"] { margin: 0 !important; font-size: 13px !important; color: var(--pm-bad) !important; }
:root body .tye-popup.pm-annot .tye-popup-field { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; }
:root body .tye-popup.pm-annot .tye-popup-body > label.tye-popup-field:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }
:root body .tye-popup.pm-annot .tye-popup-field > span:first-child {
  font: 600 13px/1.3 var(--pm-font); letter-spacing: 0; text-transform: none; color: var(--pm-ink2);
}
:root body .tye-popup.pm-annot .tye-popup-field > input {
  width: 100%; height: 42px; margin: 0; padding: 0 12px; border: 1px solid var(--pm-fline) !important; border-radius: 10px;
  background: var(--pm-field) !important; color: var(--pm-ink) !important; box-shadow: none; outline: none;
  font: 400 15px/1.2 var(--pm-font); font-variant-numeric: tabular-nums; -moz-appearance: textfield; transition: border-color .15s ease, box-shadow .15s ease;
}
:root body .tye-popup.pm-annot .tye-popup-field > input::-webkit-inner-spin-button,
:root body .tye-popup.pm-annot .tye-popup-field > input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
:root body .tye-popup.pm-annot .tye-popup-field > input:focus { border-color: var(--pm-focus) !important; box-shadow: 0 0 0 3px var(--pm-ring); }
:root body .tye-popup.pm-annot .tye-popup-field > input[aria-invalid="true"] { border-color: var(--pm-bad) !important; }
:root body .tye-popup.pm-annot .tye-popup-field.pm-has-unit > input { padding-right: 44px; }
:root body .tye-popup.pm-annot .tye-popup-field > .pm-unit {
  position: absolute; right: 12px; bottom: 0; height: 42px; display: flex; align-items: center; font: 400 13px/1 var(--pm-font);
  letter-spacing: 0; text-transform: none; color: var(--pm-ink3); pointer-events: none;
}
:root body .tye-popup.pm-annot .tye-popup-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 20px 24px 24px; border: 0; }
:root body .tye-popup.pm-annot .tye-popup-hint { display: none; }
:root body .tye-popup.pm-annot .tye-popup-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 40px; min-width: 88px; margin: 0; padding: 0 18px; border-radius: 10px;
  font: 600 14px/1 var(--pm-font); letter-spacing: 0; cursor: pointer; filter: none; transition: background-color .15s ease, opacity .15s ease, transform .1s ease;
}
:root body .tye-popup.pm-annot .tye-popup-btn:not(.primary) { border: 1px solid var(--pm-fline); background: var(--pm-sheet); color: var(--pm-ink); }
:root body .tye-popup.pm-annot .tye-popup-btn.primary { border: 0; background: #e5322a; color: #ffffff; }
:root body .tye-popup.pm-annot .tye-popup-btn:active { transform: scale(.98); }
:root body .tye-popup.pm-annot .tye-popup-btn:focus-visible { outline: 2px solid var(--pm-focus); outline-offset: 2px; }
@media (hover: hover) {
  :root body .tye-popup.pm-annot .tye-popup-btn:not(.primary):hover { background: var(--pm-press); color: var(--pm-ink); }
  :root body .tye-popup.pm-annot .tye-popup-btn.primary:hover { opacity: .9; filter: none; }
}

/* =====================================================================================================================
   File > Save: fix_edit's dialog (EDIT_MENU_R3_2026Q4, .cad-save-modal) in the house prompt's look - a title, its line, a
   'Name' label above a 42 px field, Cancel and the red Save. popups_material.js adds the title, the line and the label (class
   pm-save); the dialog's own pieces are laid out on one grid (its header and footer rows step aside: display contents) and its
   icon, entity badge, Esc key cap and Type / Session pills are hidden (the line says the same). cad_draw.css styles it with
   (1,1,1) / (0,2,1) rules, some !important in light mode: these start with :root body .cad-save-modal.pm-save.
   ===================================================================================================================== */
:root body .cad-save-modal.pm-save {
  z-index: 100000; align-items: center; justify-content: center; padding: 20px; font-family: var(--pm-font);
}
:root body .cad-save-modal.pm-save .cad-save-overlay { background: var(--pm-scrim); }
:root body .cad-save-modal.pm-save .cad-save-panel {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "t t t" "m m m" "l l l" "i i i" ". c o";
  column-gap: 8px; align-items: center; box-sizing: border-box; width: 100%; max-width: 400px; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px);
  margin: 0; padding: 24px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  background: var(--pm-sheet) !important; color: var(--pm-ink); border: 1px solid var(--pm-line) !important; border-radius: 20px;
  box-shadow: var(--pm-shadow) !important; font-family: var(--pm-font); font-size: 14px; line-height: 1.5; text-align: left; -webkit-font-smoothing: antialiased;
}
:root body .cad-save-modal.pm-save .cad-save-panel *, :root body .cad-save-modal.pm-save .cad-save-panel *::before, :root body .cad-save-modal.pm-save .cad-save-panel *::after { box-sizing: border-box; }
:root body .cad-save-modal.pm-save :is(.cad-save-hdr, .cad-save-footer, .cad-save-footer-l, .cad-save-footer-r) { display: contents; }
:root body .cad-save-modal.pm-save :is(.cad-save-hdr > svg, .cad-save-cnt-badge, .cad-save-esc, .cad-save-meta-row, .cad-save-hint) { display: none !important; }
:root body .cad-save-modal.pm-save .pm-save-t {
  grid-area: t; margin: 0 0 6px; padding: 0; font: 650 19px/1.3 var(--pm-font); letter-spacing: -.012em; color: var(--pm-ink); text-transform: none; overflow-wrap: anywhere;
}
:root body .cad-save-modal.pm-save .pm-save-m { grid-area: m; margin: 0; padding: 0; font: 400 14px/1.55 var(--pm-font); color: var(--pm-ink3); overflow-wrap: anywhere; }
:root body .cad-save-modal.pm-save .pm-save-l { grid-area: l; display: block; margin: 18px 0 6px; padding: 0; font: 600 13px/1.3 var(--pm-font); color: var(--pm-ink2); text-transform: none; letter-spacing: 0; }
:root body .cad-save-modal.pm-save #cad-save-name {
  grid-area: i; display: block; flex: none; width: 100%; height: 42px; min-width: 0; min-height: 0; margin: 0; padding: 0 12px;
  border: 1px solid var(--pm-fline); border-radius: 10px; background: var(--pm-field); color: var(--pm-ink) !important; box-shadow: none; outline: none;
  font: 400 15px/normal var(--pm-font); transition: border-color .15s ease, box-shadow .15s ease;
}
:root body .cad-save-modal.pm-save #cad-save-name::placeholder { color: var(--pm-ink3) !important; opacity: 1; }
:root body .cad-save-modal.pm-save #cad-save-name:focus { border-color: var(--pm-focus); box-shadow: 0 0 0 3px var(--pm-ring); }
:root body .cad-save-modal.pm-save :is(.cad-save-btn-cancel, .cad-save-btn-ok) {
  display: inline-flex; align-items: center; justify-content: center; flex: none; height: 40px; min-width: 88px; min-height: 0; margin: 20px 0 0; padding: 0 18px;
  border-radius: 10px; font: 600 14px/1 var(--pm-font); letter-spacing: 0; text-transform: none; white-space: nowrap; cursor: pointer; box-shadow: none;
  transition: background-color .15s ease, opacity .15s ease, transform .1s ease;
}
:root body .cad-save-modal.pm-save .cad-save-btn-cancel { grid-area: c; border: 1px solid var(--pm-fline) !important; background: var(--pm-sheet) !important; color: var(--pm-ink) !important; }
:root body .cad-save-modal.pm-save .cad-save-btn-ok { grid-area: o; border: 0 !important; background: #e5322a !important; color: #ffffff !important; opacity: 1 !important; }
:root body .cad-save-modal.pm-save :is(.cad-save-btn-cancel, .cad-save-btn-ok):active { transform: scale(.98); }
:root body .cad-save-modal.pm-save :is(.cad-save-btn-cancel, .cad-save-btn-ok):focus-visible { outline: 2px solid var(--pm-focus); outline-offset: 2px; }
@media (hover: hover) {
  :root body .cad-save-modal.pm-save .cad-save-btn-cancel:hover { background: var(--pm-press) !important; color: var(--pm-ink) !important; }
  :root body .cad-save-modal.pm-save .cad-save-btn-ok:hover { background: #d42d19 !important; }
}

/* =====================================================================================================================
   App toast: a small status dot (the legacy green / red pills), the binary-DWG help
   ===================================================================================================================== */
#toast .pm-dot { display: inline-block; width: 8px; height: 8px; margin: 0 8px 1px 0; border-radius: 50%; vertical-align: middle; background: #16a34a; }
#toast .pm-dot-err { background: #dc2626; }
html[data-theme="dark"] #toast .pm-dot { background: #4ade80; }
html[data-theme="dark"] #toast .pm-dot-err { background: #f87171; }
.tye-dlg[data-dlg-src="cad-dwg"] .tye-dlg-msg ol { margin: 8px 0; padding-left: 20px; }
.tye-dlg[data-dlg-src="cad-dwg"] .tye-dlg-msg li { margin: 2px 0; }

/* =====================================================================================================================
   Touch (phones, tablets): bottom sheets with a grab bar, 48 px fields, 52 px pill buttons
   ===================================================================================================================== */
html.tye-ts body > :is(.calcf-overlay, .pm-calc, div:has(> .calcf-card)) { align-items: flex-end !important; padding: 0 !important; }
html.tye-ts body .calcf-card, html.tye-ts body .calcf-card:has(.calcf-actions > [id$="-print"]) {
  width: min(640px, 100%); max-height: calc(100dvh - 40px); border-bottom: 0; border-radius: 22px 22px 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .18); animation: tsSheetUp .26s cubic-bezier(.32, .72, 0, 1) both;
}
html.tye-ts body .calcf-card::before {
  content: ''; flex: none; display: block; width: 38px; height: 5px; margin: 8px auto 2px; border-radius: 3px; background: var(--pm-line);
}
html.tye-ts body .calcf-card .calcf-hdr { padding: 6px 12px 10px 16px; }
html.tye-ts body .calcf-card .calcf-x { width: 44px; height: 44px; border-radius: 22px; background: var(--pm-soft); color: var(--pm-ink); }
html.tye-ts body .calcf-card .calcf-x i { font-size: 18px; }
html.tye-ts body .calcf-card .calcf-body { padding: 4px 16px 0; }
html.tye-ts body .calcf-card .calcf-form { gap: 14px 12px; }
html.tye-ts body .calcf-card .calcf-field { grid-template-rows: auto 48px; row-gap: 8px; }
html.tye-ts body .calcf-card .calcf-field::after { border-radius: 12px; }
html.tye-ts body .calcf-card .calcf-lbl { font-size: 14px; }
html.tye-ts body .calcf-card .calcf-in { height: 46px; padding-left: 13px; font-size: 16px; border-radius: 11px; }
html.tye-ts body .calcf-card .calcf-unit { padding-right: 14px; font-size: 14px; }
html.tye-ts body .calcf-card .calcf-ta { font-size: 14px; }
html.tye-ts body .calcf-card .calcf-rtable tr { min-height: 44px; padding: 8px 14px; font-size: 15px; }
html.tye-ts body .calcf-card .calcf-rt-val { font-size: 15px; }
html.tye-ts body .calcf-card .calcf-body { scroll-padding-bottom: calc(150px + max(env(safe-area-inset-bottom, 0px), var(--ts-kbh, 0px))); }
/* (the footer stays above the on-screen keyboard: --ts-kbh, the house sheets' pattern - the sheet keeps its height, its part
   under the keyboard is the footer's padding) */
html.tye-ts body .calcf-card .calcf-actions {
  flex-direction: column; flex-wrap: nowrap; align-items: stretch; padding: 12px 16px calc(18px + max(env(safe-area-inset-bottom, 0px), var(--ts-kbh, 0px)));
}
html.tye-ts body .calcf-card :is(.calcf-calc, .calcf-insert) { width: 100%; height: 52px; min-width: 0; border-radius: 26px; font-size: 16px; }
html.tye-ts body .calcf-card .calcf-calc { order: 1; }
html.tye-ts body .calcf-card .calcf-insert { order: 2; }
@media (max-width: 599px) {   /* a phone: one column */
  html.tye-ts body .calcf-card .calcf-form { grid-template-columns: minmax(0, 1fr); }
}
/* a short screen (a phone on its side) or the keyboard up: the two pills side by side, so the fields keep the room */
@media (max-height: 500px) {
  html.tye-ts body .calcf-card .calcf-actions { flex-direction: row; }
  html.tye-ts body .calcf-card :is(.calcf-calc, .calcf-insert) { flex: 1 1 0; width: auto; }
  html.tye-ts body .calcf-card .calcf-calc { order: 2; }
  html.tye-ts body .calcf-card .calcf-insert { order: 1; }
  html.tye-ts body .calcf-card .calcf-body { scroll-padding-bottom: calc(90px + max(env(safe-area-inset-bottom, 0px), var(--ts-kbh, 0px))); }
}
html.tye-ts.ts-kb body .calcf-card .calcf-actions { flex-direction: row; }
html.tye-ts.ts-kb body .calcf-card :is(.calcf-calc, .calcf-insert) { flex: 1 1 0; width: auto; }
html.tye-ts.ts-kb body .calcf-card .calcf-calc { order: 2; }
html.tye-ts.ts-kb body .calcf-card .calcf-insert { order: 1; }
html.tye-ts.ts-kb body .calcf-card .calcf-body { scroll-padding-bottom: calc(90px + max(env(safe-area-inset-bottom, 0px), var(--ts-kbh, 0px))); }

html.tye-ts body .csuite-overlay { align-items: flex-end; padding: 0; }
html.tye-ts body .csuite-modal {
  width: min(640px, 100%); max-height: calc(100dvh - 40px); border-bottom: 0; border-radius: 22px 22px 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .18); animation: tsSheetUp .26s cubic-bezier(.32, .72, 0, 1) both;
}
html.tye-ts body .csuite-modal .csuite-hdr { padding: 20px 12px 8px 16px; border-radius: 22px 22px 0 0; }
html.tye-ts body .csuite-modal .csuite-hdr::before {   /* the sheet's grab bar (the header is sticky: it stays on top) */
  content: ''; position: absolute; top: 8px; left: 50%; width: 38px; height: 5px; margin-left: -19px; border-radius: 3px; background: var(--pm-line);
}
html.tye-ts body .csuite-modal .csuite-x { width: 44px; height: 44px; border-radius: 22px; background: var(--pm-soft); color: var(--pm-ink); }
html.tye-ts body .csuite-modal .csuite-body { padding-bottom: calc(16px + max(env(safe-area-inset-bottom, 0px), var(--ts-kbh, 0px))); }

html.tye-ts body .tye-popup.pm-annot { align-items: flex-end; padding: 0; }
html.tye-ts body .tye-popup.pm-annot .tye-popup-card {
  max-width: 560px; max-height: min(86dvh, 720px); border-bottom: 0 !important; border-radius: 22px 22px 0 0 !important;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .18) !important; animation: tsSheetUp .26s cubic-bezier(.32, .72, 0, 1) both !important;
}
html.tye-ts body .tye-popup.pm-annot .tye-popup-head { padding: 28px 20px 0; }
html.tye-ts body .tye-popup.pm-annot .tye-popup-head h3 { font-size: 22px; font-weight: 700; line-height: 1.25; margin-bottom: 8px; }
html.tye-ts body .tye-popup.pm-annot .tye-popup-card.pm-nomsg .tye-popup-head h3 { margin-bottom: 18px; }
html.tye-ts body .tye-popup.pm-annot .tye-popup-body { padding: 0 20px 4px; gap: 14px 12px; }
html.tye-ts body .tye-popup.pm-annot .tye-popup-body > .pm-msg { font-size: 15px !important; }
html.tye-ts body .tye-popup.pm-annot .tye-popup-field { gap: 8px; }
html.tye-ts body .tye-popup.pm-annot .tye-popup-field > span:first-child { font-size: 14px; }
html.tye-ts body .tye-popup.pm-annot .tye-popup-field > input { height: 48px; border-radius: 12px; font-size: 16px !important; }
html.tye-ts body .tye-popup.pm-annot .tye-popup-field > .pm-unit { height: 48px; font-size: 14px; }
html.tye-ts body .tye-popup.pm-annot .tye-popup-foot { flex: none; gap: 10px; padding: 20px 20px calc(14px + max(env(safe-area-inset-bottom, 0px), var(--ts-kbh, 0px))); }
html.tye-ts body .tye-popup.pm-annot .tye-popup-btn { flex: 1 1 0; height: 52px; min-width: 0; border-radius: 26px; font-size: 16px; }

html.tye-ts body .cad-save-modal.pm-save { align-items: flex-end; padding: 0; }
html.tye-ts body .cad-save-modal.pm-save .cad-save-panel {
  max-width: 560px; max-height: min(86dvh, 720px); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "t t" "m m" "l l" "i i" "c o";
  column-gap: 10px; padding: 28px 20px calc(14px + max(env(safe-area-inset-bottom, 0px), var(--ts-kbh, 0px)));
  border-bottom: 0 !important; border-radius: 22px 22px 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, .18) !important;
  animation: tsSheetUp .26s cubic-bezier(.32, .72, 0, 1) both;
}
html.tye-ts body .cad-save-modal.pm-save .pm-save-t { margin-bottom: 8px; font-size: 22px; font-weight: 700; line-height: 1.25; }
html.tye-ts body .cad-save-modal.pm-save .pm-save-m { font-size: 15px; }
html.tye-ts body .cad-save-modal.pm-save .pm-save-l { margin: 14px 0 8px; font-size: 14px; }
html.tye-ts body .cad-save-modal.pm-save #cad-save-name { height: 48px; border-radius: 12px; font-size: 16px; }
html.tye-ts body .cad-save-modal.pm-save :is(.cad-save-btn-cancel, .cad-save-btn-ok) { width: 100%; height: 52px; min-width: 0; min-height: 52px !important; border-radius: 26px; font-size: 16px; }

@media (prefers-reduced-motion: reduce) {
  :root body .calcf-card, :root body .csuite-modal, :root body .tye-popup.pm-annot .tye-popup-card,
  :root body > :is(.calcf-overlay, .pm-calc, div:has(> .calcf-card)), :root body .csuite-overlay,
  :root body .cad-save-modal.pm-save, :root body .cad-save-modal.pm-save .cad-save-panel { animation: none !important; }
  :root body .calcf-card :is(.calcf-calc, .calcf-insert, .calcf-x), :root body .tye-popup.pm-annot .tye-popup-btn,
  :root body .cad-save-modal.pm-save :is(.cad-save-btn-cancel, .cad-save-btn-ok, #cad-save-name) { transition: none; }
}