/* Материал использует обычную строку навигатора; четыре превью справа
     показывают разрез (заливка, штриховка), затем фасад в том же порядке. */
[data-ui-surface="navigator"] .panel__item.material-row { padding-right: var(--arhix-space-micro); }
[data-ui-surface="navigator"] .material-scope-toggle {
    appearance: none;
    width: var(--arhix-check-size);
    height: var(--arhix-check-size);
    flex: none;
    border: var(--arhix-status-stroke-width) 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: var(--arhix-preview-height);
    height: var(--arhix-preview-height);
    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 calc(4 * var(--arhix-ui-unit)),
      var(--material-pattern-color, var(--arhix-ink)) calc(4 * var(--arhix-ui-unit)) calc(6 * var(--arhix-ui-unit))
    );
  }
[data-ui-surface="navigator"] .material-preview--grid::after {
    background:
      repeating-linear-gradient(0deg, transparent 0 calc(5 * var(--arhix-ui-unit)), var(--material-pattern-color, var(--arhix-ink)) calc(5 * var(--arhix-ui-unit)) calc(6 * var(--arhix-ui-unit))),
      repeating-linear-gradient(90deg, transparent 0 calc(5 * var(--arhix-ui-unit)), var(--material-pattern-color, var(--arhix-ink)) calc(5 * var(--arhix-ui-unit)) calc(6 * var(--arhix-ui-unit)));
  }
[data-ui-surface="navigator"] .material-preview--cross::after {
    background:
      repeating-linear-gradient(45deg, transparent 0 calc(7 * var(--arhix-ui-unit)), var(--material-pattern-color, var(--arhix-ink)) calc(7 * var(--arhix-ui-unit)) calc(8 * var(--arhix-ui-unit))),
      repeating-linear-gradient(135deg, transparent 0 calc(7 * var(--arhix-ui-unit)), var(--material-pattern-color, var(--arhix-ink)) calc(7 * var(--arhix-ui-unit)) calc(8 * var(--arhix-ui-unit)));
  }
[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% var(--arhix-space-pill) auto;
    height: var(--arhix-line-preview-width, calc(1.5 * var(--arhix-ui-unit)));
    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 calc(4 * var(--arhix-ui-unit)),
      var(--hatch-preview-color, var(--arhix-drawing-preview-ink)) calc(4 * var(--arhix-ui-unit)) calc(4 * var(--arhix-ui-unit) + var(--arhix-line-preview-width, calc(1.5 * var(--arhix-ui-unit))))
    );
  }
[data-ui-surface="navigator"] .graphic-preview.material-preview--grid::after {
    background:
      repeating-linear-gradient(
        0deg,
        transparent 0 calc(5 * var(--arhix-ui-unit)),
        var(--hatch-preview-color, var(--arhix-drawing-preview-ink)) calc(5 * var(--arhix-ui-unit)) calc(5 * var(--arhix-ui-unit) + var(--arhix-line-preview-width, var(--arhix-ui-unit)))
      ),
      repeating-linear-gradient(
        90deg,
        transparent 0 calc(5 * var(--arhix-ui-unit)),
        var(--hatch-preview-color, var(--arhix-drawing-preview-ink)) calc(5 * var(--arhix-ui-unit)) calc(5 * var(--arhix-ui-unit) + var(--arhix-line-preview-width, var(--arhix-ui-unit)))
      );
  }
[data-ui-surface="navigator"] .graphic-preview.material-preview--cross::after {
    background:
      repeating-linear-gradient(
        45deg,
        transparent 0 calc(7 * var(--arhix-ui-unit)),
        var(--hatch-preview-color, var(--arhix-drawing-preview-ink)) calc(7 * var(--arhix-ui-unit)) calc(7 * var(--arhix-ui-unit) + var(--arhix-line-preview-width, var(--arhix-ui-unit)))
      ),
      repeating-linear-gradient(
        135deg,
        transparent 0 calc(7 * var(--arhix-ui-unit)),
        var(--hatch-preview-color, var(--arhix-drawing-preview-ink)) calc(7 * var(--arhix-ui-unit)) calc(7 * var(--arhix-ui-unit) + var(--arhix-line-preview-width, var(--arhix-ui-unit)))
      );
  }
[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 var(--arhix-space-small);
    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: var(--arhix-status-dot-size);
    height: var(--arhix-status-dot-size);
    border-radius: 50%;
    flex: none;
  }