/* JPARTS shared icon system V1 — scoped and responsive.
   Icons: static/ui/icons/*.svg
   Templates use mask-image for CSS color control. */
.jp-icon-ui {
  --jp-icon-color: #2e627a;
  --jp-icon-size: 20px;
  --jp-icon-gap: 8px;
  --jp-icon-touch: 44px;
}
.jp-icon-ui .jp-icon {
  display: inline-block;
  inline-size: var(--jp-icon-size);
  block-size: var(--jp-icon-size);
  flex: 0 0 var(--jp-icon-size);
  background-color: var(--jp-icon-color);
  -webkit-mask: var(--jp-icon-file) center / contain no-repeat;
  mask: var(--jp-icon-file) center / contain no-repeat;
}
.jp-icon-ui .jp-icon-action {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--jp-icon-gap); min-width: var(--jp-icon-touch);
  min-height: var(--jp-icon-touch); box-sizing: border-box;
  text-decoration: none; border-radius: 10px;
  color: inherit;
}
.jp-icon-ui .jp-icon-action:focus-visible { outline: 2px solid #2e627a; outline-offset: 2px; }
/* Presentation presets: line, tile and circle. Keep icon glyph identical. */
.jp-icon-ui[data-icon-style="tile"] .jp-icon-action { background: #e7f0f5; }
.jp-icon-ui[data-icon-style="circle"] .jp-icon-action { background: #e7f0f5; border-radius: 999px; }
@media (min-width: 601px) and (max-width: 1024px) {
  .jp-icon-ui { --jp-icon-size: 19px; --jp-icon-gap: 6px; }
}
@media (max-width: 600px) {
  .jp-icon-ui { --jp-icon-size: 16px; --jp-icon-gap: 4px; --jp-icon-touch: 44px; }
  .jp-icon-ui .jp-icon-label { font-size: 10px; white-space: nowrap; }
}