/* Approved tools density. Scoped to tools and its existing editor.
   Original card/form DOM, renderer, handlers and field values remain intact. */
html #tab-tools#tab-tools,
html #tool-form-modal#tool-form-modal {
  font-family:var(--ui-font); font-size:var(--ui-text-body); line-height:var(--ui-leading); color:var(--ui-text-1);
}
html #tab-tools#tab-tools *,
html #tool-form-modal#tool-form-modal * { box-sizing:border-box; }
html #tab-tools#tab-tools > .max-w-6xl { min-width:0; }
html #tab-tools#tab-tools .td-header { gap:var(--ui-gap-sm); margin-bottom:var(--ui-gap) !important; padding:10px !important; background:var(--ui-surface) !important; background-image:none !important; border:1px solid var(--ui-line); border-radius:var(--ui-radius-card) !important; box-shadow:var(--ui-elev-0) !important; }
html #tab-tools#tab-tools .td-header h2 { font-size:var(--ui-text-title2) !important; color:var(--ui-text-1) !important; }
html #tab-tools#tab-tools .td-header h2 i { color:var(--ui-accent-text) !important; font-size:var(--ui-text-body); }
html #tab-tools#tab-tools .td-header p { font-size:var(--ui-text-footnote) !important; color:var(--ui-text-2) !important; margin-top:2px !important; }
html #tab-tools#tab-tools button,
html #tool-form-modal#tool-form-modal button {
  height:var(--ui-control-sm) !important; min-height:var(--ui-control-sm) !important; padding:0 8px !important;
  border:1px solid var(--ui-line-control) !important; border-radius:var(--ui-radius-row) !important;
  background:var(--ui-surface) !important; color:var(--ui-text-1) !important;
  font-family:var(--ui-font); font-size:var(--ui-text-body) !important; line-height:20px !important;
  font-weight:var(--ui-weight-semibold); box-shadow:var(--ui-elev-0) !important; cursor:pointer; white-space:nowrap;
}
html #tab-tools#tab-tools button:hover,
html #tool-form-modal#tool-form-modal button:hover { background:var(--ui-fill-subtle) !important; }
html #tab-tools#tab-tools .td-create,
html #tool-form-modal#tool-form-modal button[data-edit-id] {
  background:var(--ui-accent) !important; border-color:var(--ui-accent) !important; color:var(--ui-on-accent) !important;
}
html #tab-tools#tab-tools .td-create:hover,
html #tool-form-modal#tool-form-modal button[data-edit-id]:hover { background:var(--ui-accent-hover) !important; }
/* When the dialog is open, its save action is the sole filled-blue primary. */
html #tab-tools#tab-tools:has(~ #tool-form-modal#tool-form-modal) .td-create,
html:has(#tool-form-modal#tool-form-modal) #tab-tools#tab-tools .td-create {
  background:var(--ui-surface) !important; color:var(--ui-accent-text) !important; border-color:var(--ui-line-control) !important;
}
html #tab-tools#tab-tools .td-toolbar { gap:var(--ui-gap-sm) !important; margin-bottom:var(--ui-gap) !important; align-items:flex-start; }
html #tab-tools#tab-tools .td-search-wrap { min-width:180px; }
html #tab-tools#tab-tools .td-search-wrap > i { left:8px !important; font-size:var(--ui-text-footnote); color:var(--ui-text-2) !important; }
html #tab-tools#tab-tools #tools-search,
html #tool-form-modal#tool-form-modal input:not([type='hidden']) {
  height:var(--ui-control-sm) !important; min-height:var(--ui-control-sm) !important; padding:0 8px !important;
  border:1px solid var(--ui-line-control) !important; border-radius:var(--ui-radius-row) !important;
  background:var(--ui-surface) !important; color:var(--ui-text-1) !important; font-family:var(--ui-font);
  font-size:var(--ui-text-body) !important; line-height:20px !important; box-shadow:var(--ui-elev-0) !important; min-width:0;
}
html #tab-tools#tab-tools #tools-search { padding-left:28px !important; }
html #tab-tools#tab-tools #tools-search::placeholder,
html #tool-form-modal#tool-form-modal input::placeholder { color:var(--ui-text-3); }
html #tab-tools#tab-tools :is(button,a,input):focus-visible,
html #tool-form-modal#tool-form-modal :is(button,input):focus-visible {
  outline:2px solid var(--ui-accent-system) !important; outline-offset:2px; box-shadow:var(--ui-focus-ring) !important;
}
html #tab-tools#tab-tools #tools-category-bar { gap:4px !important; min-width:0; }
html #tab-tools#tab-tools #tools-category-bar button { font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-semibold); }
html #tab-tools#tab-tools #tools-category-bar button.bg-indigo-100 {
  color:var(--ui-accent-text) !important; background:var(--ui-accent-tint) !important; border-color:var(--ui-accent-system) !important;
}
html #tab-tools#tab-tools #tools-grid { gap:var(--ui-gap-sm) !important; }
html #tab-tools#tab-tools #tools-grid > .td-card {
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-content:start; align-items:center; min-width:0;
  border:1px solid var(--ui-line) !important; border-radius:var(--ui-radius-card) !important;
  background:var(--ui-surface) !important; box-shadow:var(--ui-elev-0) !important; overflow:visible !important;
}
html #tab-tools#tab-tools #tools-grid > .td-card:hover { border-color:var(--ui-line-control) !important; box-shadow:var(--ui-elev-0) !important; }
html #tab-tools#tab-tools .td-card > a { grid-column:1 / -1; padding:8px 10px 6px !important; min-width:0; border-radius:var(--ui-radius-card); }
html #tab-tools#tab-tools .td-card > a > div { gap:var(--ui-gap-sm) !important; }
html #tab-tools#tab-tools .td-card-icon {
  width:var(--ui-control-sm) !important; height:var(--ui-control-sm) !important; border-radius:var(--ui-radius-row) !important;
  background:var(--ui-fill-subtle) !important; background-image:none !important; box-shadow:var(--ui-elev-0) !important;
}
html #tab-tools#tab-tools .td-card-icon i { color:var(--ui-accent-text) !important; font-size:var(--ui-text-body) !important; }
html #tab-tools#tab-tools .td-card h3 { font-size:var(--ui-text-body) !important; color:var(--ui-text-1) !important; line-height:var(--ui-leading); }
html #tab-tools#tab-tools .td-card h3 + i { color:var(--ui-text-2) !important; flex-shrink:0; }
html #tab-tools#tab-tools .td-card h3 + i::before { content:'\f0c1'; }
html #tab-tools#tab-tools .td-card p { font-size:var(--ui-text-footnote) !important; color:var(--ui-text-2) !important; line-height:calc(var(--ui-text-footnote) + 4px); overflow-wrap:anywhere; }
html #tab-tools#tab-tools .td-keywords { margin-top:4px !important; gap:4px !important; }
html #tab-tools#tab-tools .td-keywords span { font-size:var(--ui-text-footnote) !important; line-height:var(--ui-leading); padding-top:1px !important; padding-bottom:1px !important; background:var(--ui-fill-subtle) !important; color:var(--ui-text-2) !important; overflow-wrap:anywhere; }
html #tab-tools#tab-tools .td-card-category {
  position:static !important; min-width:0; padding:0 10px 8px 42px; align-self:center; overflow-wrap:anywhere;
}
html #tab-tools#tab-tools .td-card-category span { font-size:var(--ui-text-footnote) !important; color:var(--ui-text-2) !important; background:transparent !important; padding:0 !important; }
html #tab-tools#tab-tools .td-card-actions {
  position:static !important; display:flex !important; visibility:visible !important; opacity:1 !important;
  gap:4px !important; padding:0 8px 8px 0; align-self:end;
}
html #tab-tools#tab-tools .td-card-actions button { width:var(--ui-control-sm) !important; min-width:var(--ui-control-sm); padding:0 !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important; }
html #tab-tools#tab-tools .td-card-actions button:first-child:hover { color:var(--ui-accent-text) !important; }
html #tab-tools#tab-tools .td-card-actions button:last-child:hover { color:var(--ui-danger) !important; }
/* The existing toss-tools header has one id plus four classes/pseudo-classes.
   Its important declarations otherwise beat the density hook class. */
html #tab-tools#tab-tools .td-header { padding:10px !important; margin-bottom:var(--ui-gap) !important; background:var(--ui-surface) !important; background-image:none !important; box-shadow:var(--ui-elev-0) !important; border:1px solid var(--ui-line) !important; border-radius:var(--ui-radius-card) !important; }
html #tab-tools#tab-tools .td-header h2 { font-size:var(--ui-text-title3) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-1) !important; }
html #tab-tools#tab-tools .td-header h2 i { color:var(--ui-accent-text) !important; }
html #tab-tools#tab-tools .td-header p { font-size:var(--ui-text-footnote) !important; line-height:var(--ui-leading); color:var(--ui-text-2) !important; }
html #tab-tools#tab-tools #tools-grid > .td-card { box-shadow:var(--ui-elev-0) !important; background:var(--ui-surface) !important; border:1px solid var(--ui-line) !important; }
/* Keep the original centered max-w-lg dialog, scrolling only its existing body. */
html #tool-form-modal#tool-form-modal { background:var(--ui-scrim) !important; padding:8px; overflow:hidden; }
html #tool-form-modal#tool-form-modal > div {
  display:flex; flex-direction:column; max-height:calc(100vh - 16px) !important; max-height:calc(100dvh - 16px) !important;
  min-height:0; margin:0 !important; overflow:hidden !important; border-radius:var(--ui-radius-panel) !important;
  background:var(--ui-surface) !important; box-shadow:var(--ui-elev-sheet) !important;
}
html #tool-form-modal#tool-form-modal .td-modal-header,
html #tool-form-modal#tool-form-modal .td-modal-footer { flex:0 0 auto; padding:8px 12px !important; border-color:var(--ui-line) !important; background:var(--ui-surface-alt) !important; }
html #tool-form-modal#tool-form-modal .td-modal-header h3 { font-size:var(--ui-text-title3) !important; color:var(--ui-text-1) !important; }
html #tool-form-modal#tool-form-modal .td-modal-header button { width:var(--ui-control-sm); padding:0 !important; }
html #tool-form-modal#tool-form-modal .td-modal-body { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:10px 12px !important; scrollbar-gutter:stable; }
html #tool-form-modal#tool-form-modal .td-modal-body > * + * { margin-top:8px !important; }
html #tool-form-modal#tool-form-modal .td-modal-body .grid { gap:var(--ui-gap-sm) !important; min-width:0; }
html #tool-form-modal#tool-form-modal .td-modal-body .grid > div { min-width:0; }
html #tool-form-modal#tool-form-modal label { color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important; line-height:var(--ui-leading); margin-bottom:3px !important; }
html #tool-form-modal#tool-form-modal label span:not(.text-red-500) { color:var(--ui-text-2) !important; }
html #tool-form-modal#tool-form-modal .td-picker { padding:4px !important; gap:4px !important; border-color:var(--ui-line-control) !important; border-radius:var(--ui-radius-row) !important; }
html #tool-form-modal#tool-form-modal button[data-icon] { width:var(--ui-control-sm) !important; padding:0 !important; border-color:transparent !important; color:var(--ui-text-2) !important; }
html #tool-form-modal#tool-form-modal button[data-icon].bg-indigo-100 { background:var(--ui-accent-tint) !important; color:var(--ui-accent-text) !important; outline:1px solid var(--ui-accent-system); outline-offset:-1px; }
/* Color swatches retain all eleven original meaningful hues, never a gray reset. */
html #tool-form-modal#tool-form-modal button[data-color] { width:var(--ui-control-sm) !important; padding:0 !important; opacity:1 !important; transform:none !important; border-radius:var(--ui-radius-pill) !important; border-color:var(--ui-line-control) !important; }
html #tool-form-modal#tool-form-modal button[data-color='blue'] { background:#3b82f6 !important; }
html #tool-form-modal#tool-form-modal button[data-color='green'] { background:#22c55e !important; }
html #tool-form-modal#tool-form-modal button[data-color='purple'] { background:#a855f7 !important; }
html #tool-form-modal#tool-form-modal button[data-color='orange'] { background:#f97316 !important; }
html #tool-form-modal#tool-form-modal button[data-color='red'] { background:#ef4444 !important; }
html #tool-form-modal#tool-form-modal button[data-color='indigo'] { background:#6366f1 !important; }
html #tool-form-modal#tool-form-modal button[data-color='teal'] { background:#14b8a6 !important; }
html #tool-form-modal#tool-form-modal button[data-color='pink'] { background:#ec4899 !important; }
html #tool-form-modal#tool-form-modal button[data-color='cyan'] { background:#06b6d4 !important; }
html #tool-form-modal#tool-form-modal button[data-color='amber'] { background:#f59e0b !important; }
html #tool-form-modal#tool-form-modal button[data-color='gray'] { background:#6b7280 !important; }
html #tool-form-modal#tool-form-modal button[data-color].ring-2 { outline:2px solid var(--ui-accent-system); outline-offset:1px; }
@media (max-width:767px) {
  html #tab-tools#tab-tools button,
  html #tool-form-modal#tool-form-modal button,
  html #tab-tools#tab-tools #tools-search,
  html #tool-form-modal#tool-form-modal input:not([type='hidden']) { height:var(--ui-control) !important; min-height:var(--ui-control) !important; }
  html #tab-tools#tab-tools .td-toolbar { flex-direction:column !important; }
  html #tab-tools#tab-tools .td-search-wrap { width:100%; }
  html #tab-tools#tab-tools #tools-category-bar { width:100%; flex-wrap:nowrap !important; overflow-x:auto; overscroll-behavior-x:contain; padding:2px 2px 4px; }
  html #tab-tools#tab-tools #tools-category-bar button { flex:0 0 auto; }
  html #tab-tools#tab-tools #tools-grid { grid-template-columns:minmax(0,1fr) !important; }
  html #tab-tools#tab-tools .td-card-actions button,
  html #tool-form-modal#tool-form-modal button[data-icon],
  html #tool-form-modal#tool-form-modal button[data-color],
  html #tool-form-modal#tool-form-modal .td-modal-header button { width:var(--ui-control) !important; min-width:var(--ui-control); }
  html #tab-tools#tab-tools .td-header p { max-width:230px; }
}