/* PRO_TOOLS_THEME_2026Q4 : the Pro Tools panel (#tye-pro-dock) as a mobile-theme SHEET - the touch shell's own vocabulary
   (touch_shell.css #ts-sheet): grab bar, a "who" header (48px tile, 17px title, 13px line, hairline), 44px round buttons, a bordered
   two-way segmented control whose chosen half is solid ink, a 44px pill search, plain list rows (22px glyph, 15px label, 13px line,
   grey chevron) grouped under small coloured section labels with the count as a grey value, and a quiet footer.
   Colours that stay: the red Pro Tools tile, every category's colour (its label, dot and the row glyphs), the red Auto-Scan module keys,
   the green availability dot. The version stamp is not shown.
   cad_sketch3d.js skins the panel with two runtime sheets appended after every link (#tye-pd-styles, #tye-pd-polish-style, !important,
   at most one id): #tye-pro-dock#tye-pro-dock wins on specificity. Desktop and touch alike (touch_shell.css keeps position/visibility). */
#tye-pro-dock#tye-pro-dock {
  --pd-sheet: #ffffff; --pd-line: rgba(17, 20, 28, .10); --pd-line2: rgba(17, 20, 28, .24);
  --pd-ink: #101114; --pd-ink2: #3b3f46; --pd-ink3: #636a76; --pd-press: rgba(17, 20, 28, .07);
  --pd-shadow: 0 10px 30px rgba(17, 20, 28, .12), 0 2px 8px rgba(17, 20, 28, .06);
  --pd-font: Inter, 'Noto Sans Thai', system-ui, -apple-system, 'Segoe UI', sans-serif; --pd-dot: #e5322a;
}
html[data-theme="dark"] #tye-pro-dock#tye-pro-dock {
  --pd-sheet: #1c1d21; --pd-line: rgba(255, 255, 255, .10); --pd-line2: rgba(255, 255, 255, .26);
  --pd-ink: #f2f3f5; --pd-ink2: #c9cdd4; --pd-ink3: #9aa1ad; --pd-press: rgba(255, 255, 255, .10);
  --pd-shadow: 0 12px 34px rgba(0, 0, 0, .55), 0 2px 10px rgba(0, 0, 0, .35); --pd-dot: #ff4d42;
}
/* (width stays the dock's own 320px: its drag code clamps left <= innerWidth - 300, so a wider card could push Close off-screen) */
#tye-pro-dock#tye-pro-dock {
  background: var(--pd-sheet) !important; border: 1px solid var(--pd-line) !important; border-radius: 22px !important;
  box-shadow: var(--pd-shadow) !important; color: var(--pd-ink) !important; font-family: var(--pd-font) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}

/* ---- header: grab bar + the "who" row ---- */
#tye-pro-dock#tye-pro-dock .tye-pd-head {
  position: relative !important; display: flex !important; align-items: center !important; gap: 12px !important; box-sizing: border-box !important;
  min-height: 0 !important; padding: 21px 100px 14px 18px !important; background: transparent !important; border-bottom: 1px solid var(--pd-line) !important; box-shadow: none !important;
}
#tye-pro-dock#tye-pro-dock .tye-pd-head::before {   /* the sheet's grab bar - the whole header drags, as before */
  content: '' !important; position: absolute !important; top: 8px !important; left: 50% !important; width: 38px !important; height: 5px !important;
  margin-left: -19px !important; border-radius: 3px !important; background: var(--pd-line2) !important; opacity: .7;
}
#tye-pro-dock#tye-pro-dock .tye-pd-head::after { content: none !important; }
#tye-pro-dock#tye-pro-dock .tye-pd-grip { display: none !important; }
#tye-pro-dock#tye-pro-dock .tye-pd-title-icon {
  width: 44px !important; height: 44px !important; border-radius: 14px !important; flex: none !important; display: grid !important; place-items: center !important;
  background: linear-gradient(135deg, #f5564e, #e5322a) !important; border: 0 !important; box-shadow: none !important; color: #fff !important;
}
#tye-pro-dock#tye-pro-dock .tye-pd-title-icon svg { width: 22px !important; height: 22px !important; }
#tye-pro-dock#tye-pro-dock .tye-pd-titletx { min-width: 0 !important; }
#tye-pro-dock#tye-pro-dock .tye-pd-titletx b { display: block !important; font: 600 17px/1.25 var(--pd-font) !important; letter-spacing: -.01em !important; color: var(--pd-ink) !important; }
#tye-pro-dock#tye-pro-dock .tye-pd-titletx span { display: block !important; margin-top: 2px !important; font: 400 13px/1.3 var(--pd-font) !important; color: var(--pd-ink3) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
#tye-pro-dock#tye-pro-dock .tye-pd-ctrls { position: absolute !important; top: 14px !important; right: 8px !important; display: flex !important; gap: 0 !important; }
#tye-pro-dock#tye-pro-dock .tye-pd-iconbtn {
  width: 44px !important; height: 44px !important; border-radius: 22px !important; border: 0 !important; padding: 0 !important; background: transparent !important;
  color: var(--pd-ink2) !important; transform: none !important; box-shadow: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
  transition: background-color .16s ease, color .16s ease !important;
}
#tye-pro-dock#tye-pro-dock .tye-pd-iconbtn svg { width: 20px !important; height: 20px !important; }

/* ---- the two views: the sheet's segmented pair, the chosen one solid ink ---- */
#tye-pro-dock#tye-pro-dock .tye-pd-tabs { position: relative !important; display: flex !important; gap: 6px !important; margin: 0 !important; padding: 12px 14px 8px !important; background: transparent !important; border: 0 !important; }
#tye-pro-dock#tye-pro-dock .tye-pd-tabs::before, #tye-pro-dock#tye-pro-dock .tye-pd-tab::after { content: none !important; display: none !important; }
#tye-pro-dock#tye-pro-dock .tye-pd-tab {
  flex: 1 1 0 !important; height: 38px !important; border-radius: 10px !important; border: 1px solid var(--pd-line) !important; box-shadow: none !important;
  background: transparent !important; color: var(--pd-ink2) !important; font: 500 13px/1 var(--pd-font) !important; letter-spacing: 0 !important; text-transform: none !important;
}
#tye-pro-dock#tye-pro-dock .tye-pd-tab.active { background: var(--pd-ink) !important; border-color: var(--pd-ink) !important; color: var(--pd-sheet) !important; }

/* ---- search: a 44px pill ---- */
#tye-pro-dock#tye-pro-dock .tye-pd-search { padding: 2px 14px 8px !important; }
#tye-pro-dock#tye-pro-dock .tye-pd-search-wrap { position: relative !important; background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
#tye-pro-dock#tye-pro-dock .tye-pd-search input {
  height: 44px !important; border-radius: 22px !important; padding: 0 16px 0 44px !important; box-sizing: border-box !important; width: 100% !important;
  background: var(--pd-press) !important; border: 1px solid transparent !important; box-shadow: none !important;
  font: 400 15px/1 var(--pd-font) !important; color: var(--pd-ink) !important; transition: background-color .16s ease, border-color .16s ease !important;
}
#tye-pro-dock#tye-pro-dock .tye-pd-search input::placeholder { color: var(--pd-ink3) !important; opacity: 1 !important; }
#tye-pro-dock#tye-pro-dock .tye-pd-search input:focus { outline: none !important; background: var(--pd-sheet) !important; border-color: var(--pd-ink3) !important; box-shadow: none !important; }
#tye-pro-dock#tye-pro-dock .tye-pd-search-icon { left: 16px !important; color: var(--pd-ink3) !important; }
#tye-pro-dock#tye-pro-dock .tye-pd-search-icon svg { width: 18px !important; height: 18px !important; }

/* ---- the list ---- */
#tye-pro-dock#tye-pro-dock .tye-pd-body { padding: 0 8px 10px !important; }
#tye-pro-dock#tye-pro-dock .tye-pd-body::-webkit-scrollbar { width: 6px !important; }
#tye-pro-dock#tye-pro-dock .tye-pd-body::-webkit-scrollbar-thumb { background: var(--pd-line2) !important; border-radius: 3px !important; }
#tye-pro-dock#tye-pro-dock .tye-pd-recent { padding: 8px 6px 2px !important; }
#tye-pro-dock#tye-pro-dock .tye-pd-recent-label { font: 600 13px/1.3 var(--pd-font) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--pd-ink3) !important; margin: 0 6px 8px !important; }
#tye-pro-dock#tye-pro-dock .tye-pd-recent-chips { gap: 6px !important; padding: 0 6px !important; }
#tye-pro-dock#tye-pro-dock .tye-pd-chip {
  height: 34px !important; padding: 0 14px 0 12px !important; border-radius: 17px !important; gap: 7px !important; border: 1px solid var(--pd-line) !important;
  background: transparent !important; box-shadow: none !important; color: var(--pd-ink) !important; font: 500 13px/1 var(--pd-font) !important; transform: none !important;
  max-width: 100% !important; min-width: 0 !important; overflow: hidden !important; white-space: nowrap !important;   /* (a long name stays inside a phone-wide dock) */
}
/* section heads: a small coloured label, the count as a grey value, a hairline above (not on the first) */
#tye-pro-dock#tye-pro-dock .tye-pd-cat { margin: 0 !important; padding-top: 6px !important; }
#tye-pro-dock#tye-pro-dock .tye-pd-cat + .tye-pd-cat { border-top: 1px solid var(--pd-line) !important; margin-top: 6px !important; }
#tye-pro-dock#tye-pro-dock .tye-pd-cat-head { padding: 12px 12px 6px !important; gap: 8px !important; letter-spacing: 0 !important; text-transform: none !important; }
#tye-pro-dock#tye-pro-dock .tye-pd-cat-dot { width: 8px !important; height: 8px !important; box-shadow: none !important; }
#tye-pro-dock#tye-pro-dock .tye-pd-cat-name { font: 600 13px/1.3 var(--pd-font) !important; letter-spacing: 0 !important; text-transform: none !important; }
#tye-pro-dock#tye-pro-dock .tye-pd-cat-count { margin-left: auto !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; font: 400 13px/1 var(--pd-font) !important; letter-spacing: 0 !important; color: var(--pd-ink3) !important; }
/* rows: the sheet's list item - glyph in the category colour, label over its line, grey chevron */
#tye-pro-dock#tye-pro-dock .tye-pd-item {
  min-height: 56px !important; padding: 8px 12px !important; gap: 14px !important; border-radius: 12px !important; box-sizing: border-box !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important; transition: background-color .16s ease !important;
}
#tye-pro-dock#tye-pro-dock .tye-pd-item-icon {
  width: 24px !important; height: 24px !important; flex: none !important; border: 0 !important; border-radius: 0 !important; background: transparent !important;
  box-shadow: none !important; transform: none !important; display: grid !important; place-items: center !important;
}
#tye-pro-dock#tye-pro-dock .tye-pd-item-icon i { font-size: 22px !important; }
#tye-pro-dock#tye-pro-dock .tye-pd-item-name { font: 500 15px/1.3 var(--pd-font) !important; letter-spacing: -.005em !important; color: var(--pd-ink) !important; }
#tye-pro-dock#tye-pro-dock .tye-pd-item-desc { font: 400 13px/1.35 var(--pd-font) !important; color: var(--pd-ink3) !important; margin-top: 2px !important; }
#tye-pro-dock#tye-pro-dock .tye-pd-item-chev { color: var(--pd-ink3) !important; transform: none !important; opacity: 1 !important; }
#tye-pro-dock#tye-pro-dock .tye-pd-item-chev svg { width: 16px !important; height: 16px !important; }
#tye-pro-dock#tye-pro-dock .tye-pd-item.disabled { opacity: .42 !important; }
/* footer: the availability line only (no version stamp) */
#tye-pro-dock#tye-pro-dock .tye-pd-foot {
  min-height: 44px !important; padding: 0 18px !important; box-sizing: border-box !important; background: transparent !important;
  border-top: 1px solid var(--pd-line) !important; box-shadow: none !important; font: 400 13px/1 var(--pd-font) !important; color: var(--pd-ink3) !important;
}
#tye-pro-dock#tye-pro-dock .tye-pd-foot::before { content: none !important; }
#tye-pro-dock#tye-pro-dock .tye-pd-foot span:last-child:not(:first-child) { display: none !important; }
#tye-pro-dock#tye-pro-dock .tye-pd-foot span:first-child::before { width: 8px !important; height: 8px !important; }
/* Auto-Scan: module keys as section labels (red, as before), methods as list rows */
#tye-pro-dock#tye-pro-dock .tye-pd-scan-key { font: 600 13px/1.3 var(--pd-font) !important; padding: 14px 12px 6px !important; letter-spacing: 0 !important; }
#tye-pro-dock#tye-pro-dock .tye-pd-scan-method {
  display: flex !important; align-items: center !important; width: 100% !important; min-height: 44px !important; border-radius: 12px !important; padding: 0 12px !important; margin: 0 !important; box-sizing: border-box !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--pd-ink) !important; text-align: left !important;
  font: 500 13.5px/1 ui-monospace, 'SF Mono', Menlo, Consolas, monospace !important; transform: none !important;
}
#tye-pro-dock#tye-pro-dock .tye-pd-body > div:first-child:not([class]) { padding: 10px 12px 4px !important; font: 400 13px/1.5 var(--pd-font) !important; color: var(--pd-ink3) !important; }   /* the Auto-Scan intro line (inline-styled) */
#tye-pro-dock#tye-pro-dock .tye-pd-empty { font: 400 14px/1.5 var(--pd-font) !important; color: var(--pd-ink3) !important; }

/* ---- hover / press / focus ---- */
@media (hover: hover) {
  #tye-pro-dock#tye-pro-dock .tye-pd-iconbtn:hover { background: var(--pd-press) !important; color: var(--pd-ink) !important; }
  #tye-pro-dock#tye-pro-dock .tye-pd-tab:not(.active):hover { background: var(--pd-press) !important; color: var(--pd-ink) !important; }
  #tye-pro-dock#tye-pro-dock .tye-pd-item:not(.disabled):hover, #tye-pro-dock#tye-pro-dock .tye-pd-scan-method:hover, #tye-pro-dock#tye-pro-dock .tye-pd-chip:hover { background: var(--pd-press) !important; transform: none !important; }
  #tye-pro-dock#tye-pro-dock .tye-pd-item:not(.disabled):hover :is(.tye-pd-item-icon, .tye-pd-item-chev) { transform: none !important; }
  #tye-pro-dock#tye-pro-dock .tye-pd-item:not(.disabled):hover .tye-pd-item-chev { color: var(--pd-ink2) !important; }
}
#tye-pro-dock#tye-pro-dock :is(.tye-pd-item:not(.disabled), .tye-pd-scan-method, .tye-pd-chip, .tye-pd-iconbtn):active { background: var(--pd-press) !important; }
#tye-pro-dock#tye-pro-dock .tye-pd-item.disabled:focus-visible { opacity: 1 !important; }
#tye-pro-dock#tye-pro-dock :is(.tye-pd-iconbtn, .tye-pd-tab, .tye-pd-item, .tye-pd-chip, .tye-pd-scan-method):focus-visible { outline: 2px solid var(--pd-dot) !important; outline-offset: -2px !important; }
@media (prefers-reduced-motion: reduce) {
  #tye-pro-dock#tye-pro-dock :is(.tye-pd-iconbtn, .tye-pd-item, .tye-pd-search input, .tye-pd-tab) { transition: none !important; }
  #tye-pro-dock#tye-pro-dock .tye-pd-foot span:first-child::before { animation: none !important; }
}
/* PRO_TOOLS_R2_2026Q4 - review round 1 (2026-10-04) */
#tye-pro-dock#tye-pro-dock .tye-pd-chip i { font-size: 16px !important; color: inherit !important; }   /* the glyph keeps its category colour (the polish sheet greyed it, red on hover) */
#tye-pro-dock#tye-pro-dock .tye-pd-empty b { color: var(--pd-ink) !important; font-weight: 600 !important; }
#tye-pro-dock#tye-pro-dock .tye-pd-empty span { font-size: 13px !important; color: var(--pd-ink3) !important; }
/* a short screen (a phone held sideways, a low window): the fixed parts fold back to about the old height so the list keeps room */
@media (max-height: 500px) {
  #tye-pro-dock#tye-pro-dock .tye-pd-head { padding: 8px 96px 8px 14px !important; }
  #tye-pro-dock#tye-pro-dock .tye-pd-head::before, #tye-pro-dock#tye-pro-dock .tye-pd-titletx span { display: none !important; }
  #tye-pro-dock#tye-pro-dock .tye-pd-title-icon { width: 32px !important; height: 32px !important; border-radius: 10px !important; }
  #tye-pro-dock#tye-pro-dock .tye-pd-title-icon svg { width: 18px !important; height: 18px !important; }
  #tye-pro-dock#tye-pro-dock .tye-pd-ctrls { top: 2px !important; }
  #tye-pro-dock#tye-pro-dock .tye-pd-tabs { padding: 6px 14px 4px !important; }
  #tye-pro-dock#tye-pro-dock .tye-pd-tab { height: 32px !important; }
  #tye-pro-dock#tye-pro-dock .tye-pd-search { padding: 0 14px 6px !important; }
  #tye-pro-dock#tye-pro-dock .tye-pd-search input { height: 36px !important; border-radius: 18px !important; }
  #tye-pro-dock#tye-pro-dock .tye-pd-foot { min-height: 30px !important; }
  #tye-pro-dock#tye-pro-dock .tye-pd-body { padding-bottom: 4px !important; }
}