/* «Синхронизация с M365» (pages/m365-sync.js) и значок источника у техники. Только токены темы: светлая и тёмная работают без правок. */
.m3 { display: flex; flex-direction: column; gap: var(--space-4); max-width: var(--page-max, 1600px); }
.m3-lead { margin: 0; max-width: 78ch; color: var(--text-secondary); font-size: var(--text-base); line-height: 1.55; }

.m3-access { display: flex; flex-direction: column; gap: 4px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: var(--status-info-bg); font-size: var(--text-base); }
.m3-access span { color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.5; max-width: 90ch; }
.m3-access--ok { background: var(--status-success-bg); }
.m3-access--warn { background: var(--status-warning-bg); border-color: var(--status-warning); }

.m3-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: var(--bg-card); }
.m3-h2 { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-md); font-weight: var(--font-semibold); }
.m3-meta { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); }
.m3-hint, .m3-note { margin: 0; color: var(--text-muted); font-size: var(--text-sm); }
.m3-note { color: var(--text-secondary); padding: var(--space-2) var(--space-3); border-left: 3px solid var(--status-warning); background: var(--status-warning-bg); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.m3-fail { margin: 0; color: var(--status-danger); font-size: var(--text-base); }
.m3-sum { margin: 0; font-size: var(--text-md); font-weight: var(--font-medium); font-variant-numeric: tabular-nums; }
.m3-acts { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.m3-auto { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-base); cursor: pointer; }

.m3-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--accent-primary); animation: m3-spin .8s linear infinite; }
@keyframes m3-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .m3-spin { animation-duration: 3s; } }

/* Секции отчёта: раскрывающиеся списки; конфликты и ошибки подсвечены и раскрыты по умолчанию */
.m3-sec { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-secondary); }
.m3-sec--warn { border-color: var(--status-warning); }
.m3-sec--bad { border-color: var(--status-danger); }
.m3-sec > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); cursor: pointer; list-style: none; font-weight: var(--font-semibold); font-size: var(--text-base); }
.m3-sec > summary::-webkit-details-marker { display: none; }
.m3-sec > summary::before { content: '▸'; margin-right: var(--space-2); color: var(--text-muted); transition: transform .15s; }
.m3-sec[open] > summary::before { transform: rotate(90deg); }
.m3-sec__t { flex: 1; min-width: 0; }
.m3-sec__n { font-variant-numeric: tabular-nums; color: var(--text-secondary); font-weight: var(--font-medium); }
.m3-sec__hint { margin: 0; padding: 0 var(--space-4) var(--space-3); color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.5; max-width: 90ch; }
.m3-rows { display: flex; flex-direction: column; border-top: 1px solid var(--border-subtle); }
.m3-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-3) var(--space-4); }
.m3-row + .m3-row { border-top: 1px solid var(--border-subtle); }
.m3-row__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 260px; }
.m3-row__name { font-weight: var(--font-medium); overflow-wrap: anywhere; }
.m3-row__sub { color: var(--text-secondary); font-size: var(--text-sm); overflow-wrap: anywhere; }
.m3-row__side { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; flex: 1 1 200px; }
.m3-row__err { color: var(--status-danger); }
.m3-row--conflict { flex-direction: column; gap: var(--space-2); }
.m3-row--conflict > .m3-row__main { flex: 0 0 auto; }   /* в колонке flex-basis превращается в высоту */
.m3-row__why { font-style: italic; }
.m3-chip { padding: 2px 8px; border-radius: var(--radius-full); background: var(--status-info-bg); font-size: var(--text-xs); white-space: nowrap; }
.m3-diff { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: 0; width: 100%; }
.m3-diff dt { color: var(--text-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; }
.m3-diff dd { margin: 2px 0 0; font-size: var(--text-base); overflow-wrap: anywhere; }

/* История запусков: строки-кнопки */
.m3-hist { display: flex; flex-direction: column; }
.m3-hist__row { display: grid; grid-template-columns: 11ch 12ch 7ch minmax(0, 1fr); gap: var(--space-3); align-items: baseline; padding: var(--space-2) var(--space-3); border: 0; border-top: 1px solid var(--border-subtle); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: var(--radius-sm); }
.m3-hist__row:first-child { border-top: 0; }
.m3-hist__row:hover { background: var(--bg-panel-hover); }
.m3-hist__row--on { background: var(--accent-surface); }
.m3-hist__when { font-variant-numeric: tabular-nums; }
.m3-hist__kind, .m3-hist__src { color: var(--text-secondary); font-size: var(--text-sm); }
.m3-hist__res { font-size: var(--text-sm); overflow-wrap: anywhere; }
.m3-hist__res--bad { color: var(--status-danger); }

@media (max-width: 768px) {
  .m3-card { padding: var(--space-3) var(--space-4); }
  .m3-acts { flex-direction: column; }
  .m3-acts .btn { width: 100%; justify-content: center; }
  .m3-diff { grid-template-columns: 1fr; gap: var(--space-2); }
  .m3-hist__row { grid-template-columns: 1fr 1fr; row-gap: 2px; }
  .m3-hist__when { grid-column: 1 / -1; font-weight: var(--font-medium); }
  .m3-hist__res { grid-column: 1 / -1; }
}

/* Значок источника в строке списка техники */
.m3-src { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-medium); vertical-align: 1px; white-space: nowrap; background: var(--status-info-bg); color: var(--text-secondary); }
.m3-src--info { background: var(--accent-surface); color: var(--accent-primary); }