/* Материал использует обычную строку навигатора; четыре превью справа
     показывают разрез (заливка, штриховка), затем фасад в том же порядке. */
[data-ui-surface="navigator"] .panel__item.material-row { padding-right: var(--arhix-space-micro); }
[data-ui-surface="navigator"] .material-scope-toggle {
    appearance: none;
    width: 14px;
    height: 14px;
    flex: none;
    border: 1.5px solid var(--arhix-ink-faint);
    border-radius: 50%;
    padding: 0;
    background: transparent;
    cursor: pointer;
  }
[data-ui-surface="navigator"] .material-scope-toggle.is-current {
    border-color: var(--arhix-accent);
    background: var(--arhix-accent);
  }
[data-ui-surface="navigator"] .material-scope-toggle.is-current::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: var(--arhix-surface-raised);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M 4.2 7.4 L 6.2 9.3 L 9.8 4.9' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M 4.2 7.4 L 6.2 9.3 L 9.8 4.9' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }
[data-ui-surface="navigator"] .material-scope-empty {
    min-height: var(--arhix-control-height);
    display: flex;
    align-items: center;
    padding: 0 var(--arhix-space-gap);
    color: var(--arhix-ink-faint);
    font-size: var(--arhix-font-size-small);
  }
[data-ui-surface="navigator"] .material-row__previews {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--arhix-space-micro);
    margin-left: var(--arhix-space-gap);
  }
[data-ui-surface="navigator"] .material-preview {
    appearance: none;
    position: relative;
    width: 20px;
    height: 20px;
    flex: none;
    overflow: hidden;
    border: 0;
    padding: 0;
    border-radius: var(--arhix-radius-pill);
    background: var(--material-fill, var(--arhix-material-preview-default));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--arhix-ink) 6%, transparent);
    cursor: pointer;
  }
[data-ui-surface="navigator"] .material-preview::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
[data-ui-surface="navigator"] .material-preview--diagonal::after {
    background: repeating-linear-gradient(
      135deg,
      transparent 0 4px,
      var(--material-pattern-color, var(--arhix-ink)) 4px 6px
    );
  }
[data-ui-surface="navigator"] .material-preview--grid::after {
    background:
      repeating-linear-gradient(0deg, transparent 0 5px, var(--material-pattern-color, var(--arhix-ink)) 5px 6px),
      repeating-linear-gradient(90deg, transparent 0 5px, var(--material-pattern-color, var(--arhix-ink)) 5px 6px);
  }
[data-ui-surface="navigator"] .material-preview--cross::after {
    background:
      repeating-linear-gradient(45deg, transparent 0 7px, var(--material-pattern-color, var(--arhix-ink)) 7px 8px),
      repeating-linear-gradient(135deg, transparent 0 7px, var(--material-pattern-color, var(--arhix-ink)) 7px 8px);
  }
[data-ui-surface="navigator"] .material-preview--hatch-only {
    /* Это образец узора, а не цвет материала: фон и чернила
       следуют режиму холста, а не теме родительской панели. */
    --material-fill: var(--arhix-drawing-preview-bg);
    --material-pattern-color: var(--arhix-drawing-preview-ink);
    --arhix-canvas-ink: var(--arhix-drawing-preview-ink);
  }
[data-ui-surface="navigator"] .material-preview--hatch-only > svg {
    display: block;
    width: 100%;
    height: 100%;
  }
[data-ui-surface="navigator"] .material-preview:focus-visible {
    outline: 2px solid var(--arhix-accent);
    outline-offset: 1px;
  }


  /* Графика использует то же компактное превью, что материалы, но шире — 28×20.
     Нейтральные образцы толщины и штриховки следуют холсту; явно заданные
     цвета заливки и линии остаются данными и не инвертируются. */
[data-ui-surface="navigator"] .graphic-preview {
    width: var(--arhix-control-height);
    cursor: inherit;
  }
[data-ui-surface="navigator"] .line-weight-preview { --material-fill: var(--arhix-drawing-preview-bg); }
[data-ui-surface="navigator"] .line-weight-preview::after {
    inset: 50% 2px auto;
    height: var(--arhix-line-preview-width, 1.5px);
    transform: translateY(-50%);
    background: var(--arhix-line-preview-color, var(--arhix-drawing-preview-ink));
  }
[data-ui-surface="navigator"] .graphic-preview.material-preview--diagonal::after {
    background: repeating-linear-gradient(
      135deg,
      transparent 0 4px,
      var(--hatch-preview-color, var(--arhix-drawing-preview-ink)) 4px calc(4px + var(--arhix-line-preview-width, 1.5px))
    );
  }
[data-ui-surface="navigator"] .graphic-preview.material-preview--grid::after {
    background:
      repeating-linear-gradient(
        0deg,
        transparent 0 5px,
        var(--hatch-preview-color, var(--arhix-drawing-preview-ink)) 5px calc(5px + var(--arhix-line-preview-width, 1px))
      ),
      repeating-linear-gradient(
        90deg,
        transparent 0 5px,
        var(--hatch-preview-color, var(--arhix-drawing-preview-ink)) 5px calc(5px + var(--arhix-line-preview-width, 1px))
      );
  }
[data-ui-surface="navigator"] .graphic-preview.material-preview--cross::after {
    background:
      repeating-linear-gradient(
        45deg,
        transparent 0 7px,
        var(--hatch-preview-color, var(--arhix-drawing-preview-ink)) 7px calc(7px + var(--arhix-line-preview-width, 1px))
      ),
      repeating-linear-gradient(
        135deg,
        transparent 0 7px,
        var(--hatch-preview-color, var(--arhix-drawing-preview-ink)) 7px calc(7px + var(--arhix-line-preview-width, 1px))
      );
  }
[data-ui-surface="navigator"] .item__badge {
    height: var(--arhix-badge-height);
    border-radius: var(--arhix-radius-chip);
    background: var(--arhix-surface);
    display: inline-flex;
    align-items: center;
    padding: 0 6px;
    margin-left: auto;
    flex: none;
  }
[data-ui-surface="navigator"] .item__badge-text {
    font-family: var(--arhix-font);
    font-weight: var(--arhix-font-weight-body);
    font-size: var(--arhix-font-size-small);
    color: var(--arhix-ink-muted);
    line-height: 1;
  }
[data-ui-surface="navigator"] .item__badge + .item__badge { margin-left: var(--arhix-space-gap); }
[data-ui-surface="navigator"] .item__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: none;
  }