/* ============================================================
   NESYLAB MARKDOWN EDITOR — site layer (naloži se ZADNJI, za components.css).
   Mirror vloge app.css na glavni strani: page-scoped DS vzorci, ki NISO v
   deljenem DS (npr. user menu .um), + chrome uskladitve. Vse prek var(--…).
   ============================================================ */

/* ── Pisava v menijih: <button> NE deduje font-family; DS .dd__item določa le
   velikost/težo (13px/500), zato ostane brez družine in pade na sistemsko
   pisavo namesto Inter. Popravimo samo družino (velikost/teža iz DS ostaneta).
   Reši export dropdown + vse .dd menije. (Glavna stran isto reši v site layerju.) ── */
.dd__item { font-family: var(--font-body); }

/* ── Topbar kontrolniki (avatar + theme toggle): enotne velikosti kot na glavni
   strani — desktop 40px (--space-10), touch 48px (--control-h-touch). ── */
.markdownStudioNav .um-trigger,
.markdownStudioNav .theme-toggle {
  inline-size: var(--space-10);
  block-size: var(--space-10);
}
@media (pointer: coarse) {
  .markdownStudioNav .um-trigger,
  .markdownStudioNav .theme-toggle {
    inline-size: var(--control-h-touch);
    block-size: var(--control-h-touch);
    min-block-size: var(--control-h-touch);
  }
}

/* ============================================================
   User Menu vzorec (.um) — replika DS vzorca patterns.html#s-menuji
   (poravnano z glavno stranjo app.css). Panel se teleporta v <body> in
   pozicionira prek inline position:fixed; tu so SAMO vizualni slogi.
   ============================================================ */
.um-trigger {
  border: var(--border-width-1) solid transparent;
  background: var(--gradient-brand);
  color: var(--primary-fg);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.um-trigger:hover,
.um-trigger[aria-expanded="true"] {
  border-color: var(--primary);
  box-shadow: var(--shadow-ring);
}

/* Gost (neprijavljen): nevtralni (muted) avatar z user ikono — brez lažne
   brand-gradient identitete. Premaga gradient prek specifičnosti, vse tokeni. */
.um-guest .um-trigger {
  background: var(--bg-sunken);
  color: var(--fg);
  border-color: var(--border-strong);
}

.um-guest .um-head .avatar {
  background: var(--bg-sunken);
  color: var(--fg);
  border: var(--border-width-1) solid var(--border);
}

.um {
  width: calc((var(--space-32) * 2) + var(--space-6));   /* 280px */
  padding: var(--space-2);
  background: var(--bg-elevated);
  border: var(--border-width-1) solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* glava — bleed do roba panela, gradient-brand-soft ozadje, gradient avatar */
.um-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-sm);
  background: var(--gradient-brand-soft);
}

.um-head .avatar {
  background: var(--gradient-brand);
  color: var(--primary-fg);
}

.um-meta {
  min-width: 0;
  flex: 1;
}

.um-name,
.um-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.um-name {
  color: var(--fg);
  font-weight: var(--fw-semibold);
}

.um-email {
  color: var(--fg-subtle);
  font-size: var(--fs-caption);
}

/* sekcijska oznaka (npr. „Jezik") — DS label slog (mono / uppercase / subtle) */
.um-title {
  padding: var(--space-2) var(--space-2) var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

/* element: 9px 10px (iz tokenov), radius-sm, tint-2 hover, fg-subtle ikona */
.um-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: calc(var(--space-2) + var(--border-width-1)) calc(var(--space-2) + (var(--space-1) / 2));
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg);
  /* Poravnano z DS .dd__item (13px / 500) — postavke menija enake navadnim
     dropdown postavkam (prej 16px prek font: inherit → nedosledno). */
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.um-item:hover {
  background: var(--tint-2);
}

.um-item svg {
  width: var(--icon-xs);
  height: var(--icon-xs);
  color: var(--fg-subtle);
}

.um-item.danger {
  color: var(--danger);
}

.um-item.danger:hover {
  background: var(--danger-soft);
}

.um-item.danger svg {
  color: var(--danger);
}

.um-check {
  margin-inline-start: auto;
  color: var(--primary);
}

.um-sep {
  height: var(--border-width-1);
  margin: var(--space-1) 0;
  background: var(--border);
}
