/* ============================== DRAWING_CM_2026Q4 ==================================
   The Drawing tab's commands as the owner approved them (mockups CmTools, CmAnnotation, CmViewLayoutDark, CmPhone, 2026-10-05):
   header menus File | Edit | Tools, the CommandManager (View Layout / Annotation / Sketch / Sheet / Evaluate) under the header on
   the desktop, the same five tabs in a tools sheet on touch. Built by phase_drawing_cm.js, which sets html.tye-dcm - every rule
   that hides an old control is scoped to that class, so without the script (or with its kill switch) the old toolbar is back.
   Mobile material: white sheet / ink #101114 / Inter / radius 12-22, dark as the touch shell's; the accent and each tool's own
   colours (the calculator families, the manufacturing green) stay.
   Hidden, never removed: the old header groups (other code queries them; the new rows click theirs) and #tye-ribbon-2d (its own
   hide / restore loop tests #vp-cad, which is not touched here).
   Review round 1 (DRAWING_CM_R1): the header menus' rows scroll (their side cards are position:fixed, the card has no transform);
   the flyout rows show a focus ring; a narrow pane drops quick buttons into More and fades the edge of a row that scrolls; no
   transient state lives on <html> (the narrow header is #vp-cad > .hdr[data-dcm-tight], the open touch sheet is read with :has);
   in CAD fullscreen the floating chat card starts under the CommandManager; the touch cascade keeps the Tools section colours.
   ================================================================================================================ */

html {
  --dcm-sheet: #ffffff; --dcm-ink: #101114; --dcm-ink2: #3b3f46; --dcm-ink3: #636a76;
  --dcm-line: rgba(17, 20, 28, .10); --dcm-press: rgba(17, 20, 28, .07); --dcm-hover: rgba(17, 20, 28, .045);
  --dcm-accent: #e5322a; --dcm-tint: rgba(229, 50, 42, .09); --dcm-field: #f4f5f7;
  --dcm-shadow: 0 10px 30px rgba(17, 20, 28, .12), 0 2px 8px rgba(17, 20, 28, .06);
  --dcm-scrim: rgba(10, 12, 16, .32);
  --dcm-calc: #ea580c; --dcm-mfg: #16a34a;
  --dcm-font: Inter, 'Noto Sans Thai', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
html[data-theme="dark"] {
  --dcm-sheet: #1c1d21; --dcm-ink: #f2f3f5; --dcm-ink2: #c9cdd4; --dcm-ink3: #9aa1ad;
  --dcm-line: rgba(255, 255, 255, .10); --dcm-press: rgba(255, 255, 255, .10); --dcm-hover: rgba(255, 255, 255, .06);
  --dcm-accent: #ff4d42; --dcm-tint: rgba(255, 77, 66, .14); --dcm-field: #25272c;
  --dcm-shadow: 0 12px 34px rgba(0, 0, 0, .55), 0 2px 10px rgba(0, 0, 0, .35);
  --dcm-scrim: rgba(0, 0, 0, .55);
  --dcm-calc: #fb923c; --dcm-mfg: #4ade80;
}

/* ---------- 0. what the new layout replaces on the Drawing tab: hidden, never removed ---------- */
html.tye-dcm body #vp-cad > .hdr > .tb > .tb-group:not(.dcm-group),
html.tye-dcm body > .tb-more-panel > .tb-group:not(.dcm-group) { display: none !important; }
html.tye-dcm body #vp-cad > .hdr > .tb > #bCont ~ .sep { display: none !important; }   /* (the dividers between the hidden groups) */
html.tye-dcm body #tye-ribbon-2d { display: none !important; }

/* ---------- 1. header menus File | Edit | Tools ---------- */
/* the triggers: plain names (the mockup's .hm), the old bar's icon and caret off */
html:not(.tye-ts) body #cad-panel #vp-cad > .hdr .tb-trigger.dcm-trig {
  height: 34px !important; padding: 0 12px !important; gap: 0 !important; border: 0 !important; border-radius: 10px !important;
  background: transparent !important; box-shadow: none !important; color: var(--dcm-ink2) !important;
  font: 500 14px/1 var(--dcm-font) !important; letter-spacing: 0 !important;
}
html:not(.tye-ts) body #cad-panel #vp-cad > .hdr .tb-trigger.dcm-trig .ti { display: none !important; }
html:not(.tye-ts) body #cad-panel #vp-cad > .hdr .tb-group .tb-trigger.dcm-trig::after { content: none !important; display: none !important; }
html:not(.tye-ts) body #cad-panel #vp-cad > .hdr .tb-trigger.dcm-trig:hover,
html:not(.tye-ts) body #cad-panel #vp-cad > .hdr .tb-group.open > .tb-trigger.dcm-trig { background: var(--dcm-press) !important; color: var(--dcm-ink) !important; }
html:not(.tye-ts) body #cad-panel #vp-cad > .hdr .tb-trigger.dcm-trig:focus-visible { outline: 2px solid var(--dcm-accent) !important; outline-offset: -2px !important; }
/* a narrow pane (#vp-cad > .hdr[data-dcm-tight], set by phase_drawing_cm.js below 720px of header): the SNAP / OSNAP / ORTHO / CONT
   track shows its icons only - the names stay in their tooltips - so File | Edit | Tools are never parked in the More menu */
html:not(.tye-ts) body #cad-panel #vp-cad > .hdr[data-dcm-tight] .btn.tog { font-size: 0 !important; letter-spacing: 0 !important; gap: 0 !important; padding: 0 10px !important; }
html:not(.tye-ts) body #cad-panel #vp-cad > .hdr[data-dcm-tight] #bSnap.btn.tog { padding-left: 12px !important; }
html:not(.tye-ts) body #cad-panel #vp-cad > .hdr[data-dcm-tight] #bCont.btn.tog { padding-right: 12px !important; }

/* the menu card (voice_ui portals it to <body> and positions it; the ids outrank every .tb-menu rule). Its rows scroll in .dcm-scroll
   (phase_drawing_cm.js sets max-height to the room under the trigger); the side cards are position:fixed, so the card has no
   transform - voice_ui's tbMenuOpen animation keeps one (forwards) and would make the card their containing block - and no
   animation: it is there at once (a fade tied to frames left it invisible for a while on a starved machine) */
:is(#dcm-m-file, #dcm-m-edit, #dcm-m-tools).tb-menu {
  width: 300px; min-width: 0 !important; box-sizing: border-box; padding: 6px !important; gap: 0 !important; flex-direction: column !important;
  background: var(--dcm-sheet) !important; border: 1px solid var(--dcm-line) !important; border-radius: 18px !important;
  box-shadow: var(--dcm-shadow) !important; overflow: visible !important; max-height: calc(100vh - 16px) !important;
  transform: none !important; animation: none !important;
  color: var(--dcm-ink); font-family: var(--dcm-font);
}
:is(#dcm-m-file, #dcm-m-edit, #dcm-m-tools) .dcm-title { flex: none; }
:is(#dcm-m-file, #dcm-m-edit, #dcm-m-tools) .dcm-scroll {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin;
}
:is(#dcm-m-file, #dcm-m-edit, #dcm-m-tools) .dcm-title,
:is(#dcm-m-file, #dcm-m-edit, #dcm-m-tools) .dcm-hd {
  display: block !important; margin: 0 !important; padding: 10px 10px 6px !important; border: 0 !important; background: none !important;
  font: 600 12px/1 var(--dcm-font) !important; letter-spacing: .04em !important; text-transform: uppercase !important; color: var(--dcm-ink3) !important;
}
:is(#dcm-m-file, #dcm-m-edit, #dcm-m-tools) .dcm-hd { padding-top: 4px !important; }
:is(#dcm-m-file, #dcm-m-edit, #dcm-m-tools) .dcm-hd-calc { color: var(--dcm-calc) !important; }
:is(#dcm-m-file, #dcm-m-edit, #dcm-m-tools) .dcm-hd-mfg { color: var(--dcm-mfg) !important; }
:is(#dcm-m-file, #dcm-m-edit, #dcm-m-tools) .dcm-mi {
  display: flex !important; align-items: center !important; gap: 12px !important; width: 100% !important; min-height: 38px !important;
  box-sizing: border-box !important; margin: 0 !important; padding: 0 10px !important; border: 0 !important; border-radius: 12px !important;
  background: transparent !important; box-shadow: none !important; color: var(--dcm-ink) !important; cursor: pointer;
  font: 500 14px/1.2 var(--dcm-font) !important; letter-spacing: 0 !important; text-align: left !important; justify-content: flex-start !important;
}
:is(#dcm-m-file, #dcm-m-edit, #dcm-m-tools) .dcm-mi:hover,
:is(#dcm-m-file, #dcm-m-edit, #dcm-m-tools) .dcm-sub.open > .dcm-subtrig { background: var(--dcm-press) !important; color: var(--dcm-ink) !important; }
:is(#dcm-m-file, #dcm-m-edit, #dcm-m-tools) .dcm-mi:focus-visible { outline: 2px solid var(--dcm-accent) !important; outline-offset: -2px !important; }
:is(#dcm-m-file, #dcm-m-edit, #dcm-m-tools) .dcm-mi .dcm-l { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(#dcm-m-file, #dcm-m-edit, #dcm-m-tools) .dcm-mi kbd {
  margin-left: auto !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important;
  font: 500 12px/1 var(--dcm-font) !important; color: var(--dcm-ink3) !important; white-space: nowrap;
}
:is(#dcm-m-file, #dcm-m-edit, #dcm-m-tools) .dcm-mi::before,
:is(#dcm-m-file, #dcm-m-edit, #dcm-m-tools) .dcm-mi::after { content: none !important; display: none !important; }
:is(#dcm-m-file, #dcm-m-edit, #dcm-m-tools) .dcm-sep { height: 1px !important; margin: 6px 10px !important; background: var(--dcm-line) !important; width: auto !important; }
:is(#dcm-m-file, #dcm-m-edit, #dcm-m-tools) .dcm-chev { margin-left: auto; display: inline-flex; color: var(--dcm-ink3); }
:is(#dcm-m-file, #dcm-m-edit, #dcm-m-tools) .dcm-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
/* submenus (Export, Pro documents, the calculator families, 2D CAM): a card beside the row, on hover or a click */
:is(#dcm-m-file, #dcm-m-edit, #dcm-m-tools) .dcm-sub { position: relative; }
:is(#dcm-m-file, #dcm-m-edit, #dcm-m-tools) .dcm-fly {
  display: none; position: fixed; z-index: 2; left: 0; top: 0; width: 264px; max-height: calc(100vh - 16px); overflow-y: auto; box-sizing: border-box;
  flex-direction: column; padding: 6px; background: var(--dcm-sheet); border: 1px solid var(--dcm-line); border-radius: 16px;
  box-shadow: var(--dcm-shadow); overscroll-behavior: contain;
}
:is(#dcm-m-file, #dcm-m-edit, #dcm-m-tools) .dcm-sub.open > .dcm-fly { display: flex; }
:is(#dcm-m-file, #dcm-m-edit, #dcm-m-tools) .dcm-flyhd { display: none !important; }   /* (the touch rail's Drawing menu reads it as the section title) */
html.tye-ts :is(#dcm-m-file, #dcm-m-edit, #dcm-m-tools) .dcm-subtrig { display: none !important; }   /* (touch: the cascade lists the submenu's rows under that title) */

/* ---------- 2. the CommandManager (desktop) ---------- */
#dcm-bar { display: none; }
html.tye-dcm:not(.tye-ts) body #cad-panel #vp-cad > #dcm-bar {
  display: block; flex: none; position: relative; z-index: 3; box-sizing: border-box; min-width: 0;
  background: var(--dcm-sheet); border-bottom: 1px solid var(--dcm-line); color: var(--dcm-ink); font-family: var(--dcm-font);
}
html body #cad-panel.tye-auto #vp-cad > #dcm-bar { display: none !important; }   /* (View Mode: no editing chrome, as .hdr) */
#dcm-bar .dcm-tabs {
  display: flex; align-items: stretch; height: 40px; padding: 0 12px; border-bottom: 1px solid var(--dcm-line); box-sizing: border-box;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;   /* (40px tall: a scrollbar would cut the underline - the edge fades show it scrolls) */
}
#dcm-bar .dcm-tabs::-webkit-scrollbar { display: none; }
#dcm-bar .dcm-tab .dcm-ts { display: none; }
/* a narrow pane: the phone's short tab names, tighter tabs and quick buttons (phase_drawing_cm.js fitTabs) */
#dcm-bar.is-tight .dcm-tab { padding: 0 10px; }
#dcm-bar.is-tight .dcm-tab .dcm-tl { display: none; }
#dcm-bar.is-tight .dcm-tab .dcm-ts { display: inline; }
#dcm-bar.is-tight .dcm-q { width: 30px; height: 30px; }
/* past that: Fit leaves the strip (the header has Fit View), then the quick buttons from the end go into More (Select stays), then
   the tabs pack tighter; past that they scroll under the quick strip, which stays at the right edge (sticky) behind an edge fade */
#dcm-bar .dcm-qa > .dcm-q.is-over, #dcm-bar .dcm-qa > .dcm-qmore:not(.is-shown) { display: none; }
#dcm-bar.is-tight2 .dcm-tabs { padding: 0 6px; }
#dcm-bar.is-tight2 .dcm-tab { padding: 0 7px; font-size: 13px; }
#dcm-bar .dcm-qa { position: sticky; right: 0; z-index: 1; background: var(--dcm-sheet); }
#dcm-bar .dcm-tabs.dcm-ovr .dcm-qa::before {
  content: ''; position: absolute; top: 0; bottom: 0; right: 100%; width: 28px; pointer-events: none;
  background: linear-gradient(to right, transparent, var(--dcm-sheet));
}
#dcm-bar .dcm-tabs.dcm-ovl::before {
  content: ''; position: sticky; left: 0; z-index: 1; flex: none; width: 28px; margin-right: -28px; pointer-events: none;
  background: linear-gradient(to left, transparent, var(--dcm-sheet));
}
/* the panel, when it still scrolls sideways: an edge fade on the side with more */
#dcm-bar .dcm-panel.dcm-ovr {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
}
#dcm-bar .dcm-panel.dcm-ovl {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent);
}
#dcm-bar .dcm-panel.dcm-ovl.dcm-ovr {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
}
#dcm-bar .dcm-tab {
  flex: none; display: flex; align-items: center; height: 40px; margin: 0; padding: 0 16px; box-sizing: border-box;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; box-shadow: none; cursor: pointer;
  font: 500 14px/1 var(--dcm-font); color: var(--dcm-ink3); white-space: nowrap;
}
#dcm-bar .dcm-tab:hover { color: var(--dcm-ink); }
#dcm-bar .dcm-tab.is-on { color: var(--dcm-ink); font-weight: 600; border-bottom-color: var(--dcm-accent); }
#dcm-bar .dcm-tab:focus-visible { outline: 2px solid var(--dcm-accent); outline-offset: -4px; border-radius: 8px; }
#dcm-bar .dcm-fill { flex: 1 1 auto; min-width: 8px; }
#dcm-bar .dcm-qa { flex: none; display: flex; align-items: center; gap: 2px; }
#dcm-bar .dcm-q {
  position: relative; width: 32px; height: 32px; margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 10px; background: transparent; box-shadow: none; color: var(--dcm-ink2); cursor: pointer;
}
#dcm-bar .dcm-q:hover { background: var(--dcm-press); color: var(--dcm-ink); }
#dcm-bar .dcm-q.is-on { background: var(--dcm-tint); color: var(--dcm-accent); }
#dcm-bar .dcm-q:focus-visible { outline: 2px solid var(--dcm-accent); outline-offset: -2px; }
#dcm-bar .dcm-q > span, #dcm-sheet .dcm-q > span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
#dcm-bar .dcm-qa > [data-dcm="q.fit"] { margin-right: 6px; }   /* (Select, Lasso, Pan, Fit | Undo, Redo) */
#dcm-bar .dcm-panel {
  display: flex; align-items: stretch; padding: 8px 8px 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; min-height: 102px; box-sizing: border-box;
}
/* every group folded and still too wide (the 420px pane minimum): tighter groups */
#dcm-bar .dcm-panel.is-tight .dcm-grp { padding: 0 4px; }
#dcm-bar .dcm-panel.is-tight .dcm-b { min-width: 60px; }
#dcm-bar .dcm-grp { flex: none; display: flex; flex-direction: column; gap: 4px; padding: 0 10px; border-left: 1px solid var(--dcm-line); }
#dcm-bar .dcm-grp:first-child { border-left: 0; }
#dcm-bar .dcm-btns { display: flex; gap: 2px; }
#dcm-bar .dcm-b {
  position: relative; flex: none; width: min-content; min-width: 68px; max-width: 96px; min-height: 70px; margin: 0; padding: 8px 2px 6px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 5px;
  border: 0; border-radius: 10px; background: transparent; box-shadow: none; cursor: pointer;
  color: var(--dcm-ink); font: 500 12px/1.15 var(--dcm-font); text-align: center; letter-spacing: 0;
}
#dcm-bar .dcm-b > svg { flex: none; color: var(--dcm-ink2); }
#dcm-bar .dcm-b > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; }   /* (a word never breaks: the button takes its longest word, up to 96px) */
#dcm-bar .dcm-b:hover { background: var(--dcm-hover); }
#dcm-bar .dcm-b:active { background: var(--dcm-press); }
#dcm-bar .dcm-b.is-on, #dcm-bar .dcm-b[aria-expanded="true"] { background: var(--dcm-tint); }
#dcm-bar .dcm-b.is-on > svg, #dcm-bar .dcm-b[aria-expanded="true"] > svg { color: var(--dcm-accent); }
#dcm-bar .dcm-b:focus-visible { outline: 2px solid var(--dcm-accent); outline-offset: -2px; }
#dcm-bar .dcm-caret, #dcm-sheet .dcm-caret {
  position: absolute; top: 24px; left: calc(50% + 15px); width: 5px; height: 5px; box-sizing: border-box;   /* (beside the icon, whatever the button's width) */
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: .55; pointer-events: none;
}
#dcm-bar .dcm-cap { font: 600 11px/1 var(--dcm-font); letter-spacing: .06em; text-transform: uppercase; color: var(--dcm-ink3); text-align: center; padding-top: 2px; white-space: nowrap; }
/* a group too wide for the pane folds into one dropdown button */
#dcm-bar .dcm-grp:not(.is-folded) > .dcm-gb { display: none; }
#dcm-bar .dcm-grp.is-folded > .dcm-btns { display: none; }
#dcm-bar .dcm-grp.is-folded > .dcm-cap { visibility: hidden; }
#dcm-bar .dcm-empty, #dcm-sheet .dcm-empty { padding: 18px 12px; font: 400 13px/1.4 var(--dcm-font); color: var(--dcm-ink3); }

/* the flyout card of a dropdown button (Auto Tolerances, Projection, Mirror, Sheet Properties, Drafting Standard, a folded group) */
#dcm-pop {
  position: fixed; z-index: 2147483646; min-width: 232px; max-width: 320px; max-height: calc(100vh - 16px); overflow-y: auto; box-sizing: border-box;
  padding: 6px; display: flex; flex-direction: column; background: var(--dcm-sheet); color: var(--dcm-ink);
  border: 1px solid var(--dcm-line); border-radius: 18px; box-shadow: var(--dcm-shadow); font-family: var(--dcm-font);
  animation: dcmPop .14s cubic-bezier(.16, 1, .3, 1);
}
#dcm-pop .dcm-ph, #dcm-sheet .dcm-gh { padding: 10px 10px 6px; font: 600 12px/1 var(--dcm-font); letter-spacing: .04em; text-transform: uppercase; color: var(--dcm-ink3); }
#dcm-pop .dcm-pnote, #dcm-sheet .dcm-pnote { padding: 10px; font: 400 13px/1.4 var(--dcm-font); color: var(--dcm-ink3); }
#dcm-pop .dcm-pi {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 38px; margin: 0; padding: 4px 10px; box-sizing: border-box;
  border: 0; border-radius: 12px; background: transparent; box-shadow: none; color: var(--dcm-ink); cursor: pointer; text-align: left;
  font: 500 14px/1.2 var(--dcm-font);
}
#dcm-pop .dcm-pi:hover { background: var(--dcm-press); }
#dcm-pop .dcm-pi:focus-visible { outline: 2px solid var(--dcm-accent); outline-offset: -2px; }
#dcm-pop .dcm-pi.is-act { background: var(--dcm-tint); }
#dcm-pop .dcm-pi.is-act > svg { color: var(--dcm-accent); }
#dcm-pop .dcm-pi > svg { flex: none; color: var(--dcm-ink2); }
/* DRAWING_CM_R3_PRESSED: a setting's row in a folded group's card (Hidden Lines: hidden lines shown) looks pressed, as its bar button does */
#dcm-pop .dcm-pi.is-on:has(> svg) { background: var(--dcm-tint); }
#dcm-pop .dcm-pi.is-on > svg { color: var(--dcm-accent); }
#dcm-pop .dcm-ck, #dcm-sheet .dcm-ck { flex: none; width: 18px; display: inline-flex; justify-content: center; color: var(--dcm-accent); }
#dcm-pop .dcm-pl, #dcm-sheet .dcm-pl { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
#dcm-pop .dcm-pl b, #dcm-sheet .dcm-pl b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dcm-pop .dcm-pl em, #dcm-sheet .dcm-pl em { font-style: normal; font-size: 12px; font-weight: 400; color: var(--dcm-ink3); }
#dcm-pop .dcm-chev { margin-left: auto; display: inline-flex; color: var(--dcm-ink3); }
@keyframes dcmPop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- 3. the tools sheet on touch (html.tye-ts, the Drawing view) ---------- */
#dcm-sheet, #dcm-sheet-bg { display: none; }
html.tye-ts body #dcm-sheet-bg.open { display: block; position: fixed; inset: 0; z-index: 9020; background: var(--dcm-scrim); }
html.tye-ts body #dcm-sheet.open {
  display: flex; flex-direction: column; position: fixed; z-index: 9030; box-sizing: border-box;
  left: max(0px, calc(50% - 300px)); right: max(0px, calc(50% - 300px)); bottom: 0;
  max-height: min(74dvh, 640px); padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 12px);
  background: var(--dcm-sheet); color: var(--dcm-ink); border: 1px solid var(--dcm-line); border-bottom: 0; border-radius: 22px 22px 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .18); font-family: var(--dcm-font); outline: none;
  animation: dcmUp .26s cubic-bezier(.32, .72, 0, 1);
}
@keyframes dcmUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { html.tye-ts body #dcm-sheet.open, #dcm-pop { animation: none; } }
/* CAD cards above that layer step aside while the sheet is open (as touch_shell.css does for its own sheet) */
html.tye-ts body:has(> #dcm-sheet.open) :is(.sk-panel, #rpd-btn, #tye-pro-dock) { visibility: hidden !important; pointer-events: none !important; }
#dcm-sheet .dcm-grab { flex: none; width: 38px; height: 5px; border-radius: 3px; background: var(--dcm-line); margin: 8px auto 6px; }
#dcm-sheet .dcm-qrow { flex: none; display: flex; gap: 6px; padding: 0 14px 8px; }
html.tye-ts body #dcm-sheet .dcm-q {
  position: relative; flex: none; width: 44px; height: 44px; min-height: 44px !important; margin: 0; padding: 0; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 12px;
  background: var(--dcm-field); box-shadow: none; color: var(--dcm-ink2); cursor: pointer;
}
html.tye-ts body #dcm-sheet .dcm-q:nth-child(3) { margin-right: auto; }   /* (Select, Lasso, Pan ... Undo, Redo) */
html.tye-ts body #dcm-sheet .dcm-q.is-on { background: var(--dcm-tint); color: var(--dcm-accent); }
#dcm-sheet .dcm-seg {
  flex: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; margin: 0 14px; padding: 3px;
  border-radius: 12px; background: var(--dcm-field);
}
html.tye-ts body #dcm-sheet .dcm-seg button {
  height: 34px; min-height: 34px !important; min-width: 0; margin: 0; padding: 0 2px; box-sizing: border-box; border: 0; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; background: transparent; box-shadow: none; cursor: pointer;
  font: 500 12.5px/1 var(--dcm-font); color: var(--dcm-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.tye-ts body #dcm-sheet .dcm-seg button.is-on { background: var(--dcm-sheet); color: var(--dcm-ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
html.tye-ts[data-theme="dark"] body #dcm-sheet .dcm-seg button.is-on { background: rgba(255, 255, 255, .14); box-shadow: none; }
#dcm-sheet .dcm-body, #dcm-sheet .dcm-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 14px 4px; }
#dcm-sheet .dcm-gh { padding: 12px 4px 6px; }
#dcm-sheet .dcm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
html.tye-ts body #dcm-sheet .dcm-t {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px;
  min-height: 72px !important; min-width: 0; margin: 0; padding: 10px 2px 8px; box-sizing: border-box; border: 0; border-radius: 14px;
  background: var(--dcm-field); box-shadow: none; color: var(--dcm-ink); cursor: pointer;
  font: 500 12px/1.15 var(--dcm-font); text-align: center; letter-spacing: 0; -webkit-tap-highlight-color: transparent;
}
html.tye-ts body #dcm-sheet .dcm-t > svg { flex: none; color: var(--dcm-ink2); }
html.tye-ts body #dcm-sheet .dcm-t > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; overflow-wrap: anywhere; }
html.tye-ts body #dcm-sheet .dcm-t:active { background: var(--dcm-press); }
html.tye-ts body #dcm-sheet .dcm-t.is-on { background: var(--dcm-tint); }
html.tye-ts body #dcm-sheet .dcm-t.is-on > svg { color: var(--dcm-accent); }
html.tye-ts body #dcm-sheet .dcm-t .dcm-caret { top: 25px; }
html.tye-ts body #dcm-sheet :is(.dcm-t, .dcm-q, .dcm-seg button, .dcm-row, .dcm-back):focus-visible { outline: 2px solid var(--dcm-accent); outline-offset: -2px; }
/* a dropdown command's rows, in place of the tiles */
#dcm-sheet .dcm-shd { flex: none; display: flex; align-items: center; gap: 4px; padding: 0 14px 4px 6px; }
#dcm-sheet .dcm-shd b { font: 600 16px/1.2 var(--dcm-font); color: var(--dcm-ink); }
html.tye-ts body #dcm-sheet .dcm-back {
  width: 44px; height: 44px; min-height: 44px !important; margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 22px; background: transparent; box-shadow: none; color: var(--dcm-ink2); cursor: pointer;
}
html.tye-ts body #dcm-sheet .dcm-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px !important; margin: 0; padding: 4px 12px; box-sizing: border-box;
  border: 0; border-radius: 12px; background: transparent; box-shadow: none; color: var(--dcm-ink); cursor: pointer; text-align: left;
  font: 500 15px/1.25 var(--dcm-font);
}
html.tye-ts body #dcm-sheet .dcm-row:active { background: var(--dcm-press); }
html.tye-ts body #dcm-sheet .dcm-row > svg { flex: none; color: var(--dcm-ink2); }

/* ---------- 4. CAD fullscreen: the floating chat card ---------- */
/* cad_fullscreen.js FS_CHAT_PANEL opens the chat as a card at left 120px / top 70px on every entry: over the Drawing it would cover
   Tools, four of the five tabs and the first group. With the Drawing in front and no position of the user's own (a drag writes its
   top inline), it starts under the CommandManager instead */
html.tye-dcm:not(.tye-ts) body.cad-fullscreen.fs-chat-open:has(#vp-cad.active) #left-pane:not([style*="top"]) {
  top: 264px; height: min(78vh, 820px, calc(100vh - 280px));
}

/* ---------- 5. touch: the rail's Drawing menu (touch_shell.js #ts-casc) keeps the Tools section colours ---------- */
html.tye-ts body #ts-casc .ts-cp-h[data-dcm-hd="calc"] { color: var(--dcm-calc) !important; }
html.tye-ts body #ts-casc .ts-cp-h[data-dcm-hd="mfg"] { color: var(--dcm-mfg) !important; }
/* ---------- 6. LEFT_RAIL_B_2026Q4 (R4L option B): the greyed state, the touch sheet's tabs ---------- */
/* a command that cannot run now (Configurations until a Part Library part is active): greyed with its reason in the tooltip; a press
   says the reason and runs nothing (phase_drawing_cm.js offWhy / refuse) */
#dcm-bar .dcm-b.is-off { cursor: not-allowed; color: var(--dcm-ink3); }
#dcm-bar .dcm-b.is-off > svg { opacity: .45; filter: grayscale(1); }
#dcm-bar .dcm-b.is-off:hover, #dcm-bar .dcm-b.is-off:active { background: transparent; }
#dcm-pop .dcm-pi.is-off { color: var(--dcm-ink3); cursor: not-allowed; }
#dcm-pop .dcm-pi.is-off:hover { background: transparent; }
#dcm-pop .dcm-pi.is-off > svg { opacity: .45; filter: grayscale(1); }
html.tye-ts body #dcm-sheet .dcm-t.is-off { color: var(--dcm-ink3); }
html.tye-ts body #dcm-sheet .dcm-t.is-off > svg { opacity: .45; filter: grayscale(1); }
html.tye-ts body #dcm-sheet .dcm-t.is-off:active { background: var(--dcm-field); }
/* the reason of a greyed press, on the Drawing's status line beside TOOL (5 s; phase_drawing_cm.js refuse) */
#vp-cad > .sbar .dcm-sbmsg { display: none; }
#vp-cad > .sbar .dcm-sbmsg.is-on { display: inline-block; min-width: 0; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0 6px; font: 500 11.5px/1 var(--dcm-font); color: var(--dcm-accent); }
/* (light: the darker red ink - #e5322a on white is 4.36:1 at 11.5 px, #c42b23 is 5.65:1; fix round 1) */
html:not([data-theme="dark"]) #vp-cad > .sbar .dcm-sbmsg.is-on { color: #c42b23; }
/* the Drawing tools sheet's tabs: 44 px, as the model sheet's tabs (model_cm.css #mcm-sheet .mcm-seg button) - they were 34 px */
html.tye-ts body #dcm-sheet .dcm-seg button { height: 44px; min-height: 44px !important; }
/* a greyed tile pressed in the tools sheet: the sheet stays open, so the reason's toast rises over the sheet (z 9030) and its scrim
   (9020) - it was drawn under them and the tap seemed to do nothing (the toast never takes a tap: pointer-events none; fix round 2) */
html.tye-ts:not(.ts-page):not(.ts-mpage) body:has(> #dcm-sheet.open) #toast { z-index: 9040 !important; }
/* END DRAWING_CM_2026Q4 */